Graphic Rating

(X)HTML Best Practices

• by Andy Gongea
• Nov 29, 2008
• 8 Comments »

Following the first article about CSS best practices, these next lines will contain information about a related field and topic – (X)HTML. The practices are not a must in order to write (X)HTML, but they are needed if you want to write good quality code. Now, let’s jump to the actual guidelines.

1. Document Type Definition – Doctype

Choosing a suitable Doctype for your site is the best thing you should do when it comes to writing (X)HTML code. This block of code helps the browser render properly the content of the site and it is also the first needed code for standards compliant (X)HTML documents. As a personal recommendation I think the best Doctype is XHTML 1 – Strict.

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

2. XHTML

By choosing the upper code, the browser will treat the page as XHTML. I encourage you to use XHTML instead of HTML because it has several advantages and it is a good way for the designer to learn how to code the right way. To summarize the benefits of XHTML I should say:
- All tags must be lowercase.
- All elements must be closed, even the ones with no closing tag. In that case the tag should have ‘/’ character at the end. For example <br> – <br />, <hr> – <hr />.
- Well formed code. This means that the tags should be properly nested. For example, instead of <em><strong>text</em></strong>, the correct version should be <em><strong>text</strong></em>
- several attributes are deprecated

3. Write standard compliant code

As you know, there has been a lot of buzz about standard compliant code lately. It is one of the best practices in writing XHTML code. This means that your code must comply with all the rules from W3C regarding XHTML. So make sure that you visit the W3C validator in order to check for potential errors in your code.

4. Don’t use tables for layout – use DIVs

This is the most popular and talked about topic in the last years about coding websites. The idea is that tables are not fit to sustain a layout. Tables are quite rigid and hard to maintain. Also the construction of table code is not too comfortable for search engines from the SEO perspective. So, whatever you do please use tables only for tabular data.

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells. – W3C

The definition can be interpreted as the perfect element for building sites, since a table is good for images, links and forms. But the best practice is to keep this element only to tables of content.

5. Separate the content from style

In the modern web design this rule is very important. The main point of this is to have your content in your XHTML file and your styling in your CSS file. In this way you can manage better the content and design. There are other reasons like faster loading pages, easier coding, more accessible for different devices etc.

6. Keep your XHTML tags to minimum

This refers at taking advantage at maximum of the tags and keeping their number at a minimum level. This rule applies to what is called DIVITIS. That means that you should not abuse of nested DIV elements. Try to analyze the code and keep the tags to a minimum with the help of CSS.

7. List based menus

I know that this is pretty spread but I wanted to emphasize this practice. On most of the pages there is a navigation system. This rule suggests that when you create a navigation, you should use lists – unordered lists or ordered lists. The reason for this is because it is easy to style and it is quite flexible through CSS regarding horizontal or vertical positioning.

<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>

8. Don’t use too many id’s and classes

In the past, I used for most of my tags id’s and classes. That was wrong. Instead of a crowded code you can choose to use CSS selectors in order to identify and stylize content. This is another measure in keeping your code clean.

Conclusion

These guidelines can help you grow as a coder and also will give a professional feeling to your XHTML. Try and cover as many of these guidelines and together with the CSS guidelines will be a solid base for your designer carrier. Cheers!