The main element

The main element represents the main content of the body of a document or application. So this is a very specific element. The main content area consists of content that is directly related to, or expands upon the central topic of a document. Or central functionality of an application. That sounds almost legalese so let me tell you what the main content really does for you. Let's say that you're on a screen reader and you visit a page, so you're just having the page being read to you. You want to be able to jump to the main part of the content. What this element does is it sort of identifies the main content on the page. You can only use it once on the page and it is not sectioning content so it's not going to affect your document outline at all. As a matter of fact you can see that in the note. The main element is not sectioning content. And the definition below it continues and says the main content of the document includes content that is unique to that document. And excludes content that is repeated across a set of documents. Such as site navigation links, copyright information, logos, banners, things like that. So it has to be unique. Has to be the main content of the page. You really ought to view it as a navigational aid. For any device, search engines, screen readers, that sort of thing, that want to know, hey, on this page, what's the main content. Introduction to HTML

HTML Essential Training

Structuring Pages

Conveying meaning through structure

Creating properly structured pages is the foundation of any good website. A solid semantic structure allows you to convey meaning and properly represent content types through nothing more than the page's markup. This, in turn, makes your content more accessible, easier to index and search, and makes it easier to repurpose. Remember that there are a lot of different devices, robots, and other user agents that will be reading your code. Without a consistent, semantic structure your site will be less effective.

Sectioning elements

One way to add meaning to your content is to organize them into sections that convey meaning and structure. For example it's pretty standard to contain introductory information within a section, page navigation within its own area, the page's main content in its own region, and related information within a sidebar. HTML contains numerous elements that are designed to assist in the logical structuring and semantics of page content.

In previous versions of HTML creating new sections of content was done almost exclusively through the use of heading tags, with divs being used to group areas of content together. Class or ID attributes would allow designers to attach more semantic meaning to the groups, although this meant little to most user agents. In HTML5 new sectioning and semantic elements were introduced to help represent commonly used sections and create more consistent page structures. Tags like the aside, article, footer, header, main, nav, and section allow authors to identify common page regions and convey more semantic meaning.

Although some of these elements are very specific, in many cases which element you'll use and how you'll structure them is very much a judgment call. Make sure, however, that your finished structure represents the desired document outline.

Learn more about the new sectioning and semantic elements:

Document outlines

One of the fundamental concepts of HTML is that its documents can be represented by a document outline that summarizes the content of the page. Imagine a page being represented by a table of contents and you'll have a good idea of what one of these outlines might look like. These outlines assist in tasks such as quickly searching documents and making content easier to navigate for assistive devices.

Prior to HTML5, document outlines were generated entirely through the use of headings. An H1 at the top of the page would serve to identify the page content, and subsequent headings would create sections and subsections inside of it. This meant that having a strategy for when to use certain headings was critical for maintaining consistent document structure. In HTML5 a new outline algorithm was introduced that added the new sectioning elements to the heading elements and created a more sophisticated outlining model. Although not currently implemented by user agents it is still recommended that authors familiarize themselves with it so that they're using the new sectioning and semantic tags properly.

It is still considered to be a best practice to use heading tags to establish the document outline. Mozilla has a fantastic article on sections and outlines in HTML documents that I strongly recommend reading.

WAI-ARIA Roles

Carefully structuring an HTML page is the first step into ensuring that the content is accessible to all users. You should also use WAI-ARIA role attributes where appropriate to increase accessibility and improve semantics. WAI-ARIA is short for the Web Accessibility Initiative's Accessible Rich Internet Application specification. The roles attribute attempts to identify content and its capabilities by assigning it to a predefined role. This helps assistive devices understand what the content is, how it relates to other content, and how the content can be interacted with. The W3C has a fantastic resource on how WAI-ARIA works and how it should be used with HTML.