Smashing Mobile Web Development

HTML5

HTML5 introduces a variety of new features that enrich websites and simplify development.

Markup

HTML5 introduces several new elements that make markup more semantic. These tags, such as <header> and <footer>, make code more readable to humans and machines. That means it not only is easier to develop, but also is more accessible to search engine parsers such as Googlebot.

You might think semantic markup makes no difference to your visitors, but these tags also improve performance. That’s because fewer elements of a given type mean less work for DOM selectors in CSS and JavaScript (for example, there’s only one <header> element, which also means one less <div>).

While the performance gains may seem negligible in desktop browsers, any improvement is important for underpowered mobile devices.

Structural elements

The number of HTML5 structural elements is expanding as the World Wide Web Consortium (W3C) works out the finer points of the spec. Here’s an incomplete list of some of the more useful tags:

• <header> and <footer>: Used for the top and bottom content of the page. Often these are the parts that don’t change across different pages of the site.

• <nav>: Used for any navigational elements (for example, the main nav in the header). Unfortunately, there’s no official nav item element (<ni>), so you’ll just have to throw a <ul> in the <nav>:

<nav>

<ul>

<li>

<a href=”#”>Link 1</a>

</li>

<li>

<a href=”#”>Link 2</a>

</li>

<li>

<a href=”#”>Link 3</a>

</li>

</ul> ...