HTML5 Overview / Intro

HTML5 Overview

The past few days I have been consumed with learning as much about HTML5 as I can. I’ve learned about the incredible potential of this upcoming technology, and just the convenience it brings with it. From improved readability of code to improved functionality of code, HTML5 promises a plethora of exciting features, some of which are already widely implemented and some of which have yet to be adopted by browsers.

Semantic Markup

One of the elements of HTML5 that has me the most excited is the introduction of semantic markup. Rather than a page with 10 divs, all labeled “header”, “footer”, “content”, etc., there are new elements for each of these. Rather than using:

<div id=”header”><!–Start Header–>
…
…
<div > <!–end Header–>

Web developers can now use a new tag, <header> just the same way.

<header><!-- Start Header -->
...
...
</header><!-- end Header -->

What does this mean? Well for one, more readable code. Rather than combing through code looking for an unclosed div that’s breaking everything, a developer can easily see where each section opens and closes, and have the elements mean something useful. Other new tags with equal semantic value include <footer> (page or section footers) , <article> (articles or related elements), <section> (related sections of a page) , <nav> (header nav or other page nav), and <aside> (sidebar for a page or section of a page). There are many more, like <figure> (as an image container, <figcaption> can also be used within a figure as a caption) and <hgroup> (group related headers), but header, footer, article, section, nav, and aside are the big ones for layout. They can all be styled and used anywhere, just like divs with classes.

Obviously there is a lot more to HTML5 than just semantic markup, and many of the new features are incredibly cool and have potential to change web development dramatically (geolocation, client-side storage, web sockets and workers, and device input in a growing device-oriented world). Semantic markup is just the beginning, but it is one step towards making code more accessible, readable, and meaningful.