How to use semantic tags in HTML5?

casualPart 3 of the ‘how to’ series on HTML5 by Martin Beeby covers semantic tags. According to Wikipedia (what would we do without it!) semantics is ‘the study of meaning’ – if you think that doesn’t really help you understand what the hell semantic tags are, then read on!

Here’s Part 1 (How to Play video in HTML5) and Part 2 (How to use Scalable Vector Graphics in HTML5) if you missed them.


How to use semantic tags in HTML5?

I saw a post from Brendan Dawes the other day that made me laugh.

clip_image001

As Brendan’s tweet illustrates, in web development, we often have crazily over complicated names for rather simple concepts.

Since I was doing a series of posts on HTML5 I thought that it might be a good idea to give you the low down on the new semantic tags that have been added to HTML5. These new tags will enable future search engines to make sense of our messy HTML pages. The introduction of these tags also goes a little way to explain what is meant by the semantic web.

As a human, when you look at a webpage, it’s easy to figure out the different sections of the page. You can see the header, the footer, the advertisements and the content. However, computers find it difficult to infer this information, all they can see is a series of nested <div> tags.

The HTML5 semantic tags are an effort to encourage web page developers to give meaning to the different elements that make up the page so that machines, like search engines, are able to better understand the content that they are processing.

Below is a list of all the new tags and what their intended purpose is:

<header>

If you have a div layer that contains your logo or slogan or perhaps a headline and a small introduction then this should probably be contained in the new <header> tag. Typically the header tag would sit at the top of a document.

<nav>
You should use the <nav> tag wherever you have site navigation elements. The <nav> tag can be used in multiple places on the page if you have more than one navigation area.

<section>
This tag makes the least sense to me… I’d say it’s very close to the article tag and to be honest I can’t think of a good reason to use it.

<article>
The article tag should wrap a specific chunk of writing that makes up a single story. If a page contains multiple stories then you should wrap each one in an article tag.

<aside>
Let’s say you had something to say about an article but it wasn’t completely related. For example if you were writing an article about HTML5 semantic tags and you wanted to place a small paragraph or two on the side of the article about the History of HTML5. You could wrap the History of HTML story in the aside tag to make it clear that the information contained was not entirely relevant to the overall story on the page.

<footer>
Footers are usually found at the bottom of the page and contain things like copyright information, author information, etc. If you currently have a <div id=”footer”></div> then you should replace it with this tag.

You can start using HTML5 semantic tags today if you want; modern browsers support them just fine and will interpret them in the same way that they would a regular <div> tag. Older Browsers such as IE6 and Firefox 2 do have a few problems; luckily for us the html5doctor has a solution here.

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

3 Comments So Far, what do you think?

  1. Pingback:Marc My Words

  2. homepage

    I really believe this particular blog post , “How to use
    semantic tags in HTML5?”, fairly entertaining not to
    mention the post ended up being a fantastic read. Thank you-Danilo

  3. Johnf285

    Inspiring story, where did you quote it from? cfakaedfedeg

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>