HTML container tags are the building blocks that hold and organize content on a webpage. In this comprehensive guide, we’ll provide a list of container tags in HTML, explain each in detail with code examples, and compare them to non-container (void) tags.
By the end, you’ll understand how to use these tags in modern semantic HTML5 practices to create well-structured, accessible web pages.
Understanding HTML Container Tags
What are container tags? In HTML, most elements are written with an opening tag, content inside, and a closing tag. This structure lets them contain other content or text. For example, a paragraph is written as <p> ... </p>.
Such elements are often called container tags because they enclose (or contain) content between a start and end tag. In contrast, a few elements don’t need a closing tag and cannot have any content inside – these are empty or void elements.
A standard HTML element (container tag) follows the pattern opening tag + content + closing tag
developer.mozilla.org
. For instance, a basic paragraph element looks like:
html
CopyEdit
<p>This is a paragraph enclosed by a container tag.</p>
Here <p> is the opening tag, </p> is the closing tag, and the text in between is the content. Container tags can also contain other nested HTML elements, not just text. You can wrap sections of your page in container tags to group related elements together.
Empty (void) tags vs container tags: Not all HTML tags have closing tags. Some tags are self-contained, meaning they don’t (and can’t) wrap any content. These are the void elements of HTML. Void elements only have a single tag (no separate closing tag) and cannot have child elements or text content inside
developer.mozilla.org
. For example, the line break tag <br> or an image tag <img> are void elements. You write them like <br> or <img src="photo.jpg" alt="..."> without any closing tag. They represent something by themselves (a line break, an image, etc.) and do not enclose other content. In other words, void tags do not follow the opening tag → content → closing tag pattern
developer.mozilla.org
.
Common examples of void (empty) tags include: <br> (line break), <hr> (horizontal rule), <img> (image), <input> (form input), <meta> (metadata), <link> (external resource link), and others. These cannot contain content – for instance, you can’t put text inside a <img> tag or it would be invalid HTML.
By contrast, container tags (sometimes simply called non-void elements) must have a closing tag and can contain content or other HTML elements. Almost all familiar HTML tags (like <div>, <p>, <span>, etc.) are container tags. They define a structure or section on the page and wrap whatever content belongs in that section. Using container tags properly helps you organize content logically.
Why use container tags?
Container tags are essential for giving structure to an HTML document. They allow developers to group related content, apply styles or scripts to that group via classes or IDs, and create a logical hierarchy of information on the page. In HTML5, we gained many semantic container elements (like <header>, <section>, <article>, etc.) that describe the role of the content they contain, making the structure more meaningful.
These semantic containers improve both human readability and machine readability (for example, search engines and assistive technologies can better understand your page’s layout and content meaning).
Using semantic container tags to structure your HTML is considered a best practice. According to MDN, content sectioning elements "allow you to organize the document content into logical pieces" and create a meaningful outline of the page
developer.mozilla.org
. For instance, instead of a jumble of <div>s, you might use a <header> for introductory content, <nav> for navigation menus, <main> for the main content, and <footer> for page footer information.
This not only organizes the HTML logically but also provides extra semantics. Screen readers and other tools get clues about the content (e.g., knowing which part is navigation vs. main content) when you use these tags
developer.mozilla.org
In short, container tags (especially semantic ones) make your HTML more structured, accessible, and SEO-friendly.
Now, let’s dive into the list of common container tags in HTML. We’ll explain each tag, and its purpose, provide an example, and note any special usage tips. We’ll focus on HTML5 semantic container elements and other widely-used containers.
Common HTML Container Tags (List with Examples)
Below is a list of popular HTML container tags and their uses. Each of these tags has an opening and closing form (e.g., <tag> ... </tag>) and is used to group or wrap content. We’ll cover:
- <div> – Generic container for content
- <section> – Section of a document
- <article> – Independent article/content unit
- <nav> – Navigation section
- <header> – Header of a page or section
- <footer> – Footer of a page or section
- <aside> – Tangential or sidebar content
- <main> – Main content area
- <form> – Form container for user input
- <fieldset> – Group of form fields with caption
- <details> (and <summary>) – Expandable/collapsible content section
Each tag is explained with when to use it and a simple HTML example.
<div> – The Generic Container
The <div> tag (short for “division”) is the most basic container element in HTML. The <div> is a generic container for flow content
developer.mozilla.org
. This means it can contain virtually any other HTML elements (paragraphs, headings, images, other divs, etc.) but itself has no special semantic meaning. By default, a <div> doesn’t affect the page’s presentation or behaviour until you style it with CSS or manipulate it with scripts. It’s essentially an empty box that you can fill with content and then style or position as needed.
Technical details: <div> is a block-level element, which means it will start on a new line and stretch to the full width available by default. It is commonly used to group other elements for purposes such as styling (via CSS classes or IDs) or scripting. As a pure container, <div> does not convey any particular meaning about its content on its own
developer.mozilla.org
. Developers often use it as a last-resort container when no other semantic element is appropriate.
Example usage of <div>: Suppose you want to apply a CSS style or a script to a section of your page that contains an image and a caption. You could wrap them in a <div>:
html
CopyEdit
<div class="photo-card">
<img src="puppy.jpg" alt="A cute puppy">
<p>Meet our new puppy!</p>
</div>
In this example, the <div> with the class "photo-card" contains an image and a paragraph. By targeting .photo-card in CSS, you could style the whole block (for example, add a border, padding, background colour, etc.). The <div> is purely for grouping these elements as one unit.
When to use <div>: Use <div> when no other semantic container tag is suitable. It’s great for wrapping a section of content for styling or scripting hooks. However, if your content has a specific purpose (like navigation links, an article, a sidebar, etc.), you should prefer a more specific HTML5 semantic element (such as <nav>, <article>, <aside>, etc.) for clarity. Using meaningful elements in place of generic <div> where possible improves the semantics of your HTML.
<section> – The Section Element
The <section> tag represents a generic standalone section of a document
developer.mozilla.org
. This is a semantic element introduced in HTML5 to indicate that the content inside is a distinct section of the page (for example, a chapter, a grouping of related topics, or a thematic grouping of content). A <section> typically includes its own heading, and groups related content under that heading.
According to MDN, the <section> element "represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it"
developer.mozilla.org
. In practice, you use <section> to wrap content that forms a discrete part of your page’s structure. For instance, a long article might be broken into multiple sections with subheadings, or a homepage might have sections like Latest News, About Us, Services, etc.
Important: It’s recommended that each <section> has a heading (like an <h2> or <h3> inside it) to identify what that section is about
developer.mozilla.org
. If a section lacks a natural heading, consider if another element (like <div> or <article>) might be more appropriate.
Example usage of <section>: Imagine you’re structuring a simple webpage with an introduction and a separate section for a list of features:
html
CopyEdit
<section>
<h2>Introduction</h2>
<p>Welcome to our website. Here we do XYZ...</p>
</section>
<section>
<h2>Features</h2>
<ul>
<li>Feature 1 – Fast and reliable</li>
<li>Feature 2 – Easy to use</li>
<li>Feature 3 – 24/7 Support</li>
</ul>
</section>
In this example, we used two <section> tags. The first contains an introductory paragraph with a heading. The second is a features section with a heading and a list. Each section is a logical grouping of content on the page.
When to use <section>: Use <section> for grouping related content that is part of a larger whole, especially when that group has a heading. If you find yourself creating a generic block of content in the body and you can label it with a heading, <section> is a good choice.
If there’s a more specific semantic tag available (like <article> for a full article or <nav> for navigation), use that instead of <section>. For example, don’t use <section> for your main site navigation menu – use <nav>. But for general grouped content areas, <section> is ideal.
Section vs. Div: Unlike a plain <div>, an <section> implicitly indicates that its content is grouped thematically. This doesn’t affect rendering by default, but it gives meaning: developers and user agents know the content inside is one section of the page. If you simply need a container for styling with no semantic grouping, stick with <div>. If the content forms a logical section of the document outline, use <section> and include a heading for it.
<article> – The Article Element
The <article> tag represents an independent piece of content that is self-contained and intended to be independently distributable or reusable
developer.mozilla.org
. In other words, an <article> should make sense on its own, even outside the context of the page. HTML5 introduced <article> to semantically mark up things like blog posts, news articles, forum posts, user-submitted comments, or any other standalone item.
According to MDN, <article> represents "a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable... Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content."
developer.mozilla.org
This means the content inside an <article> is a unit that could feasibly be syndicated or copied elsewhere (for example, an RSS feed entry or a social media preview).
Example usage of <article>: Consider a blog page showing multiple blog posts. Each post can be marked up as an article:
html
CopyEdit
<article>
<h2>How to Grow Tomatoes</h2>
<p>Growing tomatoes at home can be fun and rewarding. ...</p>
<p>...</p>
<footer>Written by Jane Doe on <time datetime="2025-03-21">March 21, 2025</time></footer>
</article>
<article>
<h2>10 Best Tomato Recipes</h2>
<p>If you have an abundance of home-grown tomatoes, here are 10 recipes ...</p>
<p>...</p>
<footer>Written by John Smith on <time datetime="2025-03-20">March 20, 2025</time></footer>
</article>
In this snippet, we have two <article> elements, each with its own heading and content, and a footer providing the author and date. Each <article> is a self-contained post. If you took the first <article> out and published it via RSS or copied it to another site, it would still make sense by itself (it doesn’t rely on context from the rest of the page).
When to use <article>: Use it for content that stands on its own. Typical uses are blog posts, news articles, product or team member profiles, user comments (each comment could be an <article>), or even a widget.
Articles can be nested – for example, a blog post (one article) might contain nested <article> elements for each comment, since each comment is an independent chunk of content related to the main article. If the content is not meant to stand alone (for instance, a section of a single page that isn’t reusable elsewhere), <section> might be more appropriate.
Article vs. Section: A common confusion is deciding between <article> and <section>. The rule of thumb: If the content could be extracted and used on its own or syndicated, use <article>. If the content is part of a larger narrative or grouping and not meant to stand alone, use <section>.
For example, an "About Us" section on a company homepage would be a <section> (because it’s part of that page), whereas a news story on that site would be an <article>. If you have a section of a page that lists multiple independent items (like a list of latest news), each item would likely be an <article> inside a containing <section> or <main>.
<nav> – The Navigation Element
The <nav> tag defines a section of navigation links. In HTML5, <nav> is the semantic container for major navigation blocks on your site or page. This could be your primary menu, sidebar menu, footer links section, table of contents, or any other grouping of links that form a navigational structure.
Per the HTML5 spec, the <nav> element "represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents"
developer.mozilla.org
. Common examples of <nav> usage are menus and tables of contents.
Example usage of <nav>: Here’s how you might mark up a simple site menu:
html
CopyEdit
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About Us</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
In this example, the <nav> contains an unordered list of links. Each <a> (anchor) is a navigation link to a different page. The <nav> element signals that this group of links is for site navigation.
When to use <nav>: Wrap your primary navigation menus or important sets of links in <nav>. Typical places are the header of a website (for a top menu), a sidebar menu, or even a footer if you have a secondary menu there. You can have multiple <nav> elements on a page (for example, a top navbar and a footer nav). However, not every single group of links needs a <nav> container.
Only use <nav> for major navigational link groups. For instance, a set of social media share icons or a one-off “Back to top” link wouldn’t need a <nav>. Also, links within an article or paragraph (inline links) are just part of the text, not a nav block.
Using <nav> helps accessibility: screen readers can list navigation landmarks, allowing users to jump directly to the nav section. Search engines might also identify the navigation menu more easily. The <nav> element is usually used in conjunction with lists (<ul>/<li>) of links for structured menus.
<header> – The Header Element
The <header> tag represents introductory content for a page or a section
developer.mozilla.org
Typically, a <header> contains things like the heading of that page or section, maybe a logo, a tagline, navigational aids, or any overview content. It’s essentially the top part of a section or page that introduces what it’s about.
MDN describes <header> as representing "introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements."
developer.mozilla.org
. This means you can use <header> not only at the very top of the whole page (for the site header) but also at the start of an article or section to encapsulate that section’s heading and relevant info.
Example usage of <header>:
html
CopyEdit
<header>
<h1>My Blog</h1>
<p>Welcome to my personal blog about gardening.</p>
<nav>
<!-- navigation links for the blog could go here -->
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/archive.html">Archive</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</header>
In this snippet, the <header> contains the main heading of the site (an <h1>), a short welcome paragraph, and a navigation menu for the site. This might appear at the top of the webpage. If this were the header inside a specific article, it might contain the article’s title, author name, and date.
When to use <header>: Use <header> at the beginning of any significant section or page. Common uses:
- The top of the entire page (often containing the site name/logo and main navigation).
- The top of an <article> (containing the article’s title, author, publish date, etc.).
- The top of a <section> if the section needs an introductory part separate from the rest of the section.
It’s fine to have multiple <header> elements on one page, as long as they’re each within different sectioning elements (for example, one for the page, one for an article, etc.). Every <header> is scoped to the nearest ancestor sectioning content (like <body>, <article>, <section>, etc.). One thing to avoid: don’t put a <header> inside another <header> or inside a <footer> (by definition, headers are at the start, footers at the end). Also, don’t confuse <header> (a container for intro content) with heading tags <h1>-<h6> (which are titles/labels for sections). Usually, a <header> will include a heading tag, but <header> itself is the wrapper.
<footer> – The Footer Element
The <footer> tag represents the concluding or footer content for a page or a section
developer.mozilla.org
. This usually includes information about the section or page, such as copyright notices, author information, related links, or other metadata. A <footer> typically appears at the bottom of the content it belongs to.
According to MDN, <footer> "represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data, or links to related documents."
developer.mozilla.org
. For a website’s main footer, this might include site-wide information like copyrights or contact links. For an article’s footer, it might include the author bio, publication date, or related article links.
Example usage of <footer>:
html
CopyEdit
<footer>
<p>© 2025 My Blog. All rights reserved.</p>
<p>Written by Jane Doe. <a href="/contact.html">Contact the author</a>.</p>
</footer>
This example shows a simple page footer with a copyright line and an author credit with a contact link. If this footer is at the bottom of an article (inside the <article>), it pertains to that article. If it’s at the very bottom of the page (inside <body> but not inside an article or section), it pertains to the whole page/site.
When to use <footer>: Use <footer> at the end of a page or section to provide closing content. Common uses:
- A global site footer at the bottom of the page (often with overall site info, copyrights, perhaps site navigation or social links).
- A footer at the end of a blog post or article (with author info, related links, or comments link).
- A footer for a <section> if that section has some concluding info separate from the main content.
Like <header>, you can have multiple <footer> elements on a page as long as each is for a different section/article. Do not nest a footer within a footer. Also, avoid putting content that doesn’t relate to that section inside a footer – e.g., the site-wide footer shouldn’t contain content that only relates to one article.
<aside> – The Aside Element
The <aside> tag represents a portion of the page that is indirectly related to the main content around it
developer.mozilla.org
. Asides are often presented as sidebars, call-out boxes, or inserts that provide additional information, such as related links, tips, disclaimers, or advertisements. The key is that the content of <aside> is not part of the primary flow of the document; it’s tangential. If you removed the <aside> content, the main content should still make sense without disruption.
MDN says <aside> "represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes."
developer.mozilla.org
. For example, on a news article page, the article is the main content and a sidebar with related stories or an author bio could be in an <aside>.
Example usage of <aside>:
html
CopyEdit
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">How to Choose Tomato Seeds</a></li>
<li><a href="#">5 Gardening Tips for Beginners</a></li>
<li><a href="#">The Benefits of Home Gardening</a></li>
</ul>
</aside>
In this snippet, the <aside> contains a list of related articles with its own heading. This aside might be placed to the side of a main article or at the end, indicating these links are supplemental content.
Another example: In a blog post, a <aside> could be used for a brief author biography or a highlight quote pulled from the article.
When to use <aside>: Use it for supplementary content that supports or is related to the main content, but is not central to it. Common cases:
- Sidebars in articles or pages with related links, additional info, or ads.
- An info box or tip that’s placed to the side of an instructional article.
- A glossary or list of references related to the primary text.
- A pull quote or sidebar quote in an article.
Aside vs. Section: If content is somewhat related but not part of the main narrative flow, choose <aside>. If the content is a key part of the document’s flow (even if it’s additional info), it might belong in a <section> or just in the main content. The aside should feel like something that could be skipped on the first read without breaking the understanding of the main content.
Also note: if an <aside> is outside of the main content (like a sidebar that’s present on all pages, containing generic stuff like a list of recent posts or an advertisement), it’s still marked up as <aside>. Essentially, <aside> can be used for any kind of "sidebar" content, whether it’s site-wide (like a blog sidebar) or page-specific (like a box within an article).
<main> – The Main Content Element
The <main> tag represents the dominant content of the <body> of a document
developer.mozilla.org
. It is a container for the primary content unique to that page. The idea of <main> is to mark up the central focus of the page — what the page is about — excluding recurring elements like headers, footers, navigation, sidebars, or advertisements that repeat across pages.
MDN describes <main> as representing "the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document"
developer.mozilla.org
. There should typically be only one <main> element per page, and it should encompass the key content. For example, in an article page, the article (and perhaps comments) would go in <main>. On a product page, the product details and description would be in <main>.
Example usage of <main>:
html
CopyEdit
<main>
<h1>Welcome to My Site</h1>
<p>This site is all about gardening tips and tricks. Feel free to explore the articles and tutorials below.</p>
<!-- main content sections like articles, etc. -->
<section>
<h2>Latest Posts</h2>
<!-- ... -->
</section>
</main>
Here, <main> wraps the primary content of the page – which includes a welcome message and a section of the latest posts. The header (site title or nav) would be outside this <main>, and perhaps a footer is below it. Everything inside <main> is specific to this page’s purpose.
When to use <main>: Use <main> once on each page to identify the main content area. This helps browsers and assistive technology understand where the main content starts and ends. Do not nest <main> inside another element (it shouldn’t be inside an article, aside from, the header, footer, or nav).
Typically, <main> is a direct child of <body> in your HTML (after the header nav, before the footer).
For example, a typical webpage structure might be:
html
CopyEdit
<body>
<header>...site header content...</header>
<nav>...site navigation...</nav>
<main>...main page-specific content...</main>
<footer>...site footer content...</footer>
</body>
This way, if someone using a screen reader jumps to the main content, they land on <main> directly, skipping the navigation and header that repeat on every page. Search engines also can prioritize content in <main> as the page’s primary subject matter.
<form> – The Form Element
The <form> tag is a container for interactive controls that allows users to submit information. A <form> in HTML represents a section of a document where you can input data and typically send it to a server for processing
developer.mozilla.org
. In essence, the <form> element wraps input fields, buttons, and other controls that together form a user input interface (like a contact form, login form, search box, etc.).
Per MDN, the <form> element "represents a document section containing interactive controls for submitting information."
developer.mozilla.org
All form elements like text fields (<input>), dropdowns (<select>), checkboxes, radio buttons, text areas, submit buttons, etc., must be placed inside a <form> container to be part of that form’s submission.
Example usage of <form>:
html
CopyEdit
<form action="/subscribe" method="POST">
<label>Email: <input type="email" name="email" required></label>
<button type="submit">Subscribe</button>
</form>
In this example, the <form> element encloses a label with an email input and a submit button. The action attribute specifies where the form data should be sent (e.g., a URL to handle the subscription), and the method specifies the HTTP method for submission (POST in this case). When the user fills in the input and clicks "Subscribe", the browser will package the form data and send it to the URL defined in action. Without the <form> tag, the input and button won’t work together to submit data.
When to use <form>: Use <form> any time you are collecting input from users to be submitted. Common examples:
- Contact forms (name, email, message fields).
- Login or signup forms.
- Search forms (a search input and submit button).
- Feedback or comment submission forms.
- Any interactive fields that need to be processed (even for client-side JavaScript handling, wrapping in <form> can be beneficial for semantics and fallback).
Every form should have at least one input or control and usually a submit button (<button type="submit"> or <input type="submit">). Forms can also include <fieldset> to group related inputs, and each input should ideally have a <label> for accessibility.
Note: If you only want to create an interactive widget that doesn’t submit to a server (for example, a search box that triggers a JavaScript function on the page, or a dynamic filter), you can still use <form> for semantic grouping and accessibility (it won’t submit if you prevent it or have no action).
But if it’s truly not a form, you could also omit <form> and just use a container like <div>. However, using <form> where appropriate helps identify that those controls work together.
<fieldset> – Fieldset (Group of Form Fields)
The <fieldset> tag is used inside forms to group related form controls (like inputs) together. It creates a logical (and visual) grouping of form fields, often with a caption. The caption for a fieldset is given by the <legend> tag, which should be the first child of the <fieldset>.
MDN’s definition: The <fieldset> element is "used to group several controls as well as labels (<label>) within a web form."
developer.mozilla.org
By grouping related fields (for example, a group of checkboxes that are related, or an address form containing multiple fields like Street, City, and ZIP under one labelled group), you improve the semantics and usability of your form.
Example usage of <fieldset>:
html
CopyEdit
<form>
<fieldset>
<legend>Personal Information</legend>
<label>First Name: <input type="text" name="first_name"></label><br>
<label>Last Name: <input type="text" name="last_name"></label>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label>Email: <input type="email" name="email"></label><br>
<label>Password: <input type="password" name="password"></label>
</fieldset>
<button type="submit">Register</button>
</form>
In this example, we have a registration form divided into two fieldsets. The first field set (legend "Personal Information") groups the first name and last name fields. The second field set (legend "Account Details") groups the email and password fields. This semantic grouping tells the browser (and user) that certain fields are related. Browsers typically draw a border around a <fieldset> and put the <legend> as a caption on that border by default.
When to use <fieldset>: Use <fieldset> inside a form when you have multiple form controls that form a logical group. Examples:
- Grouping address fields (street, city, state, ZIP under "Address").
- Grouping a set of checkboxes for multiple options (e.g., a group of subscription preferences).
- Grouping radio buttons that belong to the same question (though if they have the same name attribute, they’re already a group, a fieldset with legend can provide a question label).
- Any time you want to provide a sub-section inside a form with its descriptive legend.
Accessibility tip: The <legend> element serves as the label for the grouped fields, which is important for screen reader users to understand the context of the form controls. Always include a <legend> directly inside <fieldset> (as the first child) to label the group.
<details> (and <summary>) – The Details Disclosure Element
The <details> tag creates a disclosure widget – a widget that the user can open or close to show or hide additional information
developer.mozilla.org
This element is a bit different from the others in that it provides built-in interactivity: by default, browsers will render a clickable arrow or triangle next to a summary, and toggling it will show/hide the content. The <details> element should contain a <summary> element, which is the visible heading for the collapsed content. When the user clicks the summary, the rest of the content inside <details> is revealed.
According to MDN, the <details> element "creates a disclosure widget in which information is visible only when the widget is toggled into an 'open' state."
developer.mozilla.org
The <summary> element is used to provide the heading or label for the details box
developer.mozilla.org
. If no <summary> is provided, browsers will typically still render the disclosure triangle but there will be no label, which isn’t useful – so you should always include a summary.
Example usage of <details> and <summary>:
html
CopyEdit
<details>
<summary>More information</summary>
<p>This is additional details that you can now see. It was hidden before!</p>
<p>You can include multiple elements here, like text, images, etc.</p>
</details>
By default, this will appear as a small triangle or twisty next to the text "More information". Before clicking, the paragraphs are hidden. When the user clicks "More information", the <details> element opens (like an accordion), and the paragraphs inside become visible. Clicking again will hide them.
You can also control the open state via the open attribute (e.g., <details open> to have it expanded by default).
When to use <details>: Use it for sections of content that you want to hide by default and let users expand on demand. Common uses:
- FAQs where the question is the summary and the answer is hidden in detail.
- A "Read more..." section to expand additional text.
- Technical or secondary information that not all readers need, but some might want to see (like advanced notes).
- Spoiler content in an article (click to reveal spoilers).
The benefit of <details> is that you don’t need custom JavaScript for basic show/hide functionality; it’s built-in and accessible. The <summary> element will be keyboard-focusable and toggling works with both mouse and keyboard, providing an accessible disclosure widget.
Note: <summary> should be the first child of <details> and there should only be one summary per detail. The rest of the content inside <details> can be any markup that you want to reveal. As a container tag, <details> can hold multiple elements (text, images, etc.) that will be shown or hidden together.
Also, ensure that the content hidden in <details> is not critical for understanding the page if it remains hidden (since some users might not open it). If it’s crucial, maybe it shouldn’t be in a collapsible section.
These are the most common container tags you’ll encounter in HTML5 for structuring content. There are other container elements as well (for example, <ul> and <ol> list elements are containers for list items, <table> is a container for tabular content, <figure> is a container for media and caption, etc.), but the ones listed above cover the primary structural and semantic groupings for typical web content.
Next, we’ll discuss some best practices when using container tags and how semantic HTML5 elements can improve your web development.
Best Practices for Using Container Tags (Semantic HTML5)
Using container tags effectively is not just about knowing their definitions, but also about applying them in a way that makes your HTML structure clear and meaningful. Here are some modern usage tips and semantic HTML5 best practices:
- Prefer semantic elements over non-semantic ones: Whenever possible, use a meaningful HTML5 element instead of a generic <div>. For example, wrap your navigation links in <nav>, your page header in <header>, main content in <main>, and so on. You could use only <div>s to layout a page, but it’s better to use appropriate sectioning elements (nav, footer, article, etc.) as this provides additional meaning to your markup.
developer.mozilla.org
. Semantic elements serve as landmarks (e.g., screen readers allow users to jump to the main content or navigation easily when those tags are used).
- Use headings within sectioning elements: Elements like <section> and <article> are part of the HTML5 outlining algorithm (which conceptually defines a document outline).While the formal outline algorithm isn’t implemented in browsers, the practice remains: give each significant section a heading. This means when you use <section>, include an <h1>–<h6> inside to indicate the topic of that section. Similarly, each <article> usually starts with a title (often an <h1> or <h2> depending on context)
developer.mozilla.org
. This helps structure the content for both readers and machines.
- Only one <main> per page: As mentioned, you should use a single <main> element to encapsulate the main content. Avoid having more than one, and don’t nest it inside other sectioning tags. <main> should start where your unique page content starts, after the common header/nav, and end where your common footer begins.
- Don’t confuse parent-child relationships: Remember that <header>, <footer>, and <aside> relate to the nearest ancestor sectioning element. For example, a <footer> inside an <article> is the footer for that article, not the page. A <header> directly inside the body (and not inside another sectioning element) is the page header. Keep this in mind when nesting: if you put a <header> inside a <section>, that’s the header for that section.
- Nesting container tags logically: You can nest sectioning elements, but do so in a way that makes sense. For instance, you might have a <article> that contains <section>s or a <article> with an <aside> for related info. You could also have a <section> that contains multiple <article>s (e.g., a section listing the latest news with each news item as an article). Ensure the nesting reflects a logical hierarchy of content. Avoid overly deep nesting that doesn’t serve a structural purpose.
- Use <div> as a fallback or for styling hooks: It’s perfectly fine to use <div> containers when needed – not every grouping has a semantic element. For example, a container used purely for CSS grid layout or flexbox layout may be just a <div> with a class, and that’s okay. Also, if you have to group elements but they don’t constitute a logical “section” of content, <div> is the go-to. Just try not to overuse <div> when a clearer element is available (a phenomenon known as “divitis” where the markup is littered with unnecessary divs).
- Accessible naming and roles: Most semantic container tags automatically provide roles for assistive tech. For example, <nav> has the implicit ARIA role of navigation, <main> has role main, <header> and <footer> (when appropriate) can act as banners or contentinfo landmarks. Typically, you don’t need to add ARIA roles to these (and you shouldn’t unless you have a specific reason). Using the correct tag is usually sufficient. If you have multiple of something (like multiple <nav>s), you might want to give them accessible names (e.g., aria-label="Primary" or aria-label="Footer Navigation") to distinguish them.
- Visual design vs semantic structure: Keep your HTML structure semantic, and use CSS for visual layout. For example, you might have a sidebar that appears visually on the left. Semantically, that sidebar content could be an <aside> (if it’s secondary) or just a section/div. Don’t choose containers based on how things look; choose based on meaning, then use CSS to position/style. This separation ensures your HTML remains meaningful even if the CSS changes or isn’t loaded.
- Validate and maintain hierarchy: HTML5 is quite flexible, but it’s good practice to ensure your container tags are used correctly. For instance, you shouldn’t put a block-level element like a <section> directly inside a <p> (paragraph), because a paragraph can only contain phrasing content (text, inline elements). Most container tags we discussed (div, section, article, nav, etc.) are block-level. Keep block-level elements at appropriate places in the hierarchy (usually as children of <body> or other sectioning elements, not inside inline contexts). Use a validator or reference if unsure about where an element can be used.
By following these practices, you leverage HTML5 container tags to create a well-structured document. This not only makes your code easier to understand and maintain but also benefits SEO (search engines appreciate clear structure and meaningful tags) and accessibility (assistive technologies can navigate your content by these landmarks).
As MDN notes, using proper sectioning elements "provides extra semantics for screen readers (and other tools) to give users extra clues about the content they are navigating", thereby improving the user experience for those users.
Next, let’s address some common questions beginners have about container tags in HTML.
FAQ: HTML Container Tags
Q1: What are container tags in HTML?
A1: Container tags in HTML are tags that come in pairs (an opening tag and a closing tag) and are used to enclose content. They “contain” other content within them. For example, <div>...</div> or <p>...</p> are container tags because they wrap some content inside. These tags typically affect or define the structure of that content. In contrast, tags like <br> or <img> that don’t wrap any content (no closing tag) are not container tags – those are called empty or void tags. Essentially, if an element has a distinct opening <tag> and closing </tag> and can have stuff between them, it’s a container tag.
Most HTML elements (paragraphs, sections, divs, headers, list items, etc.) are container tags. They help organize HTML documents by nesting content inside them. Container tags are crucial for creating the hierarchy and layout of a webpage.
Q2: How are container tags different from empty (void) tags?
A2: The difference comes down to whether they can have content inside. Container tags have content and closing tags; empty tags do not. A container tag (like <section></section> or <span></span>) will wrap some content or other elements between the opening and closing tags. An empty tag (like <br> or <meta>) stands alone – it’s just a single tag with no closing partner and it cannot enclose any content.
For example:
- <h1>Title</h1> is a container element (the content "Title" is inside).
- <img src="photo.jpg" alt="Photo"> is an empty element – it stands alone and you can’t put anything inside <img>.
Another way to look at it is: that empty (void) tags self-close immediately and represent something by themselves (like an image or a line break), whereas container tags define a region of the document that holds sub-content. Incorrect HTML, you must close all container tags with a matching </...> (except in a few cases where HTML5 allows optional closing like <li> or <p> closing tags can be omitted by syntax rules, but conceptually they are still containers with content).
Q3: When should I use semantic container tags instead of just <div>?
A3: You should use semantic tags (like <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, etc.) whenever they appropriately describe the content you’re marking up. The rule of thumb: use the HTML element that best matches the meaning of your content. Use <div> as a fallback if no semantic element fits.
For example:
- Use <header> for the top part of a page or section (logo, title, intro, nav links).
- Use <nav> for a block of navigation links.
- Use <section> for a generic section of related content (with its own heading).
- Use <article> for an independent piece of content (blog post, news article, etc.).
- Use <aside> for side content or tangential info.
- Use <footer> for bottom-of-page or bottom-of-section content (copyright, author info, etc.).
- Use <main> to wrap the main content of the whole page.
If none of these apply (for instance, you just need a container to apply styling or scripting, or to group things in a way that isn’t a distinct semantic section), then a <div> is perfectly fine. An example might be a wrapper <div> that groups a set of elements purely for layout (like a flex container) but doesn’t represent a "section" of content in itself.
Using semantic containers makes your HTML more meaningful. It helps other developers (and yourself later) understand the structure. It also can improve SEO slightly (search engines can identify which content is nav vs. main vs. footer) and accessibility (screen readers have shortcuts to navigate landmarks like main and navigation). So, prefer semantic tags if you have a clear purpose that matches one of them. Use <div> only when needed for generic grouping.
Q4: Can container tags be nested inside each other?
A4: Yes, and HTML structure is all about nesting container tags appropriately. Most container tags can contain other containers, as long as the nesting makes sense and follows HTML rules. For example, you can have an <article> that contains several <section> elements, or a <section> that contains an <article>, or a <nav> inside a <header>, etc. Nesting is how you build complex layouts:
html
CopyEdit
<main>
<article>
<header><h1>Article Title</h1></header>
<section>
<h2>Section in Article</h2>
<p>...</p>
</section>
<footer>Author name</footer>
</article>
<aside>Related info</aside>
</main>
In this snippet, multiple containers are nested: <main> contains an <article> and an <aside>. The <article> contains its own <header>, a <section>, and a <footer>. This nesting is logical and allowed.
However, not all nesting combinations are valid. You need to follow content model rules. For example, you shouldn’t put a block-level element inside an inline element (you wouldn’t put a full <div> inside an <a> if that anchor is just wrapping text unless the anchor itself is made block-level, etc.). Similarly, some elements have restrictions (like you shouldn’t put a <header> directly inside another <header>). But in general, sectioning elements and container tags are meant to be nested to create the document outline.
The key is to nest in a way that reflects hierarchy: broad containers (like <main>) at a higher level, with more specific ones inside. Always close tags in the correct order (last opened, first closed) to maintain a well-formed structure.
Q5: What are some examples of void (empty) tags in HTML (so I can distinguish them from container tags)?
A5: Common void elements in HTML (which are not container tags) include:
- <br> – line break (produces a line break in text)
- <hr> – horizontal rule/line (thematic break in content)
- <img> – image (embeds an image)
- <input> – input field (various types: text, radio, checkbox, etc.)
- <meta> – metadata (e.g., character set, description, viewport)
- <link> – link to external resource (like CSS stylesheet)
- <source> – source for media elements (like inside <picture> or <audio>)
- <track> – text track for media (subtitles, captions)
- <area> – area in an image map
- <embed> – embedded external content
- <param> – parameter for object (deprecated in modern HTML5 in favor of other tech)
- <col> – column definition in a table colgroup
- <wbr> – word break opportunity (hint for line breaking)
These tags are written with just a single tag (no closing tag) because they can’t have content. If you see a slash in them like <br /> or <img ... />, that’s just XML-style self-closing (in HTML5 you can omit the slash, <br> is fine) – but still, there’s no separate closing tag.
All other HTML tags that are not in this void list are typically container tags (or can act as containers, even if you leave them empty, you theoretically could put content in them). For instance, <p> could be empty, but it’s not a void tag because you could put text in it; <p></p> is a container (even if nothing is between, it has an opening and closing tag).
Knowing which tags are void helps you remember to never put content inside them or add a closing tag. If you accidentally write <br>text</br>, the browser will likely interpret that as <br> and then just text with a stray </br> (which is invalid). So keep void tags self-closed, and use container tags when you need to wrap content.
Q6: Does using semantic container tags help with SEO and accessibility?
A6: Yes, using semantic container tags can help with both SEO and accessibility, though it’s not a magic solution – it’s one of many factors.
- SEO: Search engine crawlers analyze your HTML structure. Semantic tags give them hints about what’s what. For example, wrapping your main content in <main> could help the crawler identify the primary content of the page. Using headings within sections (<h1>, <h2>, ...) helps search engines understand the content hierarchy and topics. Navigation menus in <nav> might be recognized as menus (and sometimes search engines use that to generate site links or understand site structure). While modern search algorithms are very advanced and can figure out a lot even from <div>s, using semantic tags aligns with providing clear information. At the very least, it won’t hurt, and it may give slight advantages in how content is parsed or featured (e.g., Google has been known to use the <article> tag as a hint for article content for things like Google News or featured snippets).
- Accessibility: This is where semantic tags shine. Assistive technologies like screen readers use semantic information to provide a better experience for users who can’t see the page. For example, screen readers have a feature to navigate by landmarks – they’ll announce that there’s a "navigation region" or "main region" if you use <nav> or <main>, allowing users to jump to those sections easily. Similarly, headings are extremely important for screen reader users to skim page content. By structuring your page with proper container tags and headings, you enable visually impaired users to understand the layout and jump to content of interest. If everything was a <div> with no semantics, the screen reader would have to read through everything linearly with little clue as to structure.
Additionally, certain tags come with default behaviours that aid accessibility. For instance, <details> and <summary> provide an accessible way to reveal/hide content without extra scripting – the screen reader knows to announce them as expandable sections and the state (expanded or collapsed) is managed automatically. Using a <form> properly groups form controls and allows users to tab through inputs; <fieldset> and <legend> inform them that certain fields are related.
So, by all means, yes – using semantic container tags correctly is considered the best practice for accessible, SEO-friendly HTML. It makes your site more robust for different user agents, including search bots and assistive devices.
Q7: What’s the difference between a block-level container and an inline container? Are all container tags block-level?
A7: In HTML/CSS, elements have a display category by default: block-level or inline (there are others like inline-block, flex, grid, etc., but block vs inline is the basic concept). Block-level elements typically start on a new line and take up the full width available, whereas inline elements flow within the text and only take as much width as their content.
Most of the structural container tags we discussed (div, section, article, nav, header, footer, aside, main, form, fieldset, details) are block-level elements by default. That means they will each appear on a new line in normal flow, and you can style them with block layout properties (width, height, margin, etc.). They can contain other block-level or inline elements (depending on the tag’s content model).
However, there are also inline container elements. For example, <span> is an inline container for phrasing content (text and other inline elements). <a> (anchor) is inline by default and can contain text or inline elements (and even block elements in HTML5, although that’s not typical usage). These are container tags too (because they have closing tags and can contain something), but they behave inline.
So not all container tags are block-level. A <span> is a container for text that doesn’t break the flow into a new line; it’s useful for styling or grouping text within a paragraph. An <em> or <strong> tag (for emphasis or strong importance) are inline containers for text (they have closing tags and contain text, thus they are containers, but semantically for phrasing).
In summary: Block-level containers (like <div>, <section>, <p>) create larger structural blocks on the page. Inline containers (like <span>, <a>, <em>) wrap content without disrupting the flow of text. When we talk about "container tags" in a general sense, we usually mean any element that can contain content, so that includes both block and inline elements with an opening/closing tag. But often beginners focus on block-level containers because those are used to create the layout structure, while inline containers are used for styling or semantic purposes within text.
Q8: Are there any SEO or content penalties for not using semantic container tags?
A8: There’s no direct "penalty" in the sense that your page won’t be down-ranked just because you used a <div> instead of a <section>. However, not using semantic tags means you’re not taking advantage of potential benefits. Search engines will still index your content if the content is there; they don’t require you to use <article> or <nav> for it to count. But using semantic markup can provide subtle boosts:
- It may help the search engine identify important parts of your page more easily.
- It could improve the chance of getting rich snippets or being included in certain search features (for instance, Google might more easily detect an FAQ section if you mark it up with proper structure, though they prefer explicit structured data, the raw HTML structure can still help).
From an SEO perspective, quality content and proper use of headings, titles, meta tags, etc., carry more weight than whether you used <section> vs <div>. However, semantic HTML is part of overall good coding practices, which indirectly contributes to SEO (e.g., better accessibility can lead to more user engagement, which can affect SEO metrics).
So, you won’t get a manual penalty or something for not using semantic tags, but it’s still recommended to use them. There’s essentially no downside to using them correctly, and you future-proof your site for evolving tools (like voice assistants or other devices that might leverage HTML structure).
Q9: How can I learn which container tag to use in a given situation?
A9: It comes with understanding and a bit of practice. Here are some tips:
- Learn by definition and examples: Familiarize yourself with the definitions (like in this article or via MDN/W3C documentation) of each semantic element and note the examples of usage. MDN Web Docs and W3Schools both provide examples for tags like <article>, <section>, etc.
- Think in terms of content structure: When designing your HTML, outline the content. What is the header of the page? What is the main content vs. side content? Are there distinct sections or is it one continuous narrative? Is some content a complete unit (article) or just a part of the page? By answering these, you can map parts of your outline to HTML elements (header, main, nav, section, article, aside, footer).
- Refer to semantic HTML guides: Many tutorials and guides on semantic HTML5 give scenarios. For instance, a tutorial might walk through building a blog page and show where to use article vs section vs aside.
- Use browser accessibility tree or outliner tools: Some tools can visualize the structure of your HTML page (the document outline). This might help you see how your usage of container tags defines the outline. (Though note HTML5 outlines algorithm differences, many devs still consider h1-h6 hierarchy).
- Keep it logical: If you’re ever unsure, ask yourself: "If someone else looked at this HTML, would the choice of tag help them understand the purpose of this content?" For example, if you have a <div id="menu">, that could just be <nav> which is self-explanatory. Or if you have a <div class="article"> with a bunch of content, likely <article> is more appropriate. The more you explain why a <div> is there (through IDs or classes that imply structure), the more hints you should use a semantic tag instead.
Finally, don’t stress too much: if you accidentally use a <section> where a <article> might have been slightly better, it’s not a tragedy. Both are sectioning content and will work. The goal is a gradual improvement toward more semantic markup.
Conclusion
HTML container tags are fundamental for structuring web content. By using the right container for the right job – and knowing the difference between empty tags – you create documents that are logically organized and easier to maintain. Embracing semantic HTML5 containers (like <header>, <nav>, <section>, <article>, <aside>, <footer>, <main>) can enhance the clarity of your code, improve accessibility for users, and follow modern best practices for web development. Happy coding!