join: new@juude

get alerts for new articles

CLOSE WINDOW

html5

Structural, Layout and More

<main></main> (w3c)

The main element was intergrated into the w3c html specification in 2013.

The main element is used to indicate the main content within a web page. It is designed to show screenreaders and assistive technologies exactly where main content begins, so it can be a target for a "skip links" keyboard command, for example.

ARIA role attribute value:main
role="main"

The main element represents the main content of the body of a document or application. 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.

The main content area of a 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, site logos and banners and search forms (unless the document or applications main function is that of a search form).

User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links. w3c

Attributes: All Global

DON'T USE FOR STYLING
A main element should not be used to wrap information for styling only, in that case you need to use a div.

MAKE SURE IT DISPLAYS IN AND PRINTS CORRECTLY FROM ALL VERSIONS OF EACH BROWSER
In your CSS you need to make sure that this element is a block:
main{
display: block;
}

Include the javaScript (info on this page) so that it works in all IE versions 9 down which will also allow it to print correctly from older versions of IE

MAIN

Advised by W3C

Authors are advised to use ARIA role="main" attribute on the main element until user agents implement the required role mapping. w3c

Can only be use once per page
Content must be unique to a particular page
Must not include any content that is repeated within other pages.
Must not include any of the PAGE header information such as an introduction, logo or nav.
Can include nav if the links are to areas within the main element (and this nav is not repeated on other pages).
Must not include a search form UNLESS that is the purpose of the page and it is not repeated elsewhere
Cannot have as an ancestor an article, aside, footer, header or nav element.

Examples

<body>
<main><h1></h1>content</main>
</body>

<body>
<main>
<article><h1></h1>content</article>
</main>
</body>

<body>
<main>
<h1></h1>
<section><h2></h2>content</section>
<section><h2></h2>content</section>
</main>
</body>