Creating websites for 13 years now, I have seen the evolution of websites from clunky table based layouts that were semantically just a bunch of noise to the current HTML5, semantically charged creations. Of course the leaders in Web Standards and semantic HTML have been people like Jeffery Zeldman and his disciples, great CSS exercise sites like Zen Garden and also the blog sites and open source world, probably most importantly WordPress. If you want to make a web site theme that then someone else can take and run with, the semantics of the markup have to be solid.
I am amazed at how understanding semantics in both web design and programming gets overlooked. I still know many web designers who do not understand what a heading tag is. They are often so lost in the fonts and backgrounds and images that they forget what is going on in the hierarchy of information. I have witnessed decent designers never realize that <h1>What a Killer Page</h1> is what is essential. This is not only for SEO but also for making the web site accessible on a variety of platforms. I still know amazing developers who can talk your ear off about Object Oriented Design Patterns who when they get to the HTML will code a heading tag as <div class=”main-header”> What a Killer Page</div>. I am not sure if this is because they just read stuff too quickly and never really read chapter one and think they know everything, or maybe they just don’t get it. Struggling with the margins of a <p> tag does not mean you should then use a few <br /> tags. Strange.
In HTML, if you take away things like the required html, body and title tags, the important semantic markup is pretty simple.
- Headers h1,h2,h3,h4,h5
- Paragraphs <p></p>
- Lists <ul><li></li></ul>
- Tables <table><tr><th></th></tr><tr><td></td></tr></table> (for tabular data)
That is really it! Markup such as divs and spans are not semantic. They are presentational! Putting things like navigational lists into divs is just wrong. The sooner one learns this basic distinction, the faster you will write cleaner, easier to maintain code.
In HTML5 the list of semantic markup grows longer. I will not enumerate them here but to me one of the main objectives of HTML5 is this semantic markup. <section></section>, <article><article>, <video></video>.
So there you have it. Just think. If you are just starting to write HTML, you got to avoid the 7 year era of table based layouts and nested tables seven layers deep just to keep you debugging for and hour all for the crappy browsers of the day.