HTML5 and the new structural elements

When HTML 5 finally becomes available and all new tags become fully compatible will be a good day. Front end development will become much more efficient to designers and will result in quicker and more clearer builds. New tag elements are in place to make the site more readable and understandable to anybody who undertakes the project.

These new structural elements include:

  • <header>
    The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents.
  • <nav>
    The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
  • <section>
    The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
  • <article>
    The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
  • <aside>
    Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
  • <footer>
    The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

These new elements show that it is simply a case of replacing our current div elements with named tags. Sounds easy and its true.

The other positive from these new structural elements is the inclusion of being allowed to duplicate the tags. For instance, the <footer> element can be used to finish the content structure and also to finish the main page wrap tag if you have one.

HTML 5 is going to be an exciting change within the design/development industry and the days are counting down to when we can utilise it to its full potential.

One thought on “HTML5 and the new structural elements

  1. Hi this site of your blog was very interesting for me. But it was really hard to find it with google.es. Maybe you should improve it with seo plugins for wordpress like WP seo. Just a tip ;)

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>