HTML5

November 28, 2012

After reading this fantastic book on front-end development I decided to write a little blog post on the main HTML5 elements. At university I always used to write an essay after I had read something to see if it had stuck in my memory. It seemed to have worked so here we go again….

Firstly it is important to understand that HTML5 is not a new markup language but an improved version of HTML4 and XHTML. It hasn’t fully captured the attention of all web designer/developers or been approved by W3C but it’s here, widely supported and in time will become standard procedure.

Let’s start with the DOCTYPE.

<!DOCTYPE html>

Yes that’s it. No version number language or URI.

It’s not the only thing that has got shorter in HTML5. Check out character encoding and linking external CSS and JS.

<meta charset=”UTF-8”>

<link rel=”stylesheet” href=”style.css”>

<script src=”script.js”></script>

HTML5 introduced several new elements which should improve the markup of web pages. How often do we see the following:-

<div class=”header”></div>

<div class=”main-body”></div>

<div class=”footer”></div>

There is no real sematic meaning in that code and it is not machine-readable. The header class is treated no differently to the main-body. Introducing new elements HTML5 has improved the layout of web pages and given us cleaner sematic code.

In 2005, Google surveyed a shed load of web pages to establish which ID and class attributes were the most common. Their findings then became the names of the new HTML5 elements which are now widely supported in most browsers. They include:-

Section
Header
Article
Footer
Aside
Nav
Figure

That’s not all of them. But that’s all I’m going to write about. If you want to find out about all of them have a read here.

Section

<body>

<div class=”shoes”></div>

<div class=”trainers”></div>

<div class=”jackets”></div>

</body>

There is nothing wrong with the above markup. We can see a clear distinction between the sections of the page but the browsers don’t. They just render them as block-level containers.

By using the section element we can move away from using generic container and move onto sematic sections. They can be transformed into distinct parts of a document.

<body>

<section class=”shoes”></section>

<section class=”trainers”></section>

<section class=”jackets”></section>

</body>

Article

The HTML5 article tag defines a individual post, story or piece of news. It differs from a section as an article can stand apart and make sense on its own (for example in a RSS feed). A section is a part of a webpage that could contain several articles. However it does get a bit confusing. Articles can also contain sections. For example.

<body>

  <section class=”shoes”>

    <article></article>

 </section>

 <section class=”trainers”>

  <article>

   <section class=”pumps”></section>

   <section class=”running shoes”></section>

  </article>

 </section>

</body>

Header

The header element defines the branding area/masthead of the page. The header might not always be at the top though. It could be at the side, bottom or anywhere on the page.

However we aren’t restricted to one header on the page. Headers can also be added to sections and articles. I have also include a hgroup element in the code. It basically is a group of h1-h6 elements.

<body>

 <header>

 <hgroup>

  <h1>Website name</h1>

   <h2>The website subtitle</h2>

 </hgroup>

</header>

<section class=”shoes”>

 <article>

  <header>

   <h1>A shoes article</h1>

  </header>

 </article>

</section>

 <section class=”trainers”>

  <header>

   <h1>Trainers section</h1>

  </header>

 </section>

</body>

Footer

<div class=”footer”></div>

The above is a very common sight. HTML5 gives us the opportunity to replace that with footer. Again the footer does not have to be at the bottom of a page. It could go anywhere including in sections and articles

<section>

 <header>

  <h1>The title<h2>

 </header>

 <footer>

  <p>The author</p>

 </footer>

</section>

Aside

This is a tough one to explain but I will try my best.. If I wrote an article and wanted to including some bullet points that were related to the article I would add them into an aside element. The biggest misinterpretation is that it is a sidebar. The sidebar could be wrapped in an aside tag but only if it is related to its container element. If you’re still confused read the official HTML5 description.

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

<article>

 <header>

  <h1>The name of a stadium</h1>

 </header>

 <aside>

  <p>Other stadium names</p>

  <p>Other stadium names</p>

 </aside>

</article>

Nav

Pretty self explanatory. Nav tags should be reserved for primary ways that people navigate around a website whether that is in the header, footer or sidebar.

<nav>

 <ul>

  <li>Home</li>

  <li>About</li>

  <li>Contact</li>

 </ul>

</nav>

Figure

Figures such as Media, images, charts and diagrams are often paired with written captions. It’s impossible to associate the two. Until now. Figure can be used alongside figcaption to link the two together.

<figure>

 <img src=”picofme.jpg” />

  <figcaption>A image of me!</figcaption>

</figure>

And there you have it. Some basic HTML5 elements. It’s quite easy to see how useful the language is and that the future is bright with HTML5. I would recommend for anyone to have a good read of http://html5doctor.com/ for a good insight in the language.

Thanks for reading

Shane

Half a moustache