3.1 <main> Tag
HTML5 introduced a lot of new semantic elements that help developers create more structured and understandable web pages. Among them, the <main> and <aside> tags hold a special place, used for creating containers for main and additional content respectively.
The <main> tag denotes the main content of the document. It's used for placing unique and key content specific to that page. Content within the <main> tag should be unique for each page and should not contain elements that repeat on all pages like logos, sidebars, navigation links, or footers.
Syntax:
<main>
<!-- Main page content -->
</main>
Usage Example:
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Main Features:
- Content: The
<main>tag should hold the main content of the page, unique to that page. - Placement: There should be only one
<main>tag per page. - Accessibility: The
<main>tag improves page accessibility by helping assistive technologies (like screen readers) quickly find the main content.
Usage:
- Main content of the page
- Unique content relevant to the current page
Advantages:
- Semantic Markup: Helps search engines and assistive technologies understand what the main content of the page is.
- Improved Page Structure: Clearly separates the main content from other parts like headers, sidebars, and footers.
Features:
- Should contain content unique to the page
- Should not include elements that repeat on other pages (like navigation bars, sidebars, or footers)
3.2 <aside> Tag
The <aside> tag is used for marking up additional content that is related to the main content but not part of the main document flow. It's often used for sidebars containing ads, links to related articles, author bios, and other auxiliary elements.
Syntax:
<aside>
<!-- Additional content -->
</aside>
Usage Example:
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Main Features:
- Content: The
<aside>tag contains additional information related to the main content but is not part of the main document flow. - Placement: Can be placed inside or outside the
<main>tag, depending on the context. - Usage: Used for sidebars, ad blocks, links to related articles, and other auxiliary information.
Usage:
- Sidebars with additional info
- Ad blocks
- Links to related resources
- Additional materials related to the main content
Advantages:
- Semantic Markup: Helps search engines and assistive technologies understand that this is auxiliary content relative to the main content.
- Improved Page Structure: Clearly separates additional content from the main content, making the page more organized and easier to understand.
Features:
- Contains content related to the main content but not part of it
- Can be used for sidebars, ad blocks, subscriptions, and other additional materials
GO TO FULL VERSION