HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of the element indicate the kind of content you will find in them.
This example has the same structure as many you have done before. However many of the <div> elements have been replaced by new HTML5 layout elements.
The point of creating these new elements is so that web page authors can use them to describe the structure of the page.
HTML5 offers new semantic elements that define different parts of a web page:
The header Element
A header element can be used to include introductory content or navigational aids that are specific to any single section of a page, or apply to the entire page or both.
The section Element
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
The article Element
The article element represents a complete, or self-contained or composition in a document, a page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
The nav Element
The nav element represents a group of navigation links. The nav should be reserved for navigation that is primary importance. So, it’s recommended that you avoid using nav for a brief list of links in a footer, for example.
The aside Element
This element represents a part of the page that’s “tangentially” related to the content around the aside element, and which could be considered separate from the content.
The footer Element
This element represents a footer for the section of content that is its nearest ancestor. The section could be the entire document, or it could be a section, article, or aside element.
Resources
Web design 