HTML5 Containers

Semantic Web Element

HTML semantic tags HTML5 semantic elements include

• header
• nav
• main
• section
• article
• aside
• address
• footer

header

The header element is a container for introductory content or navigational aids. The header element is intended to usually contain the section's heading, such as an h1 element, but this is not required. It can also be used to wrap a section's Table of contents, a search form, or any relevant logos.

nav

The nav element is a container for a section of a page that links to other pages or to parts within the page: a section with navigation links. The nav element is intended primarily for sections that consist of major navigation blocks. It is sometimes common for footers to have a short list of links to various pages of a site, such as the terms of service, home page, and a copyright page. The footer element alone is sufficient for such cases. A nav element can be used, but it is usually unnecessary.

main

The main element is a container for the document's primary content. The main is not a sectioning element. It is used for grouping content.

section

The section element is a container for distinct parts of a document. A section is a thematic grouping of content, typically with a heading (h1-h6). A general rule of thumb is that the section element is appropriate if the element's contents would be listed explicitly in the document's outline.

article

aside

The aside element is a container for information that is tangentially related to the content around it and is considered separate from the main content. An example of tangential content for this web page might be information for an online tutorial learning about semantic tags.

address

The element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. The address element must not be used to represent arbitrary addresses unless those addresses are in fact the relevant contact information. The address element must not contain information other than the contact information. Typically, the address element would be included along with the other information in a footer element.

Example of Address Element

footer

The footer element typically contains information about its section such as who wrote it, links to related documents, copyright data, etc. Footers don't necessarily have to appear at the end of a section, although they usually do.

Div Element

Example of an Aside Element