Error and warnings on the page
-
Hi,
I checked my site.See here:
What is wrong?
Thanks for helping.
best regards,
EstherThe blog I need help with is: (visible only to logged in users)
-
Hi Esther,
Thank you for reporting these! HTML validators like this one are a great tool for debugging code, especially when you’re making your own websites from scratch. But sometimes with frameworks like WordPress you’ll run into situations where the site works and loads just fine, but some bits aren’t completely valid. Validation is meant to help make sure your site loads correctly, not the other way around.
So unless you’re seeing any element on your site not behave correctly… no need to lose sleep about any of these. :)
With that said, there are a couple of these errors that I’m noticing are a little out of place. I’ll report the big issues to our team.
We can walk through each issue together:
- Line 35, Column 159: Duplicate ID all-css-0.
- Line 262, Column 200: Duplicate ID featured-image.
- Line 298, Column 206: Duplicate ID featured-image.
- Line 333, Column 200: Duplicate ID featured-image.
- Line 367, Column 210: Duplicate ID featured-image.
- Line 400, Column 204: Duplicate ID featured-image.
- Line 437, Column 209: Duplicate ID featured-image.
- Line 694, Column 75: Duplicate ID _wpnonce.
- Line 718, Column 75: Duplicate ID _wpnonce.
- Line 722, Column 159: Duplicate ID all-css-0.
Sometime it can be a struggle to know when to an ID or a Class to describe an element. Hypothetically, IDs should only be used once on a page whereas Classes are used multiple times to describe elements that behave the same. Either way you normally tag an element with these so you can refer to them with other bits of code.
In this case, the _wpnonce are IDs in your Follow widget — while the ID appears twice in the code, only one button is ever displayed, because it changes based on if you’re a follower or not. So no worries there. While any code that refers to that ID will affect both buttons… only one will ever be shown in this context.
Similarly the all-css-0 IDs are tagged to multiple stylesheets, but each of these serve individual functions, so any styling you edit on your site won’t require calling the ID. The context of link element means this isn’t much a difference by the time it hits the browser, but that particular ID likely serves some purpose to WordPress core, as I see this (or similar) ID duplication on nearly ever WordPress site.
However, the featured-image should almost assuredly be a class. While only one featured image will ever be present on a post or page, it’s expected that we’ll have lists of posts using WordPress. There may have been some other design reason why Big Brother uses featured-image as an ID, but at first glance it appears to be used as a class. I’ll bring this up with the theme designer and see if it was intentional.
Line 100, Column 939: Bad value title for attribute name on element meta: Keyword title is not registered.
This isn’t really an error, more of a disagreement on best practices for Search Engine Optimization. If you’ll Google around for this issue, a lot of people use both <title> and <meta name=”title”>. One should most assuredly use the title tag, and your site has that. But some crawlers may also make use of the meta name=“title” tag — it would appear the Mozilla feels it’s unnecessary. There’s really no downside to have this extra metadata, and it’s helpful in some instances.
- Line 415, Column 178: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
- Line 585, Column 588: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
- Line 585, Column 774: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
- Line 585, Column 938: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
- Line 585, Column 1116: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
- Line 585, Column 1281: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
These all appear to be the result of various embeds. When you add an image through WP media library, if you don’t declare an alt value we place a null alt value.
So long as the images are displaying, that’s all that matters. This would only be an error if the image didn’t appear, as browsers usually required an alt tag to appear correctly. Let me know if you’re have any trouble with embeds. Likely its the context of other WordPress.com code that’s accounting for these lack of alts.
Line 546, Column 31: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
Looks to be an issue with the design of the About Me widget, as all these style are only used in that Widget. I’ll pass that on to the widget developer and see if they can develop this in a way that keeps ‘style’ from being a child element of the widget area’s div.
Line 697, Column 110: Stray end tag a.
Yup, there’s an extra end tag! I’ll report this to the developer in charge of the follow button.
Line 702, Column 41: Bad value for attribute action on element form: Must be non-empty.
This is an invalid bit that comes when you use the Infinite Scroll feature. If you disable infinite scroll, the post navigations come into play and the action attribute will be used. Since you have Infinite Scroll enabled, this form element doesn’t even get seen by users — so being invalid won’t affect their browser at all.
Line 722, Column 159: Element link is missing required attribute property.
Line 726, Column 161: Element link is missing required attribute property.
Both of these errors are related to having a ‘link’ element with a pages body. Normally ‘link’ elements would go in the ‘head’ but these are special cases, again related to the Infinite Scroll. Not technically valid in tools like this one, but so long as your Infinite Scroll is working, this code is working. :)
Consider using the h1 element as a top-level heading only (x16)
Even just a suggestion from their validator. By the way these separate h1s are grouped we’ve not seen accessibility or SEO be an issue, and keeping them as h1s makes it easier to style them using our Customizer system.
—
That was a lot of material! Please let me know if you have any further questions, but I’ll get those couple of issues reported to the right people. :)
Best,
-Alex G.
-
Hi Alex, thank you for your long answer. I have to sleep over all these points you mentioned. As I am not a technically talented person I have to work myself through all this bit by bit.
Thanks a lot.
Best,
Esther
-
Hi Esther,
For what it’s worth, it took me quite a bit too. :)
Hopefully everything is clear as you go through it!
Best,
-Alex G.
- The topic ‘Error and warnings on the page’ is closed to new replies.
WordPress.com Forums 