A Quick Look At HTML 5

/ HTML / by Paul Robinson / 0 comments
This post was published back on May 10, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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:

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:

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:

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.

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.

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.

An example of a <footer> being used in sectioning context is as folllows.

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:

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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more