WordPress generating invalid markup, How to remove it? - html

Hi I am trying to get the categories associated with a post in it's meta section by using the following code:
<div>FILED AS: <span class="gf-post-meta-result"><?php the_category(' • ') ?></span></div>
WordPress is generating the markup as:
<div>FILED AS: <span class="gf-post-meta-result">Uncategorized</span></div>
The issue:
This part rel="category tag" generated by wordpress is making my code invalid. W3c Validator throws an error saying:
Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL. Whitespace in path component. Use %20 in place of spaces.
…w all posts in Uncategorized" rel="category tag">Uncategorized</a></span></div>
Any idea how to rectify this?

These two rel values are not invalid. The validator is not up to date.
tag is defined in the HTML5 spec.
category is registered officially.
So it's no problem to use these values. The validator will probably catch up in the future.

Just paste the following code in your functions.php file inside your theme folder
function remove_category_rel($output)
{
$output = str_replace(' rel="category tag"', '', $output);
return $output;
}
add_filter('the_category', 'remove_category_rel');

Related

Cleanup HTML of a wordpress woocommerce product description?

Is there a tool which it can automatically cleanup unnecessary html codes, add missing html code pairs, remove wrong html code?
Something like this online tool
https://html-cleaner.com/
you can do it like this.
function stripe_woocommerce_short_description($the_excerpt) {
//wp_strip_all_tags will strip all HTML tags including script and style.
//return wp_strip_all_tags($the_excerpt);
//pass second parameter true if you want to remove break tag <br/> also.
//return wp_strip_all_tags( $the_excerpt, true );
//For Keep specific tags
return strip_tags($the_excerpt,"<img><table><p>");
}
add_filter('woocommerce_short_description', 'stripe_woocommerce_short_description',10, 1);

link inside a p tag in react

I have a paragraph that is enclosed in artist.bio.summary. This variable contains all the details about an artist. This is fetched from somewhere else. I am printing this out inside a p tag.
My problem is there is a link inside this p tag within a a tag.
The a tag is like this;
Read more
The p tag just prints this out rather than giving me a link to click.
What should I do to act accordingly?
I am calling this property as below:
<p>{artist.bio.summary}</p>
let artist = {
bio: { summary: '' }
};
I had set this artist.bio.summary as a string initially.
And an example string that i am getting is below:
"hello Read more there"
The above string is the content of the artist.bio.summary once i received it
This is a security issue and is not allowed by React (by default) so it's as expected to not evaluate the embedded html markup, but they have a workaround if you really want to. dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={artist.bio.summary}></p>
But please read up on injection attacks so you understand the consequences before using this kind of dynamic evals.
https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection
From you description it seems that artist.bio.summary contains the entire content i.e Read more . In that case what you need is dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={{__html: artist.bio.summary}}/>
However I would suggest you to make modifications to your data such that you aren't actually passing the HTML to the React component but creating it using JSX yourself

amp html validation error <div style="clear:both;"> on blogger

i have problem about amp validation in blogger
i use old template (classic)and
when try to https://thaifoodguru.blogspot.com/2016/07/som-tum-papaya-spicy-salad.html
it have 2 error at paragraph etc.
1. error type The attribute 'style' may not appear in tag 'div'.
2. error type The attribute 'style' may not appear in tag 'div'.
error come from post maybe
when remove it (i mean no post content) amp validation successful
how i can solve it? please
Make that div into class x
Define this style for .x
This is how I made it in my AMP blogspot. You can check the source - https://amprandom.blogspot.com

Are JSP expressions evaluated inside HTML comments of a JSP page?

Are JSP expressions evaluated inside HTML comments of a JSP page?
i.e What would server output in this case?
<!--
Jeremy <%="Flowers"%>
-->
Will the expression be resolved or will it remain as an expression in the HTML comment
a)
<!--
Jeremy <%="Flowers"%>
-->
or b)
<!--
Jeremy Flowers
-->
Yes, the expressions will be resolved. The JSP page doesn't even know it is writing in HTML format, so it doesn't interpret anything HTML-specific.
You can also write plain text using JSP, or JSON, or whatever you like.
Those are html comments, not jsp comments. So, all jsp code inside is still evaluated.
There's also jsp-specific way to comment content: <%-– ... -–%>. Content inside won't be evaluated by the server and won't be passed to the browser. So, it acts as html comment too.
you can even use HTML comments to hide evaluated results from jsp expressions partially when the page is rendered to the browser.
e.g.
`${empty requestScope.errors? "" : "<p id='errors'>Error(s)!
<ul>"}
<!--${requestScope.errors.stream().map(x -> "-->
<li>"x"</li>
<!--").toList()}-->
${empty requestScope.errors? "" : "</ul></p>"}`
the local variable x from requestScope.errors.stream().map(x->) is still evaluated and passed to <li>"+=x+="</li>
output:
` Error(s)!
Product must have a nameProduct must have a price`
if the expressions are not in HTML comment tag, the "[]" symbol will appear due to .toList()
output without HTML tag:
`Error(s)!
[Product must have a nameProduct must have a price]`

How to point to CSS default class using the class attribute

Is there a way to point to the default CSS class of an object?
For example, depending if a user is logged in I want to specify a different CSS class to control the style of a header.
$css_class = "";
if($logged_in)
$css_class = "success"
echo "[h1 class=".$css_class."] My Title [/h1]"
If the user is logged in, the css class is set to "success"" otherwise, it's set to "".
I know it's improper w3c to have a blank class, but is there a way that I can just point to the default H1 property instead of creating a separate "not logged in" css class?
An empty class attribute is only invalid under XHTML 1.1. Using a DOCTYPE of XHTML 1.0, HTML 4.01 and HTML 5 is will validate fine.
I wouldn't get too hung up on validation, it's very useful but isn't the be-all and end-all of web development. The only instance where I absolutely make sure my HTML 100% validates is during the very initial HTML and CSS build, since at that stage invalid markup can cause havock with CSS. Once I start adding server-side and Javascript interactions I'm not overly concerned with it.
Of course, you shouldn't just blatently ignore it, but as long as you know what the validation errors are, understand them, and have made a concsious decision not to fix them, I think that's okay.
Why not just omit the class attribute if it's empty?
$css_class = "";
if($logged_in)
$css_class = " class=""success"""
echo "[h1.$css_class.] My Title [/h1]"
(Not sure about the escaping of quotation marks in a string... I have no idea what language you are using...)
It's not invalid to to have an empty string for a className. The class attribute is a cdata-list, so pretty much anything can go in there and it will still validate.
However, you will need to use quotes around your attribute values, otherwise you can't make an empty attribute parse. It's the right thing to do to always include the quotes anyway.
echo '<h1 class="'.htmlspecialchars($css_class).'"> My Title </h1>'
<h1 class="">My Title</h1> will work fine (not sure if it'll pass W3C validation, but it'll work in all major browsers).
$css = $logged_in ? 'success' : 'dummy-undefined-css-value';
echo "<h1 class=\"$css\">My Title</h1>";
If you're going to have a conditional like in Matt Huggins' answer anyway, and considering your comment on Guffa's answer, why don't you move the conditional into the echo? That'll give you the cleanest HTML output. For example:
$css_class = array();
if($logged_in)
{
$css_class[] = "success";
}
if($something_else)
{
$css_class[] = "some-class";
}
echo '<h1' .
empty($css_class)
? ''
: ' class="' . implode(' ', $css_class) . '"'
. '> My Title </h1>';