“I see dead HTML tags”
Seriously. Sometimes I’m amazed at how the Web is still able to function with the absolute junk with which web pages are built.
CSS is almost 10 years old, but it still doesn’t render uniformly across browsers (even latest ones). And the fact that it is severely crippled doesn’t help either (you can’t even vertically center text without applying half a dozen hacks!).
JavaScript, the poor thing got crippled during its inception due to the infamous browser wars. It’s precariously carrying the burden of Web 2.0 on its worthy yet twisted shoulders.
HTML … well that’s what this post is all about. HTML on the web has gone through many phases. First there was the plain text phase, with newly introduced presentational tags such as <font> and <color>. Then came the Era of the Table. We’d see tables within tables within tables within tables being used to keep the layout of a page in place. Tables were the easiest thing to use for column layouts back then.
But then came CSS with its call to developers to shun tables and use divs and CSS rules for layout. Most of that stuff fell on deaf ears. So now we see a web where a large number of sites are made by developers who are either infected with divitis, or they haven’t looked beyond tables and inline styles. Either everything is a <div> in these sites, or a table element. Headings, lists, blocks of text, you name it, it’s a div/table.
What I want to list in this post are some rules to remember while writing HTML, such that the resulting HTML:
- Has semantic meaning. The next developer to work on your markup will get a good idea of what it represents if your HTML is semantically correct and has ‘meaning’ (rather than a huge table within table within table…)
- Is short and concise
- Is primarily the structure of your page (as opposed to having presentational and structural properties)
The first thing to keep in mind is to use the correct tag at the correct place.
<h1> – <h5>: These tags should be used for your page name and other section headings. You can set these tags to both inline and block displays to suit your needs. They are SEO friendly as well.
<div>: You should use the divider primarily for layout purposes. A basic rule of thumb should be that if a div itself has any content in it, then you should rethink your use of it, and maybe replace it with a list item (if you’re making tabs or a ‘collection’ of items), span (inline text formatting), paragraph (block error messages) or maybe you don’t even need an encompassing tag for your content (think unnecessary boxing of images into divs).
<ul>, <ol>, <li>: Very versatile tags, should be used for both vertical and horizontal (tabs) lists. Also consider using lists for structures of data such as galleries, menus and draggable items. They work really well when floated as well.
<span>: Tag of choice for formatting inline text. It is essential however that you know that you don’t have to use it every time. There are other tags, such as <i>, <pre>, <dfn>, <code>, <strong> etc that you can use in most cases. Remember that you should use these tags according to the context of your site, e.g. <strong> doesn’t necessarily have to be ‘bold’ text. You can give it any style that applies to emphasized text in your page’s layout. Note that these tags will give structure to your data, through CSS you will set their presentational properties, and actually define what, say a <strong> tag will look like.
<label>: I’ve seen many forms that don’t use this tag. I’ve seen JavaScript that is doing what this tag automatically does for you in your forms (click sets focus to related input field). This should not be so. Your forms should always make use of this tag to describe what the user should input in a field. Be sure to use the ‘for’ attribute to link a <label> to its <input> tag.
<p>: This tag should be considered when you’re writing welcome/instructional/advert text on your webpage. Note that usually this text is encompassed in a div or other structure. <p> works just fine in these cases.
<table>: Use for displaying tabular data only. Remember to use the <thead> and <tbody> children tags.
<a>: Use for links. Also work really well in block display, so consider using them where you might be using divs with onclick events and cursor set to pointer.
These are the most commonly used tags out there. Be warned that you will need to swallow the bitter pill of CSS to make full use of some of the above tags, especially divs and list items.
Hopefully this rant makes some sense to you and will help you in structuring your pages better. If you think I got something wrong, comment and be heard!
