HTML Best Practices: Structure with section, header, and article
2024-07-27
- HTML5 introduced a new set of elements that describe the content they contain, making the code more meaningful. These are called semantic elements.
- Instead of generic
<div>elements, you can use specific elements like<section>,<header>, and<article>to convey the structure and purpose of your content.
section Element
- Represents a thematic grouping of content, typically with a heading (
<h1>to<h6>). - Use it to break down your webpage into distinct sections with a clear, focused topic.
- Example: A news website might have separate sections for "Top Stories," "World News," and "Business."
header Element
- Denotes a container for introductory content that applies to the section it's within.
- Often includes a heading (
<h1>to<h6>), logo, navigation bar, or other introductory elements. - Can be used within various elements like
<section>,<article>, or even the entire document body. - Example: A blog post's
<header>might contain the title, author information, and publication date.
article Element
- Represents self-contained, reusable pieces of content that could be independently distributed (e.g., a news article, blog post, forum topic).
- Can have its own heading, introductory paragraph, body content, and concluding elements.
- Example: Each news article on a website could be wrapped in an
<article>element.
Benefits of Using Semantic Elements
- Improved Accessibility: Screen readers and assistive technologies can better understand the page structure and navigate it for users with disabilities.
- Search Engine Optimization (SEO): Semantic elements can potentially help search engines understand the content and meaning of your webpages, which might influence search ranking.
- Maintainability: Code is clearer and easier for developers (including yourself) to understand and modify in the future.
Example Code Structure
<body>
<header>
<h1>My Awesome Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<section id="main-content">
<article>
<h2>News Article 1</h2>
<p>This is the content of the first article.</p>
</article>
<article>
<h2>News Article 2</h2>
<p>This is the content of the second article.</p>
</article>
</section>
<aside>
<h2>Sidebar Content</h2>
<p>This is some content that's tangentially related to the main content.</p>
</aside>
<footer>
<p>Copyright information and other website footer elements</p>
</footer>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Awesome Blog</title>
</head>
<body>
<header>
<h1>My Awesome Blog</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section class="blog-post">
<header>
<h2>The Importance of Semantic HTML</h2>
<p>Published on May 19, 2024 by John Doe</p>
</header>
<article>
<p>This article explains the benefits of using semantic elements in HTML...</p>
</article>
</section>
<section class="blog-post">
<header>
<h2>Tips for Faster Website Loading</h2>
<p>Published on May 18, 2024 by Jane Smith</p>
</header>
<article>
<p>Learn how to optimize your website for speed and improve user experience...</p>
</article>
</section>
</main>
<footer>
<p>Copyright © 2024 My Awesome Blog</p>
</footer>
</body>
</html>
This example uses:
mainelement for the main content area.sectionwith a class "blog-post" for each individual blog post.headerwithin each section for the post title and metadata.articlefor the main content of each blog post.
E-commerce Product Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cool Gadget Store - Awesome Gadget</title>
</head>
<body>
<header>
<h1>Cool Gadget Store</h1>
<nav>
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section id="product">
<header>
<h2>Awesome Gadget</h2>
<p>$99.99</p>
</header>
<article>
<img src="awesome_gadget.jpg" alt="Awesome Gadget Image">
<p>Description of the Awesome Gadget and its features...</p>
<button>Add to Cart</button>
</article>
</section>
</main>
<footer>
<p>Copyright © 2024 Cool Gadget Store</p>
</footer>
</body>
</html>
sectionwith an ID "product" for the specific product details.headerwithin the section for the product name and price.articlefor the product description, image, and button.
Nested Sections with Aside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Blog - Paris</title>
</head>
<body>
<header>
<h1>Travel Adventures</h1>
<nav>
<a href="#">Home</a>
<a href="#">Destinations</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section id="paris">
<h2>Paris: City of Lights</h2>
<article>
<p>Explore the romantic city of Paris, known for its...</p>
</article>
<aside>
<h2>Must-See Landmarks</h2>
<ul>
<li>Eiffel Tower</li>
<li>Louvre Museum</li>
<li>Notre Dame Cathedral</li>
</ul>
</aside>
</section>
</main>
<footer>
<p>Copyright © 2024 Travel Adventures</p>
</footer>
</body>
</html>
- The most common alternative is the generic
<div>element. It simply creates a block-level division without any specific meaning. - While it works functionally, it doesn't convey the content's purpose to browsers, screen readers, or search engines as effectively.
Example using <div>s:
<body>
<div id="top">
<h1>My Awesome Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<div id="main-content">
<div class="post">
<h2>News Article 1</h2>
<p>This is the content of the first article.</p>
</div>
<div class="post">
<h2>News Article 2</h2>
<p>This is the content of the second article.</p>
</div>
</div>
</body>
Custom Elements with Classes
- Another option is to create custom elements with descriptive class names.
- This approach offers some meaning but is less standardized than semantic elements.
Example using custom classes:
<body>
<div class="header">
<h1>My Awesome Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="content">
<article class="post">
<h2>News Article 1</h2>
<p>This is the content of the first article.</p>
</article>
<article class="post">
<h2>News Article 2</h2>
<p>This is the content of the second article.</p>
</article>
</div>
</body>
Important Considerations:
- While these alternatives work, they have downsides:
- Less clear meaning to browsers, screen readers, and search engines.
- Less maintainable code in the long run.
- It's generally recommended to prioritize semantic elements like
section,header, andarticlefor well-structured and meaningful HTML.
html header article
