Container tags are an essential part of HTML, allowing you to organize and structure content on your web page. In this blog post, we will explore three commonly used container tags: article
, section
, and div
. By understanding their differences and use cases, you’ll be able to make informed decisions on which tag to choose for various scenarios.
The article
Tag
The article
tag is used to identify a distinct piece of content within a web page. It represents a self-contained entity that can be independent of other elements on the page. For example, a list of blog posts on the homepage or a group of links can each be wrapped in an article
tag. Here’s an example:
<div>
<article>
<h2>A blog post</h2>
<a ...>Read more</a>
</article>
<article>
<h2>Another blog post</h2>
<a ...>Read more</a>
</article>
</div>
Additionally, an article
tag can also be the primary content within a page:
<article>
<h2>A blog post</h2>
<p>Here is the content...</p>
</article>
Remember to include a title (h1
-h6
) within the article
tag to provide a clear heading for the content.
The section
Tag
The section
tag represents a distinct section within a document. It is typically used to divide a long article into logical sections. Each section
tag should include a heading tag (h1
-h6
) to provide a clear title for the section. Here’s an example:
<section>
<h2>A section of the page</h2>
<p>...</p>
<img ... />
</section>
Keep in mind that the section
tag should not be used as a generic container element. For generic containers, it is best to use the div
tag, which is specifically designed for that purpose.
The div
Tag
The div
tag is a generic container element that can be used anywhere on a web page. It doesn’t carry any semantic meaning on its own, but it serves as a versatile container for grouping and styling content. You can add class
or id
attributes to the div
tag to target it with CSS. Here’s an example:
<div>
...
</div>
Additional Tags Related to Page Structure
Apart from the main container tags mentioned above, there are a few other tags that are commonly used for specific page elements. Let’s take a look:
The nav
Tag
The nav
tag is used to define the page navigation. Typically, an ul
or ol
list is nested inside the nav
tag to create the navigation links. Here’s an example:
<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>
The aside
Tag
The aside
tag is used to include related content that is not directly part of the main content flow. It is often used for sidebars, quotes, advertisements, or supplementary information. Here’s an example:
<div>
<p>some text..</p>
<aside>
<p>A quote..</p>
</aside>
<p>other text...</p>
</div>
The header
Tag
The header
tag represents the introduction or header section of a page or an article. It can contain one or more heading tags (h1
-h6
), the article’s title, or other introductory elements. Here’s an example:
<article>
<header>
<h1>Article title</h1>
</header>
...
</article>
The main
Tag
The main
tag denotes the main content of a web page. It should encapsulate the primary content area of the page. Here’s an example:
<body>
...
<main>
<p>....</p>
</main>
</body>
The footer
Tag
The footer
tag is used for the footer section of an article or a webpage. It typically contains information such as copyright notices, contact details, or navigation links that apply to the entire page or article. Here’s an example:
<article>
...
<footer>
<p>Footer notes..</p>
</footer>
</article>
By using these tags effectively, you can enhance the structure and semantics of your HTML, making it more accessible and SEO-friendly.
Tags: HTML container tags, web development, HTML structure, semantic HTML, SEO-friendly HTML