Posted by on Wednesday, May 26th, 2010 at 9:42 pm.
In the second of a two-part blog post, we take a further look at commonly encountered coding errors when trying to achieve W3C Validation, with tips and tricks on how you can fix them in your website design. (How to Fix W3C Errors in Website Design – Part 1)
When it comes to coding a website in languages such as XHTML or CSS, there is essentially a set of rules and guidelines that are encouraged to be followed, set out by the World Wide Web Consortium (W3C).
By following these standards, it can go a long way to ensure that a website not only loads quickly, but that it will also appear the same in all modern web browsers, something that all Web Designers can be proud of. To check if websites meet these guidelines, the W3C offer a free-to-use Validation Service.
For this second-part, we’re going to look further into validation mistakes that can happen as a result of using older HTML4 rules in your XHTML 1.0 coding. If you’re a veteran web designer, it’s highly likely that you’ve encountered some of these errors at some point without even realising it.
#1 – Is all of your XHTML 1.0 coding in lowercase characters?
What might come as a surprise to some, for XHTML 1.0 coding to be W3C valid, every single line of code must be written in lowercase characters. Back in HTML4, this wasn’t the case and was seen as perfectly legit coding.
HTML4: <BODY onLoad="script-coding"> <P><B>Uppercase or Capitalised characters were fine in dusty-old HTML4</B></P> </BODY> XHTML 1.0: <body onload="script-coding"> <p><strong>But don't forget, in XHTML 1.0, all characters must be in lowercase</strong></p> </body>
Beware, if you use the ‘Source Format’ option in Adobe Dreamweaver, be careful as Javascipt attributes such as onclick, onload, etc. will automatically be capitalised when this feature is used. If you’re unsure on how to turn this option off, check out our tutorial written by my colleague James Kemp.
#2 – Do all HTML short tags end with a forward slash? e.g. <br />
HTML4: <P>Old Website Design <br> View in IE 4.0 - 640x480 Resolution <hr> Hosted by Geocities</P> XHTML 1.0: <p>New Web Design <br /> Firefox, Chrome & IE9 - 1920x1080 Resolution <hr /> Server Hosting</p>
HTML tags such as line-break <br /> and the horizontal line <hr /> are not really necessary these days due to CSS elements such as margins and borders, but they continue to work effectively when needed.
Previously in HTML4, empty elements such as these did not require the end forward slash, but it is required now as part of the XHTML 1.0 validation standards. So, in essence, always ensure write your short-tags correctly as this is another bad-habit which can naturally be occur if you’re an experienced designer.
#3 – Have you declared your inline Javascript or head-data CSS?
If you are using anything other than XHTML 1.0 tags within your webpage, it is important to specifically define what type of coding it is.
XHTML 1.0 Javascipt: <script src="code.js" type="text/javascript" language="JavaScript"></script>
XHTML 1.0 CSS: <style type="text/css"> .inlinestyle {display: none;}</style>
Simply, this is represented by the ‘type’ attribute when writing a declaration for inline Javascript on a page or CSS data that is used within the <HEAD> tag.
By not having this in your coding, not only will the specific page not be seen as W3C Valid, it could cause code rendering issues across internet browsers.
#4 – Is there any overlapping HTML elements?
Surprisingly, it was acceptable in HTML4 for certain tag elements to overlap each other within webpage coding.
HTML4: <P><B>Coding that is not Well-Formed</P></B> XHTML 1.0: <p><strong>Well-Formed Coding</strong></p>
It is a strict rule of the XHTML 1.0 guidelines that all documents must be recognised as ‘well-formed’ which ensures that coding must not be overlapped.
We actually mentioned another example of how this can be caused in our previous blog post, by forgetting to close a HTML tag properly. If it didn’t hit home before, this should re-enforce that your code should never overlap.
Further Resources
For additional technical definitions on the differences between HTML 4 and XHTML 1.0 coding, the W3C have published an official guideline which can be accessed by clicking here. On another subject, If you’ve yet to see it, watch our recent Web Design Video Blog on ‘Designing websites with CSS Sprites‘.
Channel