HTML5 – The basics – Layout

html5

HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies collapsing to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers.

I’m excited about HTML5 if I be honest(more commonly known just as “HTML”). I believe it has in many ways made life easier for developers.  However part of the transition means that as well as tackling backwards compatibility, forwards compatibility needs to be considered also.

Most developers are using a plugin such as Modernizr to handle everything for you in terms of backwards compatibility and so on. In fact htmlboilerplate still include it in their front-end framework.

Typical HTML5 Page Layout

Typical HTML5 Page Layout

Here is a html5 blended layout example that I’ve referred to and used previously on a couple of projects. First off, you’ll notice that instead of using an ‘aside” I wrapped two ‘aside’ elements in a semantic container.  It’s a choice that many a developer would either do or not.

I cannot remember the reason why I proposed or chose this coding method but more than likely chose it because of the framework, platform, constraints and assumptions around that particular project.

However with the help of advocates like Remy Sharp and others out there (like the HTML5 Boilerplate team and many more unsung coding heroes), it become so much easier for others to use frameworks like;

  • Twitter Bootstrap
  • Skeleton
  • HTML5 Boilerplate
  • HTML Kickstart
  • Foundation

The list goes on and on.

What is the Structure?

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. All HTML 4 pages are written using semantic elements called ‘div’s’ and most of these pages include a variety of common structures, such as headers, footers and columns, with developers assigning respective class names to these divs.

HTML 5 basic page structure - yes it is that simple

In HTML 5 div structural elements would be replaced with the new elements: header, nav, section, article, aside, and footer.

The previous use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 – as shown above – addresses this issue by introducing new elements for representing each of these different sections.

The markup for that document could look like this (excluding code brackets):



...
...
...

The header element represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines the logo for the website and suchlike.

The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the things like that.

The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.

The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.

The section element represents a generic section of a document or application, such as a chapter, for example.

The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles, forum posts or individual comments.

So clearly there is a lot to be excited about, the simple structure of HTML 5 web documents is straight forward enough as shown. However, this is a language that is still evolving and web browsers are still not unified in the way they display most doctypes.

1 Comment

  1. Dave Jenkins says:

    OK, this is well written. Nice post.

Leave a Reply

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