Tuesday, 27 March 2012

HTML5 Structural tags

Introduction

I thought I'd write a post about using HTML5 structural tags, not quite as fancy or impressive as the canvas stuff but there aren't that many talking about the structural tags which in the future we'll all hopefully be using.

I'm only giving a brief overview here, the links at the bottom explain it much more, although they do require more time to read.

What does it mean to be semantic?

Being semantic in the context for web development means using tags that describe what is contained within them, for example I'm sure you all place paragraphs of text inside of <p></p> tags as it's a paragraph.  If you wanted to you could place them inside of <li></li> tags and styled the appropriately to look like paragraphs, this would work and would even pass the W3C validator fine but wouldn't be very semantic.

What is a structural tag?

Basically tags which you use to semantically divide up your pages into different parts, currently we're all using div tags and giving them ids & classes to divide up our pages but this isn't very semantic.  I've listed the new structural tags that have been introduced in HTML 5 below:
  • <!doctype>
  • <article></article>
  • <section></section> 
  • <aside></aside>
  • <nav></nav> 
  • <header></header> 
  • <footer></footer>

Doctype

This is used to let the browser know how it should parse the documents contents, for example it could state the document is a XHTML 1.0 strict document but there are so many different doctypes and they are so long no one can remember them.

HTML5 simplifies this by using just one doctype <!doctype html> which is something that everyone can remember and it doesn't matter if it is strict, transitional or anything else, an HTML document will always have that doctype in HTML5 onwards.

<section></section>

This defines a section (funnily enough) of related elements, for example you might keep all the references at the bottom of the pages in a <section></section>.  This is different to the <div></div> tag (which is not being replaced) as these are still used to divide content, for example in a reference section of your site you may have it divided into online and offline references.

<article></article>

This is a block of content which doesn't depend on the rest of the site to give it any context or meaning, in other words (as that might not have made a sense to everyone) if you were to copy that text out  of the site into another document, like an RSS feed, it would still make perfect sense and mean the same as it did before.

<aside></aside>

This tag should contain information and elements that are not directly related to the content around it but are loosely related to it.  For example if you had an article about HTML5 you may have an aside which links to other relevant articles you've written if it was a multi-part series or pull out for quotes from the main article.

<nav></nav>

This tag is pretty self explanatory, it is where you place major navigational elements for your page but you aren't restricted to using it only in once place.  You can use it for the top level main navigation and a secondary sub navigation or even for footer links too but most of the time just using the <footer></footer> tags for the footer navigation would be enough.

<header></header>

This contains elements that are at the top in the 'header' section of your page, normally <h1> to <h6> tags are in here along with any logos and slogans the site has.  This tag isn't only restricted to the heading section of a page though, it is also used else where inside any other <article> or <section> tags to define their headings.  An example of this would be if you had an article about gardening at the top inside the <article></article> tag you'd place the <header></header> tag and inside there place the articles heading tag(s), date it was posted and authors name.

<footer></footer>

This works much like you'd expect and you use it to mark-up the bottom 'footer' section of your page, quite often this will contain a list of links to pages on the site and this list can be inside of a <nav></nav> tag.  Much like the <header></header> tag this isn't restricted to just defining the footer of a page but also the footer section of an article or section.

Further reading

Tuesday, 20 March 2012

It's been a while

This is just a quick post to say that I haven't stopped blogging but the past two weeks I have had to work quite late and not had time to finish my latest blog post on HTML5 structural tags (now written).  It's about half done and either today or tomorrow I'll be posting it!

Again sorry for taking so long about getting my next post out!