Container tags and page structure HTML

Container Tags in HTML

HTML provides several container elements that can hold other tags and structure your content. The most common ones are:

  • <article>
  • <section>
  • <div>

Understanding when to use each can help improve semantic clarity and accessibility.

1. <article> – Independent Content Units

The <article> tag is used for self-contained content that could stand alone or be syndicated elsewhere.

Examples:

Code Block Loading...

  • Ideal for blog posts, news articles, forum entries, or any item that makes sense on its own.
  • Should include a heading (<h1>–<h6>) and relevant content.

2. <section> – Thematic Grouping

The <section> tag represents a thematic grouping of content within a document.

Example:

Code Block Loading...

  • Useful for dividing long articles into logical parts.
  • Each section should have a heading to describe its purpose.
  • Avoid using <section> as a generic wrapper—it’s meant for meaningful divisions.

3. <div> – Generic Container

The <div> tag is a non-semantic container used when no other tag is appropriate.

Code Block Loading...

  • Commonly used for layout and styling.
  • Often paired with class or id attributes for CSS targeting.
  • Use <div> when semantic tags like <article> or <section> don’t fit the context.

Page Structure Tags in HTML

HTML provides several semantic tags that help define the structure and meaning of different sections within a webpage. These include:

1. <nav> – Navigation Block

The <nav> tag is used to define navigation menus. It typically contains a list of links using <ul> or <ol>.

Code Block Loading...

  • Helps users and search engines understand the site’s navigation structure.
  • Ideal for menus, table of contents, or breadcrumb trails.

2. <aside> – Related Content

The <aside> tag is used for content that’s tangentially related to the main content—like sidebars, quotes, or callouts.

Code Block Loading...

  • Signals that the content is not part of the main flow.
  • Useful for supplementary information or widgets.

3. <header> – Introductory Section

The <header> tag represents the introductory content of a page or section. It often includes headings, taglines, or images.

Code Block Loading...

  • Can be used inside <body>, <article>, <section>, etc.
  • Helps define the purpose or identity of the surrounding content.

4. <main> – Primary Content Area

The <main> tag identifies the main content of the page, excluding headers, footers, and sidebars.

Code Block Loading...

  • There should be only one <main> per page.
  • It improves accessibility and helps screen readers focus on core content.

5. <footer> – Footer Section

The <footer> tag defines the footer of a page or section. It often contains metadata, links, or closing notes.

Code Block Loading...

  • Can be used inside <body>, <article>, <section>, etc.
  • Commonly includes author info, copyright, or related links.

Here’s a visual layout demo using semantic HTML tags to structure a typical web page. This example shows how <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> work together:

Semantic HTML Page Structure

Code Block Loading...

Layout Overview

  • <header>: Introductory content like site title or logo
  • <nav>: Navigation menu with links
  • <main>: Central content area
  • <section>: Logical grouping of related articles
  • <article>: Self-contained content blocks
  • <aside>: Sidebar or supplementary info
  • <footer>: Closing notes or site-wide footer