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.
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
- HTML5 Boilerplate
- HTML Kickstart
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.
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):
<code> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </code>
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.
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.
nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.
aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.
section element represents a generic section of a document or application, such as a chapter, for example.
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.