The organization of content partitions
The Concept of Content Partitioning
Content partitioning is an important method for organizing page structure in HTML. Through reasonable partitioning, the page structure can be made clear and semantically meaningful, while also improving accessibility and SEO effectiveness. HTML5 introduced a series of new semantic elements specifically for content partitioning, replacing the previous over-reliance on <div> tags.
Common Partitioning Elements
<header> Element
Represents the header of a page or section, typically containing content such as logos, navigation, or search boxes. A page can have multiple <header> elements.
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<nav> Element
Specifically used for navigation link areas. Important navigation should be placed within <nav>, but not all links need to be wrapped.
<nav aria-label="Main Navigation">
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JavaScript</a></li>
</ul>
</nav>
<main> Element
Represents the main content area of a page. A page should have only one <main> element.
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
</main>
<article> Element
Represents an independent, self-contained content block, such as a blog post or news item. <article> can be nested, with inner content related to the outer content.
<article>
<header>
<h2>How to Learn HTML</h2>
<p>Author: John Doe</p>
</header>
<p>The first step in learning HTML is...</p>
<section>
<h3>Basic Tags</h3>
<p>Paragraphs, headings, and other basic tags...</p>
</section>
</article>
<section> Element
Represents a generic section of a document, typically containing a heading. Unlike <article>, <section> does not necessarily represent standalone content.
<section>
<h2>User Reviews</h2>
<article>
<h3>John's Review</h3>
<p>This product is great...</p>
</article>
<article>
<h3>Jane's Review</h3>
<p>High value for money...</p>
</article>
</section>
<aside> Element
Represents content related to but not part of the main content, such as sidebars, ads, or related links.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="/article1">HTML5 New Features</a></li>
<li><a href="/article2">CSS Layout Techniques</a></li>
</ul>
</aside>
<footer> Element
Represents the footer of a page or section, typically containing copyright information or contact details. Like <header>, there can be multiple <footer> elements.
<footer>
<p>© 2023 My Website</p>
<address>contact@example.com</address>
</footer>
Partitioning Nesting Rules
A logical nesting structure is crucial for page organization and accessibility. A typical page structure might look like this:
<body>
<header>
<!-- Header content -->
</header>
<nav>
<!-- Main navigation -->
</nav>
<main>
<article>
<header>
<!-- Article header -->
</header>
<section>
<!-- Article section 1 -->
</section>
<section>
<!-- Article section 2 -->
</section>
<footer>
<!-- Article footer -->
</footer>
</article>
<aside>
<!-- Related content -->
</aside>
</main>
<footer>
<!-- Footer content -->
</footer>
</body>
ARIA Landmark Roles
While HTML5 semantic elements already provide good accessibility support, sometimes additional ARIA landmark roles are needed for enhancement:
<div role="banner"> <!-- Equivalent to header -->
<!-- Header content -->
</div>
<div role="main"> <!-- Equivalent to main -->
<!-- Main content -->
</div>
<div role="complementary"> <!-- Equivalent to aside -->
<!-- Supplementary content -->
</div>
<div role="contentinfo"> <!-- Equivalent to footer -->
<!-- Footer content -->
</div>
Practical Application Examples
Blog Page Layout
<body>
<header>
<h1>Tech Blog</h1>
<nav aria-label="Main Menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Detailed Explanation of HTML5 Semantic Tags</h2>
<p>Published: 2023-05-15</p>
</header>
<section>
<h3>Why Use Semantic Tags</h3>
<p>Benefits of semantic tags...</p>
</section>
<section>
<h3>Common Tags Introduction</h3>
<p>Usage of article, section, and other tags...</p>
</section>
</article>
<aside>
<section>
<h3>About the Author</h3>
<p>Front-end developer, focused on web standards...</p>
</section>
<section>
<h3>Related Articles</h3>
<ul>
<li><a href="/css-layout">CSS Layout Techniques</a></li>
</ul>
</section>
</aside>
</main>
<footer>
<p>© 2023 Tech Blog. All rights reserved.</p>
</footer>
</body>
E-commerce Product Page
<body>
<header>
<nav aria-label="Quick Navigation">
<a href="/">Home</a>
<a href="/cart">Cart</a>
</nav>
</header>
<main>
<article itemscope itemtype="http://schema.org/Product">
<header>
<h1 itemprop="name">Smartphone X</h1>
</header>
<section itemprop="description">
<h2>Product Description</h2>
<p>High-performance smartphone...</p>
</section>
<section>
<h2>Specifications</h2>
<ul>
<li>Screen: 6.5 inches</li>
<li>Processor: Octa-core</li>
</ul>
</section>
<aside>
<section>
<h3>Price</h3>
<p itemprop="price">¥2999</p>
<button>Add to Cart</button>
</section>
<section>
<h3>Promotions</h3>
<p>Limited-time offer...</p>
</section>
</aside>
</article>
<section>
<h2>User Reviews</h2>
<article itemprop="review" itemscope itemtype="http://schema.org/Review">
<h3 itemprop="name">Great Phone</h3>
<p itemprop="reviewBody">Excellent user experience...</p>
</article>
</section>
</main>
<footer>
<nav aria-label="Footer Navigation">
<ul>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</footer>
</body>
Partitioning and CSS Layout
Content partitioning elements can work perfectly with modern layout techniques like CSS Grid and Flexbox:
<style>
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 200px 1fr;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
</style>
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
</body>
Accessibility Considerations
Proper use of partitioning elements can significantly improve accessibility:
- Screen reader users can quickly navigate to different sections using landmarks.
- Ensure each
<section>and<article>has an appropriate heading. - Use
aria-labeloraria-labelledbyto label sections without visible headings. - Avoid over-partitioning to maintain structural simplicity.
<section aria-labelledby="section1-heading">
<h2 id="section1-heading">Important Notice</h2>
<p>Content...</p>
</section>
Common Mistakes and Best Practices
Common Mistakes
-
Overusing
<div>instead of semantic elements:<!-- Not recommended --> <div class="header">...</div> <!-- Recommended --> <header>...</header> -
Using
<section>unnecessarily:<!-- Not recommended --> <section> <button>Click Me</button> </section> -
Skipping heading levels:
<!-- Not recommended --> <section> <h4>Section Title</h4> <!-- Skipped h2, h3 --> <p>Content...</p> </section>
Best Practices
-
Maintain continuous heading levels:
<h1>Page Title</h1> <section> <h2>Section Title</h2> <section> <h3>Subsection Title</h3> </section> </section> -
Provide skip navigation links for screen reader users:
<body> <a href="#main" class="skip-link">Skip to Main Content</a> <header>...</header> <main id="main">...</main> </body> -
Combine semantic elements with ARIA roles in complex layouts:
<div role="region" aria-labelledby="chart-title"> <h2 id="chart-title">Sales Data Chart</h2> <!-- Chart content --> </div>
Partitioning and Document Outline
HTML5 partitioning elements affect the document outline structure. Browsers automatically generate a document outline based on partitions and headings:
<body>
<h1>Page Title</h1> <!-- Level 1 -->
<section>
<h2>Part 1</h2> <!-- Level 2 -->
<section>
<h3>Section 1.1</h3> <!-- Level 3 -->
</section>
</section>
<article>
<h2>Standalone Article</h2> <!-- Level 2 -->
<section>
<h3>Article Section</h3> <!-- Level 3 -->
</section>
</article>
</body>
Partitioning in Responsive Design
Partitioning elements can be flexibly adjusted in responsive design:
<style>
@media (max-width: 600px) {
body {
grid-template-areas:
"header"
"nav"
"main"
"footer";
grid-template-columns: 1fr;
}
aside {
display: none;
}
}
</style>
<body>
<!-- Partitioning structure -->
</body>
Partitioning and Microdata
Partitioning elements can be combined with microdata to enhance SEO:
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">Article Title</h1>
<p>Author: <span itemprop="author">John Doe</span></p>
</header>
<div itemprop="articleBody">
<p>Article content...</p>
</div>
</article>
Dynamic Content Partitioning
In single-page applications (SPAs), partitions can be dynamically updated:
function loadNewContent() {
const main = document.querySelector('main');
main.innerHTML = `
<article>
<h2>Newly Loaded Content</h2>
<p>This is dynamically loaded content...</p>
</article>
`;
// Update page title
document.title = "New Content - My Website";
}
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
