If you dig around tech blogs you will find alot of talk about semantic HTML. What does this mean? Semantics is the study of meaning. And semantic HTML is HTML code that helps give meaning to the content. ie <h1> is a great semantic tag, indicating that the words it contains make up the most important heading in the document. HTML5 offers new ways to add semantics to you pages. There are new tags designed to add more semantics replacing the likes of the unsemantic <div> tag.

<header>

Defined as “a group of introductory or navigational aids”. If you have ever used <div id=”header”> then you will know how to use <header>. However, unlike <div id=”header”>, <header> can be used more than once in a document. This is because <section>s can have their own headers.

<section>

To be used for ‘thematic’ content, typically with a header . You may be tempted to swap all your <div>‘s for <section>‘s but the <section> should not to be used for layout tricks in the same way that <div> is deployed . Use <div> for layout as is non-semantic. You may find <article>, <aside> and <nav> more sematically correct for your specific content. Sections can be nested. News -> Tech News.

<article>

Differs from <section> in that the content should stand on its own. As the content is so free standing from the rest of the document it could be syndicated to other sites.

<nav>

If you have used <div id=”nav”> then you already know where to use this. Like <header> you may choose to have more than one <nav> element on your page.

<aside>

Tangentially related content. Possible uses would be a sidebar or information box not essential but supportive to the main content in an <article> or a <section>.

<footer>

Again if you have used <div id=”footer”> then you already know where to use this. Like <header> and <nav> you can have muliple footers. This may seem odd but the footers can be associated an <article> or a <section>.

<hgroup>

Gets a little complicated this one and may or may not make the final spec. But is designed to mask heading elements from the outline algorithm such that you can have mulitply <h1> tags. For example:

<hgroup>
 <h1>Bridesmaids</h1>
 <h2>Wedding politics made funny</h2>
</hgroup>
<hgroup>
 <h1>Transformers 3</h1>
 <h2>Over the top, 3D nonsense.</h2>
</hgroup>

<figure>

“to annotate illustrations, diagrams, photos, code listings, etc”

<figcaption>

Provides figure captions for use with <figure>. Is a child of <figure>.

<figure id="fig1">
<figcaption>Where to find us</figcaption>
<img src="map.png" alt="City Centre Map">
</figure>

<mark>

To be used to highlight text of particular interest to the user after they have performed some task such as a search. Not to be used for generic highlighting.

<progress>

Most likely to be used with Javascript to show progress of a process.

<meter>

For displaying values in a range. Has attributes ‘mid’, ‘max’, ‘high’, ‘low’ and ‘value’. The ‘mid’ / ‘max’ attributes defined the range. The ‘high’ / ‘low’ attributes set benchmarks and ‘value’ sets the value.

<time>

For displaying times and dates.

Leave a Comment