O'Reilly logo

Smashing Mobile Web Development by Greg Avola

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required