Skip to content

Container Elements

These are elements that contain other elements. When creating a web page we use these to set up the structure of the page. These are what we apply grid and flex styling to and the other content elements (text, media etc) go inside of these. The following elements are on this page:

  1. header
  2. main
  3. footer
  4. nav
  5. section
  6. article
  7. aside
  8. table
  9. div
  • Description: Represents introductory content for a page or section of a page.
  • Common Use: While you could have multiple headers on a page, in our class we will typically use one header for the elements of the page that are common across all pages of the site. That is usually elements like: the logo, site title, navigation menu. You will use the same header on each page of the site.

Header Example

<header>
  <div id="site-title">My Website</div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Main <main>

  • Description: Represents the main content of a document, separate from site-wide content like headers, footers, and navigation bars. This semantic element plays a crucial role in both accessibility and SEO to identify the core subject matter of a page. It’s a best practice to include the page title within an <h1> element inside the <main> element to clearly define the page title. It’s important to note that a webpage should contain only one <main> element.
  • Common Use: Typically the <main> element comes right after the <header> and before the <footer> element on the page. All of the content specific to that page should be in the main element.

Main Example

<header>site title and site navigation</header>
<main>
  <h1>Rabbits are the Best</h1>
  <p>This is a page all about why I like rabbits.</p>
</main>
<footer> copyright and other info</footer>
  • Description: Represents a footer for a document or section. It often contains information about the author of the section, related documents, copyright data, and links to privacy policies.
  • Common Use: After the <main> element to include copyright info and links to things like social media. Usually the footer is the same on every page of the site.

Footer Example

<footer>
  <div class="social">
    <p>Follow me on social media:</p>
    <ul>
      <li><a href="https://www.instagram.com/yourusername" target="_blank">Instagram</a></li>
      <li><a href="https://www.tiktok.com/@yourusername" target="_blank">TikTok</a></li>
    </ul>
  </div>
  <p>Copyright © 2024</p>
</footer>
  • Description: Represents a section of a page whose purpose is to provide navigation links.
  • Common Use: For the main site navigation that appears on every page of the site. In our class you should use the nav element for you navigation. It is usually inside of the <header>.

Nav Example

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Article <article>

  • Description: Represents a set of content that can be described as “self-contained.” For example, the content could be a forum post, a magazine or newspaper article, a blog entry, etc. An <article> should be headed by a heading element to identify the article’s topic or purpose clearly.
  • Common Use: To markup blog posts, news stories, user comments, or other forms of articles that are intended to stand alone or be independently distributable, each introduced by a heading.

Article Example

<article class="project">
  <h2>Project Name</h2>
  <p>Description of project content...</p>
</article>

Section <section>

  • Description: Represents a thematic grouping of content, typically with a heading. Each <section> should have a heading (<h1>–<h6>) as the first child of the <section>. The heading describes the content in the section. Using <section> and headings like this helps to organize page content into different sections that can be easily navigated and understood by users and search engines.
  • Common Use: To group related content into sections within a document, each defined by a heading for clarity and accessibility.

Section Example

<section>
  <h2>About Us</h2>
  <p>We are a team of passionate individuals...</p>
</section>

Aside <aside>

  • Description: Represents content tangentially related to the content around it.
  • Common Use: Used for content like sidebars, advertisements, or related links. In a portfolio, this can be used on a project page after your <main> element to give links to other, related, projects.

Aside Example

<main>Project Information</main>
<aside>
  <h3>Related Projects</h3>
  <ul>
    <li><a href="/related-project-1">Related Project 1</a></li>
    <li><a href="/related-project-2">Related Project 2</a></li>
  </ul>
</aside>
<footer>footer info</footer>

Table <table>

  • Description: The <table> element in HTML should be used to display tabular data — that is, information presented in rows and columns. Table elements require the use of other elements to define parts of the table:
    • <tr> Represents a table row.
    • <th> Represents a table header cell. This must be inside of a <tr> element.
    • <td> Represents a table data cell. This must be inside of a <tr> element.
    • These table elements are not required for simple tables but can help structure more complicated ones. They are kind of like how header/main/footer are used for our web page:
      • <thead> Represents the header section of a table.
      • <tbody> Represents the body section of a table.
      • <tfoot> Represents the footer section of a table.
  • Common Use: Some examples of the kind of information you would put in a table are: statistical and reporting data, schedules and time tables.
    • DO NOT use tables for layout. This is an old practice that is not used now that we have CSS Grid and Flex.

Table Example

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Rating</th>
  </tr>
  <tr>
    <td>Widget A</td>
    <td>$10.00</td>
    <td>★★★★☆</td>
  </tr>
  <tr>
    <td>Gadget B</td>
    <td>$15.00</td>
    <td>★★★☆☆</td>
  </tr>
</table>

Div <div>

Description

  • Description: The <div> element is a generic container in HTML that is used to group block-level content. It doesn’t have a semantic meaning like the elements above. In other words, there is no specific type content expected inside of a div. Browsers do not apply any styles to a div other than block element layout. It is last in this list because it should be used only if the other elements are not appropriate.
  • Common Use: A common use is when you need to group content only for visual or styling purposes. For example an information card that is not a fully separate section of the page nor an article. Making a container that will be changed through JavaScript is another use case. Before HTML5 semantic elements (article, section, nav etc.) div elements were used to create these structures. While you should use HTML5 elements when possible, if you need a sub-section inside one of those, a div would be appropriate.

Div Example

<div class="card">
  <img src="image.jpg" alt="Example Image" class="card-image">
  <div class="card-content">
    <h3 class="card-title">Card Title</h3>
    <p class="card-description">This is a description of what the card is about. It might include some basic information or a summary of the content.</p>
  </div>
  <div class="card-actions">
    <button type="button">Action 1</button>
    <button type="button">Action 2</button>
  </div>
</div>

Leave a Reply