{Web Space Tutorials}

good tutorials, made easy

New Semantic HTML5 Structure

Introduction

With the new HTML5 comes new tags and features. This time we will be looking at the all new semantic tags. The practice of semantic HTML has always been around, coding your site with descriptive class and id names allows for better search engine optimization.

One problem that has always been around is that we humans can see and understand the difference in div tags by their class and id names, but machines can not. The browser doesn't see the different divs as header, footer, etc. It sees them as different divs. HTML changes this, with specific tags aimed at making semantic html better and easier for us all.

Prerequisites

For this tutorial it is recommended that you have:


The new semantic HTML5 tags

The new tags are used to better separate the content of a webpage to be more understandable to both humans and machines. Here is a quick explanation of the new tags.

<header>

The <header> tag is used wrap the section of content that makes up the header of the page. This is usually where stuff like your logo, main page title, etc, will go.

<hgroup>

The <hgroup> tag causes a group of headers to only count as a single header for the purposes of the document structure. Let's take this for example:


<hgroup>
    <h1>{Web Space Tutorials}</h1>
    
    <h2>good tutorials, made easy </h2>
</hgroup> 

Notice how the <hgroup> tag wraps around both the h1 and h2 tags containing our site name and slogan, this is because together the site name and slogan can be identified as one single item even though they span over two tags. This is what <hgroup> is for.

<footer>

The <footer> tag is used wrap the section of content that makes up the footer of the page. This is usually where stuff like copyright notices, contact details, and various other secondary links, etc, will go.

<nav>

The <nav> tag is for marking up the navigation links that will take you to different pages of the current site, or different areas of the current page. You should not use this tag to wrap around external links, only links that link within your site.

<aside>

The <aside> tag is a little harder to grasp than the others. It is used for wrapping around pieces of content that are related to the main content of the page, but doesn't fit into the main flow. An example would be bunch of quick fire facts and statistics about the rainforest on a site about global warming. It is relevant information, but not quite the main focus of the page, so it gets the <aside> tag.

<figure> and <figcaption>

Have you ever coded a image with a caption and not known exactly what the best way to go about it would be? Do you put both the caption and image in one div? Do you use a paragraph tag? Well that's where <figure> and <figcaption come in. Simply put, the <figure> tag wraps around the whole image and it's caption, while <figcaption> wraps around the caption (or captions). It can be a little difficult to understand, so here is an example:


<figure>
    <img src="oldphoto.jpg" alt="An old photo" />
    
    <figcaption> An old photo of me and my friends </figcaption>
</figure>

<time>

The <time> tag allows you to define a date and time value that is both human and machine readable. This is much easier to show than explain, so take a look at this example:


<time datetime="1989-03-13">1989</time>

The date inside of the tag is the machine readable part. A browser will look at this and be able to read the date. What goes inside the tag can be anything.

<article> and <section>

Now for two of the most unclear tags in HTML5. The concept of <article> and <section> are hard to grasp at first, but they aren't too bad once you understand them.

Basically, the <article> tag is for pieces of content that would still make sense even if taken outside the context of the current page; things like a blog posts, a video, or a news story.

The <section> tag, is for breaking the content of a page into different areas. This is another tag that is much easier to show than to explain, so look at this example:


<article id="movies">
    <section id="horror">
        <p> Horror movies</p>
    </section>
    
    <section id="action">
        <p> Horror movies</p>
    </section>
    
    <section id="comedy">
        <p> Horror movies</p>
    </section>
</article>

Browser Compatibility

When new stuff is implemented, there always comes the problem of older browser compatibility. If a browser doesn't understand a HTML tag, the browser treats the tag as a span tag, meaning it does nothing. One big problem here is that currently, no browser supports any of these tags.

However the nice thing about these tags are that they all are basically just more specialized div tags. With that in mind, we can easily fix compatibility in older browsers by setting all the new tags to block level elements with CSS. Here is a quick chunk of CSS that will set every tag here to a block level tag.


  article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}

This solves all your problems for all browsers except, yup you guessed it, Internet Explorer. The fix for IE is pretty simple. Simply put this into the head of your page, un-doubtedly next to all your other IE specific fixes.


<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
This script will tell IE to treat the tags it doesn't recognize as block level tags.

Now you try.

Now that you've learned about semantic HTML5 tags it's time to do an exercise. Below is a link to a HTML file of a basic HTML structure. Take that file and change all the div tags to the new HTML5 tags.

HTML5 Testing Page Exercise



Quiz

Now that you've read the tutorial, take the quiz.