Nav Element

The

element is primarily intended to be used for sections that contain main navigation blocks for the website, this can include links to other parts of the web page (e.g. anchors for a table of contents) or other pages entirely.

Inline items

The following will display an inline set of hyperlinks.

Use list items when needed

If the content represents a list of items, use a list item to show this and enhance the user experience.

Note the role=“navigation”, more on this below.

Avoid unnecessary usage

elements may have a list of links to other parts of the site (FAQ, T&C, etc.). The footer element alone is sufficient in this case, you don’t need to further wrap your links with a element in the .

Notes:

element descendants are not allowed within a

Adding a role=”navigation” ARIA role to the

element is advised to aid user agents that don’t support HTML5 and also to provide more context for those that do.

Screen Readers: (software that allows blind or visually impaired users to navigate the site)

User agents like screen readers will interpret the element differently depending on their requirements.

• It could give the element a higher priority when rendering the page
• It could delay the rendering of the element
• It could adapt the page in a specific way to tailor for the user’s needs example: make the text links within the elements larger for someone who’s visually impaired.

Click here to read the official HTML5 Specification for the

element

Article Element

The

element contains self-contained content like articles, blog posts, user comments or an interactive widget that could be distributed outside the context of the page, for example by RSS.

• When article elements are nested, the contents of the inner article node should be related to the outer article element.

A blog (section) with multiple posts (article), and comments (article) might look something like this.

 
 

 

 
Blog Post
 13th March 2016
 
 
The article element represents a self contained article or document.
 
The section element represents a grouping of content.
 

 
Comments relating to "Blog Post"

 
 

 
Excellent!
 
 
 
 
 

Avoid unnecessary usage

When the main content of the page (excluding headers, footers, navigation bars, etc.) is simply one group of elements. You can omit the

in favour of the

element.

 
This doesn't make sense, this article has no real `context`.

Instead, replace the article with a

element to indicate this is the main content for this page.

 
I'm the main content, I don't need to belong to an article.

If you use another element, ensure you specify the

ARIA role for correct interpretation and rendering across multiple devices and non HTML5 browsers.

 
This section is the main content of this page.

Notes:

element descendants are not allowed within a

Click here to read the official HTML5 Specification for the

element

Main Element

The

element contains the main content for your web page. This content is unique to the individual page, and should not appear elsewhere on the site. Repeating content like headers, footers, navigation, logos, etc., is placed outside the element.

• The
  element should only ever be used at most once on a single page.
• The
  element must not be included as a descendant of an article, aside, footer, header or nav element.

In the following example, we’re displaying a single blog post (and related information like references and
comments).

 

 
 
 

 
Individual Blog Post
 
An introduction for the post.
 

 
References
 
...
 
 
GoalKicker.com – HTML5 Notes for Professionals 62
 
Comments
 ...
 
 
 

• The blog post is contained within the
  element to indicate this is the main content for this page (and therefore, unique across the website).
• The
  and

Notes:

The HTML5 specification recognizes the

element as a grouping element, and not a sectioning element.

ARIA role attributes: main (default), presentation

Adding a role=“main” ARIA role attribute to other elements intended to be used as main content is
advised to aid user agents that don’t support HTML5 and also to provide more context for those that do.

The

element by default has the main role, and so does not need to be provided.

Click here to read the official HTML5 Specification for the

element

Header Element

The

element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A

typically contains a group of introductory or navigational aids.

Note: The header element is not sectioning content; it doesn’t introduce a new section.

Examples:

 
Welcome to...
 
Voidwars!

In this example, the

has a

.

 

 
Flexbox: The definitive guide
 
 
The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert
either.

W3C Proposed Recommendation

Footer Element

The

element contains the footer part of the page.

Here is an example for

element that contain p paragraph tag.

Section Element

The

element represents a generic section to thematically group content. Every section, typically, should be able to be identified with a heading element as a child of the section.

• You can use the
  element within an
  Every section should have a theme (a heading element identifying this region)

  Don’t use the element as a general styling ‘container’. If you need a container to apply styling, use a instead.

In the following example, we’re displaying a single blog post with multiple chapters each chapter is a section (a set
of thematically grouped content, which can be identified by the heading elements in each section).

 

 
Blog Post
 
 
An introduction for the post.
 

 
Chapter 1
 
...
 
 

 
Chapter 2
 
...
 
 

 
Comments
 ...
 

Notes:
Developers should use the article element when it makes sense to syndicate the contents of the
element.

Click here to read the official HTML5 Specification for the

element