Luke Hoehn

HTML5 Tags Layout Edition

HTML5 is the successor of HTML4 and XML. One of the key ideas behind HTML5 is to standardized some of the most common class/id names for elements and making them valid HTML tags. Let's compare how I have previously used class names compared to how I have replaced them with their respective HTML5 tags.

In the main site this main content section is coded as <div class="article"> </div>. In the CSS this reads as “.article” with the period signifying that article is referencing a class. In HTML5 there is the <article> tag, so instead of “.article” the CSS is “article.” Notice the lack of the "." class signifying.

Now, this doesn't seem like a big deal, since I named my containers like most people would name their containers – with descriptive class names. However, the appeal of HTML5 is that not everyone calls their container tags the same thing. Here is a list of class/id names that could be confusing to other people followed by their HTML5 counter part.

Banner, Links, Content, and Sitemap may seem like descriptive class names for the programmer naming them, but to other programmers that come later to the site, these names could have different meanings. Content could be any content on the page, banner could be a banner ad container, and links could be links at the bottom of the page oppose to the main navigation.

HTML5 allows various programmers to call the same containers the same name. Laying out navigation in HTML5 means the same for each web designer working on that project. The "header" is the header, "nav" is navigation, "article" is the content, and the "footer" is the footer. Other containers can still be added, but the main box model of the site should be easy to understand to new and veteran coders.

HTML5 tags are being supported in most browsers with the exception of some versions of Internet Explorer. If you are having trouble viewing this page, try using Safari, Chrome, or Firefox.

Regards,
Luke Hoehn
August 6, 2012

P. S. Also for kicks, I added some CSS3 text-shadow and transition properties to the top navigation. Enjoy!