CSS Formula

For many websites and designers div classes and IDs are common place and the basis of every website. The most common elements, containers, headers, footers, and menus are usually the first to be IDed or classed. However, change is coming.

Recently HTML5 has become very popular, and is continuing to rise in popularity. There have already been books about it even though HTML5 is not yet completed or supported 100%. The design blogosphere has been populated with tutorials about HTML5, reasons to love HTML5, how HTML5 can clean your house for you, and many other things that seem unreal. While somethings seem to good to be true, canvas feature I’m looking at you, there is no reason to shy away from using HTML5, quite the opposite, it should be embraced by all. With the rise of designers HTML5 is aimed at making things easier and more design-centric than previous versions.

In order to offer a better comparison or illustration of the change, I will first show a layout of a website in XHTML 1.1, and then demonstrate how HTML5 is doing away with the old ways of div classes and IDs.

Generic XHTML Layout

<div id="wrapper">
  <div id="header">
    <!-- Header content -->
  </div>

  <div id="menu">
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>

  <div id="container">
    <div id="content">
      <h1>Content here!</h1>
      <p>Here is my content</p>
    </div>
  </div>

  <div id="sidebar">
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>

  <div id="footer">
    <p>Copyright info</p>
  </div>
</div>

Section Tag

Most of the new HTML5 tags are easily understand as a result of their names, however, the <section> and <article> tags break that rule. While it seems clear that the <article> tag must go inside the <section> tag, it is possible to have a <section> within an <article> tag. Now this is all a bit confusing, so for simplicities sake I will show how a <section> tag can be used as a wrapper or container, and avoid getting into the confusing hierarchy of its other uses. For now at least.

Often a wrapper or container is created in order to hold the entire website together and to allow it to be positioned without having to move multiple single elements. With the introduction of HTML5 it is now possible to use a <section> tag to contain everything in order to rid oneself of yet another ID or class.

In the XHTML example at the start of this article, the first thing used is a wrapper tag. It starts off as:

<div id=”wrapper”>
  <!-- Content inside the wrapper -->
</div>

While this hold the entire website together, it can be replaced with a section tag instead, resulting in it looking as so:

<section>
  <!-- Content inside the wrapper -->
</section>

With the ability to use <section> tags within <article> tags it’s now possible for a <section> tag to be a containing element for the entire site, and to also use it as a containing element for other parts, or sections, of the site.

Header Tag

Beginning at the top of a web page, the header ID, or #header, or another name along those lines serving the same purpose, now has its very own HTML5 tag. Instead of creating an ID or class to represent it a designer can now simply insert <header> . Not only does this remove excess text from the web site, it makes the source code easier to navigate. However, there is more than one use for the tag. It can also be placed at the beginning of a <section> tag or at the beginning of an <article> tag, thus giving it great flexibility.

In the XHTML layout at the start of the page the header is displayed as:

<div id="header">
  <!-- Header content -->
</div>

In HTML5 the header ID is done away with, and instead replaced with:

<header>
  <!-- Header content -->
</header>

Nav Tag

Depending on how one creates a website the menu could come later on, but for the sake of the article it will go here. Instead of a menu ID or class, a <nav> tag is now used instead. As discernible from the name, the tag is meant to be used for navigation items. This tag many not be as versatile as the previous <header> tag, but its purpose is clearly defined.

While the article tag can do away with an a few extra lines of code, the <nav> tag does not do the same. In XHTML a menu is often displayed as a menu ID like so:

<div id="menu">
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>

In HTML5 format the ID is done away with and replaced with the <nav> tag, this makes the code easier to navigate and understand, and also cleaner.

<nav>
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</nav>

Article Tag

I have recently began a foray into coding WordPress themes, and when I style the entries I’ll often use a class called entry. The new <article> tag changes this though and, once again, eliminates another div. While w3school defines an article as a container for external content, I see it most often used for the same use as its title, articles.

Towards the middle of the layout the first container ID is used to hold the content.

<div id="container">
  <div id="content">
    <h1>Content here!</h1>
    <p>Here is my content</p>
  </div>
</div>

There are different ways to go about applying HTML5 elements to that part of the layout. One is to do away with the container ID completely, resulting in the layout looking like so:

<article>
  <h1>Content here!</h1>
  <p>Here is my content</p>
</article>

Another way to attack the layout is to replace the container with a section tag, but instead of a simple tag, a class is added to the section tag.

<section class="container">
  <article>
    <h1>Content here!</h1>
    <p>Here is my content</p>
  </article>
</section>

The second method is far less desirable than the first though because it uses a class, which is no different than simply using a container ID. The first method is even better than normal though since it gets rid of not only a class, but also a few lines of code. If there are multiple articles then classes may be necessary, but for a simple layout, the first method should suffice.

Aside Tag

The <aside> tag, like the header tag can be used in a multitude of places for the same thing. It is used to define information that is separate from the main text or the article. I often use the tag instead of a sidebar class or ID, and have seen many others do the same.

In XHTML a sidebar is generally written as:

<div id="sidebar">
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>

HTML5 doesn’t shorten the code any, as an aside is represented the same as all the previous elements, by its name.

<aside>
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</aside>

Footer Tag

Generally last in a website is the footer class or ID. It is now its own tag, and like the <header> tag can be used in a multitude of places. It can be placed at the very end of an entire website or placed at the bottom of a post or article.

It is most often represented like so in XHTML:

<div id="footer">
  <p>Copyright info</p>
</div>

In HTML5 it is now changed to a simple tag with the same name as the often used ID or class.

<footer>
  <p>Copyright info</p>
</footer>

HTML5 Layout

When putting it together it somewhat resembles the XHTML layout, but is easier to understand and is a bit cleaner. It also helps prevent you from losing the endings to div tags and having too many or too few.

<section>
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </nav>

  <article>
    <h1>Content here!</h1>
    <p>Here is my content</p>
  </article>

  <aside>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </aside>

  <footer>
    <p>Copyright info</p>
  </footer>
</section>

IE

The red-headed step-child of Internet browsers does not currently support HTML5 at all. Shocker. There is a way to make HTML5 work in Internet Explorer with a JavaScript work around, which is good because everyone loves HTML5 and wants to use it. Again, shocker. I use a few short lines of code and a few conditional statements to make HTML5 work in IE.

<!--/*Google Chrome Frame*/-->

<!--[if IE]>
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <script src="http://s12.in/cfinstall.js"></script>
<![endif]-->

<!--/*GCF Fallback*/-->

<!--[if lt IE 9]><script src="http://s12.in/html5/shiv.js"></script><![endif]-->

<!--[if lt IE 8]><script src="http://s12.in/ie.js"></script><![endif]-->

Conclusion

While Internet Explorer doesn’t support HTML5 without a work-around, that’s no reason to not use it. It is cleaner, less confusing, and takes up less space than the current way of doing things. It’s simply better. Therefore use it. Not only that, but everyone else in the web design world is salivating over it so it must be the greatest thing ever. In all seriousness though, it is a definite upgrade from the old way of doing things and will become the way that all websites are done soon, so learn it now!