A Quick Look At HTML 5
HTML 5 has quite a few new tags included in the standard. They seem a little pointless at first, since we already use <div> tags to do what these new tags do. So what is the point? Well for a start source code will be a lot more readable, it also makes a lot more sense to have elements pre-made ready to create the sections etc we have been creating using <div> tags & IDs.
The Article Tag
The first tag we are going to take a look at is the <article> tag. This tag is used to contain articles, obviously. An example would be a blog post, forum post etc. Here is an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<article> <header> <hgroup> <h1>This is a header</h1> <p><time pubdate datetime="2010-05-10T15:46:00-00:00"></time></p> </hgroup> </header> <p>This is some content...</p> <footer> <p>This is some post footer content...</p> </footer> </article> |
The one important thing to remember is that these are still just HTML tags, so you can still give them attributes such as ID or class to help with CSS styling.
The Nav Tag
Finally a purpose built tag for placing your site navigation in. The important thing to remember is that the <nav> tag is only for a large group of major navigational links, it is not necessary to place all links in a <nav> tag. Having said that it is perfectly fine to have more than one per page. The <nav> tag is used like so:
|
1 2 3 4 5 6 7 8 |
<nav> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> ... </ul> </nav> |
The Aside Tag
The <aside> tag is quite a complicated one. It can be used for layout based content such as a sidebar, but can also used within <article> tags to contain tentatively related content or to show off typography related content such as a pullquote. An example might be:
|
1 2 3 4 5 6 7 |
<article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris egestas est imperdiet rutrum. Phasellus vehicula ante a lacus eleifend ornare. Vivamus dictum rhoncus augue, et ultrices metus condimentum sit amet. Nam vehicula velit et est dictum convallis. Etiam in varius quam.<p> <aside> <p>Ut eu eros diam. Aenean sagittis, turpis at iaculis pharetra, mauris quam imperdiet sapien, sed laoreet arcu tellus ac risus. Aenean quis massa sit amet erat placerat dapibus.</p> </aside> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu mauris egestas est imperdiet rutrum. Phasellus vehicula ante a lacus eleifend ornare. Vivamus dictum rhoncus augue, et ultrices metus condimentum sit amet. Nam vehicula velit et est dictum convallis. Etiam in varius quam.<p> </article> |
The Hgroup Tag
The <hgroup> tag is exactly what it sounds like. It is used to hold a group of header elements. An example might be a full header & subheader, or a header & a tagline.
|
1 2 3 4 |
<hgroup> <h1>This is a header</h1> <h2>This is a subheader</h2> </hgroup> |
The Header Tag
The <header> tag is used to define a header, such as a intro or navigational section. It can also be used for placing you site logo, <h*> tags, a <hgroup> tag, or a search/TOC etc.
|
1 2 3 |
<header> <h1>This is a header</h1> </header> |
The Footer Tag
The <footer> tag is usually used to contain information about the previous section. This means it is normally a child of a sectioning element, although it doesn’t need to be at the end of the section. Sectioning elements are elements which define a new context for content, these include the <article>, <aside>, <nav>, and <section> tags. Think of foot notes in the pages of a book, as well as the standard website footer. An example of a <footer> is as follows.
|
1 2 3 |
<footer> <p>All content © Imaginary Person...</p> </footer> |
An example of a <footer> being used in sectioning context is as folllows.
|
1 2 3 4 5 6 7 8 9 10 |
<article> <header> <h1>Post Title</h1> <p><em>Post intro text</em></p> </header> <p>Post content</p> <footer> <p>Post meta data, author information etc here.</p> </footer> </article> |
The Figure Tag
Our final tag to look at is the <figure> tag. This tag is probably one of the most useful. It allows you to place standalone, but related content within an article. A great example is a photo, the great thing is it also includes a tag for placing a caption above or below the content. Here is an example:
|
1 2 3 4 5 6 7 8 |
<article> <p>Lots and lots of text goes here</p> <figure> <img src="path/to/img" alt="some alt text" /> <figcaption>This is a caption</figcaption> </figure> <p>Some more texty stuff</p> </article> |
HTML 5: Conclusions
Well that is our quick look through some of the new tags introduced by HTML 5. By themselves they aren’t really much to look at, but when combined with the power of CSS 3 they look to help introduce us to a new era of web design & development.
You have to remember that although, once the browsers support HTML 5 fully, there will/may be default styling for these elements they are nothing without the power of CSS.
I hope you have enjoyed this, by no means exhaustive, look at some of the new tags brought in by HTML 5. If you have any questions please don’t be afraid to ask via the comments system. You can also follow me on Twitter, or you can ‘like’ our brand new Facebook page.
