The First Public Working Draft of the element was published yesterday. Léonie Watson tells us more about the proposal
HTML5 has a set of elements that make page structure more accessible to assistive technologies (ATs). The <header>, <footer>, <nav>, <article>, <aside> and <section> elements make it possible for ATs such as screen readers to identify the purpose of chunks of content on the page. But a growing school of thought says that there is one element missing from this set of semantically important tags.
In September 2012, Steve Faulkner proposed adding the <main> element to the HTML5 specification. The new element would represent the main content area of a web page. Conforming pages would include one <main> element, and it would contain content unique to that page. In other words the <main> element wouldn’t contain content that is typically repeated across pages (such as primary navigation, logos and banners, or copyright information).
The <main> element would formalise the common practice of using id="main" or id="content" on the containing element of the main content area. It would also map the semantics and function of the role="main" ARIA landmark.
<body><!-- Other content --><main><h1>Tequila</h1><p>Tequila makes you happy...</p><h2>Types</h2><p>There are two types of tequila...</p></main><!-- Other content --></body>
The reasons for proposing this new element are compelling. HTML traditionally provides elements for marking up specific semantic structures. There is an established pattern of mapping those elements to roles, states and properties in browser accessibility APIs. It’s the availability of information via the accessibility APIs that enables ATs to identify the element and inform the user about its purpose.
The practice of defining a main content area by applying id="main" or id="content" is commonplace on websites, and existing developer practices have been cited as reasons to introduce elements such as <header>, <footer> and so on.
The <main> element would have multiple uses. It could be used to navigate to (and recognise) the main content area of the page. For example, screen readers could provide a shortcut that moves focus to the start of the main content area, informing the user with a short announcement. This behaviour is possible with role="main", but building the capability into HTML makes life easier for developers. The <main> element could also provide a more consistent hook for ‘skip to content’ links, and a reliable mechanism for styling the main content area of the page.
Another school of thought says that the main content area of a page can be determined by a process of elimination. It’s the first piece of content that isn’t inside the <header>, <nav>, <aside>, or <footer>. While this algorithm is OK, it isn’t as robust as a specifically defined element would be.
Latest Videos From Creative Bloq
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Thank you for reading 5 articles this month* Join now for unlimited access
