HTML5 introduced a new set of elements that can be used when structuring an HTML document. There are some HTML5 element rules that should be met when using these elements, and the guidelines for some of these tags can be seen below.
Starting off with the <main> tag, which represents the main content of the document.
This elements also should contain unique content of web pages, so therefore exclude content common across pages, such as navigation links.
This means that element such as <header>, <nav> (if the nav content is the same across pages) and <footer> should not be placed inside <main>.
One <main> must be used in an HTML5 document. If there are more than one, the others should be hidden using the <hidden> attribute.
<main>...</main> <!-- These should have the hidden attribute --> <main hidden>...</main> <main hidden>...</main>
An example HTML5 document using <main> can be seen below.
<!DOCTYPE html>
<html>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<h1>Home</h1>
<p>Welcome!</p>
<nav>
<ul>
<li>Home Item 1</li>
<li>Home Item 2</li>
<li>Home Item 3</li>
</ul>
</nav>
</main>
<footer>
<div class="copyright">2017</div>
</footer>
</body>
</html>
Moving onto <section>, this element represents a generic section of a document.
Each section should be identified, typically by including a heading element.
<!DOCTYPE html>
<html>
<body>
<main>
<section>
<h2>Section 1 Heading</h2>
</section>
<section>
<h2>Section 2 Heading</h2>
</section>
<section>
<h2>Section 3 Heading</h2>
</section>
</main>
</body>
</html>
Note that the <section> tag can belong inside <main>. When using <section>, it should not be confused with using <article>.
Using the <article> tag should be for standalone pieces of content, such as individual blog posts and videos, whereas <section> is used for grouping distinct sections of content.
<!DOCTYPE html>
<html>
<body>
<article>
<div class="article-title">
<h1>Article Title</h1>
</div>
<div class="content">
<h2>Article Subheading</h2>
<p>Article content</p>
</div>
</article>
</body>
</html>
The <header> element represents introductory content of a webpage, and is usually used for displaying content common across pages, such as navigation links and a logo image.
As mentioned above, content within <header>, if common across pages, should not be contained within the <main> tag. This is also relevant for the <footer> element.
The <nav> element represents a section of a page that links to other pages or to parts within the page.
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
It should be noted that if a group of links are present on a web page, but are not considered to part of a major navigation block, then no <nav> tag is necessary. An example of this might be footer links near the bottom of a website.
<footer>
<p><a href="about.html">About</a> -
<a href="projects.html">Projects</a> -
<a href="careers.html">Careers</a></p>
</footer>
Lastly, the <aside> element is used for content that is considered to be related to the content of the parenting sectioning content. This usually is in the form of sidebars on web pages.
<aside> <h3>Archives</h3> <p><a href="/november-2017">November 2017</a></p> <p><a href="/december-2017">December 2017</a></p> <p><a href="/january-2018">January 2018</a></p> </aside>
Common questions involving <aside> include: should the element be included inside or outside <main>? The answer is that it depends on how the content inside <aside> is related to the content around the element.
Therefore, if for example, content within <main> contains blog posts and the <aside> tag contains blog post archive links like the code snippet above, <aside> should be within <main>, as the content is related.
In conclusion, <aside> can be used for marking up pieces of information that are related to the main flow, but don’t fit into it directly.
By following these basic HTML5 element rules, you can be sure that your document complies to the W3C Standards.