Introduction
The implementation of valid/standard methods, guidelines and best practices will help to produce high quality websites that are accessible to as many as possible. By building valid websites you can save time and money for the development and provides a better experience for the visitor.
Validation is also an important part of web development. Many errors that are hard to find can discover during validation. This is like spell checking and proofreading for grammar and syntax in a document. but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language. You can validate your (X)HTML page as well as your CSS.
Here I’m not going brief you about Web Standards, but I’m going to tell how we can use those best practices in Web standards to produce a valid (X)HTML page.
Benefits of having a valid code
- Future compatibility: Your website will compatible with future web browsers.
- Simpler development and maintenance: Creating Valid (X)HTML Documents Means Cleaner Code and Easier Maintenance.
- Faster download and rendering of web pages: Less (X)HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
- Better accessibility: Semantic (X)HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
- Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.
- Simpler adaptation to any media or screen devices: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.
Best Practices…
- Include the correct
DOCTYPEdeclaration at the beginning of the file. A DOCTYPE (short for “document type declarationâ€) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them. - The DOCTYPE is case-sensitive so use the correct case:
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /> - Add the attribute
xmlns="http://www.w3.org/1999/xhtml"to the<html>element. - Close all elements: Omitting
</p>is not valid anymore. - Change all elements to lowercase:
<P>becomes<p>. - Correctly specify empty elements:
<hr>becomes<hr />. - Quote all attribute values:
<p align="right">. - Always add attribute values:
<hr noshade="noshade" />. - Always use
&in place of &. :<a href="foo.php?chapter=1&section=2 /> <form>element should have to have aactionattribute always:<form action=â€#â€></li>- If you are using
name&idattributes ininputelement, both should be in same name:<input name="field_name" id="field_name" /> - Use
altattribute always for<img>element:<img src="image.gif" alt="" /> - Use
width&heightattributes as in this order in<img>element:<img src="image.gif" width="100" height="100" alt="" /> - Use a separate JavaScript file always & make sure you have put type attribute correctly:
<script type="text/javascript" src=â€javascript.js"></script> - Try to use a external CSS file for styles.
- Always try to use
tablesonly for TABULAR data. - Make sure you are using
<th>for table headers &<td>for table data. - Elements in (X)HTML must be closed in the reverse order that they were opened in:
<strong><em>…</em></strong>
(X)HTML Validation services
CSS Validation services
- W3C CSS Validation Service
- CSS Validator/Syntax Checker
- About.com CSS Validator
- Web Design Group CSSCheck
- Web Design Group CSSCheckUp
A useful tip is never to use MS Word at any point in the creation of the pages. You get stuck with a lot of MS specific tags.
Yeh MS is messing around when it comes to web.
A verry useful posting, Cham… Tx a lot..!
You are welcome Shy!
Thank you very much for posting this. Very useful information for me.
By the way, is John’s comment relevant to Open Office as well?
You are welcome Anandawardhana! John’s comment is not relevant to Open Office.
* Always use & in place of &. :
I guess, using “&” rather than “&” in URLs would cause havoc
* code above got stripped
use “& amp;” on URLs
Si estais interesados en el diseño grafico y diseño de paginas web,
os recomiendo echar un vistazo a la web de Webografico estudios (estudio de diseño de barcelona)
WEBOGRAFICO estudios
Diseño gráfico y paginas web en Barcelona
Gracias amigos y a disfrutar
http://www.webografico.com
Unfortunately, w3c valid pages don’t show the same way under different browsers.
I would add enctype atribute to the “Best practises / Form” as well… It says which encoding should be used. If the site uses English, then it is OK. But if you work with other language and use SQL databases with the form, then some error might occur especially when weird characters were sent within the inserted text.
@Jan
We can make those valid pages compatible with more browsers by using proper CSS with some creative thinking
Yeh, it’s better to use
UTF-8as thecharsetof the HTML page.