Menu
Semantics: You want to get them right but sometimes they're just confusing.
Website document structure:
<body>
<header>
<div id="main">
<header> (not on every page)
<div id="content">
<footer> (not on every page)
<aside>
<footer>
Is it semantically correct to replace div#main with an article tag?
437
To raise the dead on this question, the currently accepted answer will soon be incorrect. There has been an extension draft for a <main> element targeted for exactly what you need. Furthermore it automates the ARIA role="main" in the browser for better accessibility. Please see this link for more info: https://dvcs.w3.org/hg/html-extensions/raw-file/tip/maincontent/index.html
This specification is an extension to the HTML5 specification [HTML5]. It defines an element to be used for the identification of the main content area of a document. All normative content in the HTML5 specification, unless specifically overridden by this specification, is intended to be the basis for this specification.
The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA [ARIA] landmark role=main.
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
