Solved

Getting lots of W3C errors in my XHTML site...

Posted on 2016-07-19
43
62 Views
Last Modified: 2016-07-27
Hi experts, I've got a website made in XHTML (made from a template) that generates quite a lot of W3C errors when ran through validator.w3.org.  Seems like the bulk of them are from not putting elements and attributes in lower-case. Instead of staying in XHTML format and having to do all these fixes, could I not just make my site regular HTML format (not XHTML) and then my existing site will be okay?

Thanks
   Shawn
0
Comment
Question by:shawn857
  • 20
  • 17
  • 6
43 Comments
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 350 total points
Comment Utility
Maybe but Not necessarily.  Each one of the DOCTYPEs shown here https://www.w3.org/QA/2002/04/valid-dtd-list.html are a set of rules to tell browsers how to display web pages.  The differences are usually not great.  But the one about using lower case could require a lot of editing.  I would try one of the other DOCTYPEs and see what happens.  It's only a one-line change to find out.
0
 

Author Comment

by:shawn857
Comment Utility
OK thanks Dave, I can try that. The website actually seems to be working fine in all aspects... I'm just wondering if I left it as is, do those errors hurt google crawling and search ranking in any way? That's really the main thing I'm worried about.

Thanks
    Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
It is better if the site will validate because then Google and others don't have to 'guess' at what is there, they can just follow known rules to find the content.  I think the capitalization is a minor issue.  Browsers of course try to make everything work.
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
I'm not sure how many pages you have, but if you have Dreamweaver, you can select the entire page, right click in the middle of the selection, and select Selection->Convert Tags to Lowercase from the contextual menu.
0
 

Author Comment

by:shawn857
Comment Utility
Thanks guys... Kim: I don't use Dreamweaver. I tried to fix all those upper case META, CONTENT, NAME etc tags to lower case but I found my site didn't work properly after that - it messed up the display of my menu somehow. So instead, I just tried replacing the doctype as plain ol' "HTML":

<!DOCTYPE html>
<html lang="en">
<head>

Open in new window



... and ran it through the validator again. It didn't show those 161 errors as before, but instead several "new" kinds of errors which I don't quite follow. Please see attached screenshots. A couple of them are from my call to "Google Translate". i don't know what could be wrong regarding that - just using the code that Google Translate instructed me to use. The others seem to imply that I don't have proper opening and closing <head> and <body> tags, but as far as I can see, I do. Puzzling. Any thoughts please?

Thanks
   Shawn
errors1.JPG
errors2.JPG
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
When you have errors like the 'meta' line, it breaks the flow of the elements and attributes.  While "Google Translate" will work ok, it is not an official attribute so it will never validate.
0
 

Author Comment

by:shawn857
Comment Utility
I'm not sure what you mean by "breaks the flow"... I just put in the exact code that Google Translate suggested I put in. Do I take that META right out then?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
The validator is expecting the HTML elements and attributes to occur in a particular order.  When one is flagged as invalid, some times the ones that follow don't make any sense to the validator so it considers them errors too.  If you want to use Google Translate, leave that code in there.  But... since it is not 'official', it will never validate.
0
 

Author Comment

by:shawn857
Comment Utility
OK thanks Dave, I'm going to leave the translate in. What do you think of my other errors as shown in errors2.jpg on lines 169 and 170?

Thanks
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I'd be looking for extra copies of </head> and <body... before line 169.
0
 

Author Comment

by:shawn857
Comment Utility
Well, I have a <head> on line 3 and the </head> on line 169... none anywhere else.

Also, I have <body id="home" class=""> on line 170, and </body></html> on line 451 (final line) of my HTML. None anywhere else. Wonder why it would be generating such errors? Weird eh?
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 150 total points
Comment Utility
I've seen situations where one minor error caused the validator to assume situations which didn't exist -- such as assuming the head has been closed and a body has been opened. Then when the real </head> and <body> were encountered, the validator got confused. Usually these errors that I like to refer to as "ghost errors" disappear when the first error is corrected.

Have you removed the </meta> tag which is only valid in X/HTML and re-validated? Are those head and body errors still occurring?

If so, do they disappear when the google translate meta tag is removed? If so, you can consider these errors benign and ignore them.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Are you looking at your source code or at the 'View Source' in your browser?  I've seen quite a few questions where the author included a file that had a complete web page included in another complete web page.
1
 

Author Comment

by:shawn857
Comment Utility
Thanks guys.

Kim: I removed the </meta> tag from the google-translate line (line 146) and re-validated. It did get rid of error #3 as shown in my errors2.jpg screenshot, but the rest of the errors still remain.

Dave: I always do my HTML editing using a little simple program called "HTMLed32". I did however have a look at the "View Source" and the HTML is the same - I don't include any other files.

While I was looking at the "View Source", i did notice that the problematic lines (169 and 170) are in RED while all the other HTML code is in blue/green/purple (see attachment). Is this again indicative of errors on those lines when using "View Source"?

Thanks
   Shawn
headbodytags.JPG
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
Yes, red is an indication of HTML errors in the view source page. This is significant in that the browser agrees with the validator that there is an error. So this can't be a ghost error. You need to search the source code for another </head> and <body> tag.

It would be helpful if we could see the source code. Can you post a link to the page?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Yes, that normally means there is an error somewhere before those lines.  Check to make sure that there is a <head> tag before the </head> tag or something else that isn't closed.
0
 

Author Comment

by:shawn857
Comment Utility
Thanks guys, checked and double checked... my head and body open/closing tags seem ok to me, I am stumped.
The website is: www.listmate.com

Thanks!
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You have this in the middle of the <head> section and it belongs in the <body>.  It is normally put at the top of the page so people can choose the language they want.
<div id="google_translate_element"></div>

Open in new window

By the way, that's an example of what I mean by out of sequence or out or order.  It's an element that isn't where it should be so it breaks the flow for validation.
0
 

Author Comment

by:shawn857
Comment Utility
Thanks Dave, I will fix that right now. Should I move only that line to the body section, or this whole section of code:

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>


<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, gaTrack: true, gaId: 'UA-35897464-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Open in new window



Thanks
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
When we used that recently, we put all of the Google Translate code in the body although we may have put that first script in the <head>.
0
 

Author Comment

by:shawn857
Comment Utility
OK, I just tried putting that whole section of code right down before my final </body>,,, but that makes the Google Translate dropdown box appear at the very bottom of my site - not what I want. I'll try putting the first script (below) back up in the <head> section:

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

Open in new window

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:shawn857
Comment Utility
hmmm, that didn't work - still has the Google Translate dropdown box at the bottom of my page....
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You have to put that <div> where you want it to display.  The JavaScript can go just about anywhere.
0
 

Author Comment

by:shawn857
Comment Utility
OK, you mean just this line right?

<div id="google_translate_element"></div>

I moved that line up before the </head> and the Translate dropdown box now appears back up top where I want it. But still the code

</head>
<body id="home" class="">

... is in red showing error when I view the source. Would you be able to take a look at my page once again please? I'm pretty confused by this.

Thanks
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
This <div id="google_translate_element"></div> needs to go in the <body>, not the <head>.  Put it right below the <body> tag.  Or maybe in the 'wrapper' div.
0
 

Author Comment

by:shawn857
Comment Utility
ahhh that did it! That's really cleaned things up, thanks! I notice the only things left showing in RED are the '&nbsp's I use to put some spaces in my text, like on line 416:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Are these not correct, or is there a better way to insert spaces?

Thanks!
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
The &nbsp; are not a problem.  It appears that Firefox puts 'entities' in light red.
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
This is not an error. I'm not sure why character entities are always displayed in red except to highlight them.

But if you see a lone ampersand in red, that is an error. Lone ampersands are forbidden in content and html tags where the &amp; character entity is required. The most common occurrence of this error is probably in href value query strings where they are also supposed to be replaced with the character entitiy. I'm not familiar with a single browser that doesn't forgive this error though.
0
 

Author Comment

by:shawn857
Comment Utility
OK thanks guys. Well, that certainly cleared up all the errors when I do a "View Source" on my page... but now when I run it through the validator at https://validator.w3.org/ I get a whole host of new errors.... dang. is there some basic thing my page is lacking, or are all these new errors ignorable?

Thanks
    Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Your page is working... but those are errors.  All the versions of HTML from HTML 3.2 to HTML5 all represent different sets of rules for rendering web pages.  To get a page to validate completely, you have to adhere to the rules for the DOCTYPE you are listing at the top.  I will note that if your original 'template' was supposedly XHTML... it wasn't.  I hope you didn't have to pay for it.
0
 

Author Comment

by:shawn857
Comment Utility
I'm using <!DOCTYPE html>... shouldn't that be the least "restrictive" ? I'm kinda surprised that it's still kicking  up all these errors.

P,S: No, I didn't pay for it!  :-)
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Nope... <!DOCTYPE html> is for HTML5, the most recent version.  And they are not getting simpler.  Here https://www.w3.org/QA/2002/04/valid-dtd-list.html is the list of recommended DOCTYPEs.  You can click on the links to the left on that page to see the rules for that particular DOCTYPE.

I don't think that template conformed to any standard.
0
 

Author Comment

by:shawn857
Comment Utility
Well, I tried all those doctype's (except the "math" related ones) - several of them generated 100+ errors. The best of the lot was plain ol' <!DOCTYPE html>. Looks like most of the errors are of the "element is obsolete" variety, like this:

"The width attribute on the hr element is obsolete. Use CSS instead."

All the errors seem like they're coming from really basic HTML statements. I don't know how to get rid of those without trying to put everything in CSS which I don't know very well and looks like it would be major surgery.  My real concern is that these errors will affect my SEO ranking... other than that, my page works fine and the errors aren't of a concern to me.

Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You should take this as a learning opportunity.  In addition to the obsolete elements, there are a number that are out of order such as a 'font' tag which is an inline tag surrounding 'p' or 'div' tags which are block elements.  'inline' elements should be inside 'block' elements.  Of course, font tags should be replaced by the appropriate CSS declarations.

Your page 'looks' fine because the browsers make it 'look' fine but it doesn't really 'work' well when it comes to things like SEO and Search scans because of the errors.  You can't do HTML without CSS anymore.  They go together now.
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
Besides what Dave has said, ignoring the errors leaves your page at the mercy of the browser. It may look good today, but a future browser update may not be as forgiving as the current version and you'll find your page all out of sorts in an instant.
0
 

Author Comment

by:shawn857
Comment Utility
Thanks guys. Today I've actually found an even better (in my view) HTML checker here --> http://www.onlinewebcheck.com. It gives much better explanations and suggestions on how to fix errors. I'm starting to get things really cleaned up now. I'd just like to bounce one error off you guys, if I could. In one of my pages, I have a Bing Ads tracking tag that consists of all this:

<script>(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"5013105"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");</script><noscript><img src="//bat.bing.com/action/0?ti=5013105&Ver=2" height="0" width="0" alt="bing" style="display:none; visibility: hidden;" /></noscript>

Open in new window


Quite a chunk of code, but I just took what Bing Ads suggested and placed it in the appropriate spot in my page (between the <head> and </head>). At www.onlinewebcheck.com, it doesn't seem to like the "<img" tag in there, and gives the following two errors:

"The "img" element is not allowed here (as a child of the "noscript" element). The "noscript" element, when a child of "head", must contain only the following child elements: "link", "style", and "meta"."

"The "img" element cannot be used here. It is not contained in an element that allows its use. This element may be contained in "body", "caption", "td", and "th"."


Any thoughts about that error, and if anything can be done about it? I'm hesitant to tamper with any of that code as that is what Bing suggested.

Thanks
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
All of the tracking and ad scripts should go at the bottom of the page just before the </body> tag.  The 'no-script' version is often an image and can not be put in the <head> section.  And you're right, you shouldn't tamper with the actual code from Bing or Google.
0
 

Author Comment

by:shawn857
Comment Utility
Thank you Dave, yep that fixed those errors, but it now generates this "warning" message instead:

"[64] "&Ver" is an invalid character reference in the value for the "src" attribute. This may be because the '&' character was not escaped as "&amp;". To use a literal ampersand it must be encoded as "&amp;" (even in URLs) because '&' is an escape character in HTML/XHTML."

... with the "'&Ver' portion in this section of code:

<img src="//bat.bing.com/action/0?ti=5013116&Ver=2" height="0"


... so it's indeed okay to substitute a "&amp" for that "&" ?

Thanks
   Shawn
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I would (and have) left those things alone in the ad and tracking codes.  I don't know what their servers require so I just don't mess with.  You will never get your page to perfectly validate as long you have third part code like that in it.
0
 

Author Comment

by:shawn857
Comment Utility
yeah I tend to agree... I'm not going to tamper with that Bing-specific stuff. It's only a warning anyway.

Thanks!
   Shawn
0
 

Author Closing Comment

by:shawn857
Comment Utility
Thanks guys!
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
As I stated in a previous comment, this is a legitimate error and a very common one that virtually all browsers forgive. I agree with Dave that you cannot always make your code 100% valid. But this error can be easily corrected and I tend to aim for 100%.

Whenever an ampersand appears in a url for a href or src value, the ampersand should be represented with the character entity &amp; or the url encoded equivalent %26. The ampersand represents the beginning of a character entity whenever it appears in the content as well as in the HTML tags.
0
 

Author Comment

by:shawn857
Comment Utility
Fixed 'em Kim... thanks!

Cheers
   Shawn
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now