- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
Where Do All the New Elements Come From?
The new structural elements have been designed to tell the browser what structure the page has and give the content semantic meaning, but where do their names come from?
In 2005, Google analyzed more than 1 billion web pages to find out what class names were being used by developers and web authors (http://code.google.com/webstats). This enabled Ian Hickson ("Hixie"), the editor of the main HTML5 Specification, to start thinking about these new elements. Even though this was five years ago, which is fairly old in Internet time, it recognizes what content is important and reused on websites.
The following are the 20 most popular class names used at the time:
- footer
- Small
- Header
- Button
- Msonormal
- Body
- White
- menu
- Text
- Nav
- Main
- Date
- Style1
- link
- Title
- Content
- Copyright
- Search
- Smalltext
- Top
Although several of these items are presentational (for example, white, style1, msnormal), others make up the elements included in the HTML5 specification (footer, nav, header).
So, why use these new elements? Well, HTML5 allows you to give your content semantic meaning, so, for example, if you have navigation on your page, you can use the nav element because that element provides meaning to its content.