Amanuel's Blog

HTML: Container and Structural Elements

Amanuel's photo
Amanuel
·

3 min read

One of the essential features of HTML is the ability to group and structure elements using container and structure elements. These elements play a vital role in structuring the layout and organizing content for styling purposes.

Container Elements

In this first section, we delve into the world of container elements, with a particular focus on the versatile div and the sleek span.

The <div> Element

The <div> element is a workhorse when it comes to grouping elements. As a block-level element, it starts on a new line and spans the entire width of the available space (though it can be customized using CSS).

Let's take a look at an example:

  1. Replace the <body> element of the index.html file from a previous article with the code below.

  2. Preview it in the browser.

<div> 
  <h1>Paragraph 1</h1> 
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 
    atque ex quia, maxime magnam consequuntur doloremque explicabo excepturi 
    eius voluptate!
  </p> 
</div>

As a container element, the div might seem inconspicuous without CSS styles. However, with a simple touch of CSS magic, it transforms into something captivating:

  1. Add the following <div> element below the first <div> element.

  2. Preview it in the browser

<div style="background: yellow"> 
  <h1>Paragraph 2</h1> 
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 
    atque ex quia, maxime magnam consequuntur doloremque explicabo excepturi 
    eius voluptate! 
  </p> 
</div>

Now, the second div element stands out with its yellow background, starting on a new line and extending to the end of its container.

The <span> Element

Unlike its block-level counterpart, the default display for a span element is "inline." An inline element flows within the text, taking up only as much width as necessary for its content. It cannot directly have width, height, or padding properties applied.

Let's experiment with the span element:

  1. Add the following <span> element below the last <div> element.

  2. Preview it in the browser

<span style="background: green"> 
  <h1>Paragraph 3</h1> 
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 
    atque ex quia, maxime magnam consequuntur doloremque explicabo excepturi 
    eius voluptate! 
  </p> 
</span>

Here comes the interesting part. The green background we applied to the span element won't be displayed. Why? Because the span element is inline!

But don't worry; there's a solution. Let's add another span element with text:

  1. Add the following <span> element below the last <span> element.

  2. Preview it in the browser

<span style="background: green">End of the paragraphs</span>

Now the green background becomes visible, showcasing the span element's inline charm.

Key Semantics for Enhanced Structure

Beyond div and span, HTML offers additional container elements for better semantic structure. Here's a quick overview:

  • <section>: This element defines a distinct section within a document, typically with its heading.

  • <article>: This element represents a self-contained piece of content that can be distributed independently and reused in various contexts.

  • <nav>: we employ this element to define a block of navigation links.

Structural Elements

No discussion about containers is complete without mentioning key structural elements in HTML:

  • <header>: This element represents the introductory content of a page or a section, typically containing a logo, a heading, or navigation links.

  • <main>: This element contains the central content of a web page, excluding headers, footers, and sidebars.

  • <aside>: We use this element for content that is tangentially related to the main content, like a sidebar or advertisements.

  • <footer>: This element represents the footer of a section or a page, typically containing copyright information, contact details, or links.

Conclusion

HTML containers, such as div and span, bring order and aesthetics to web pages. Understanding structural elements and utilizing the right container for the job is essential to create well-structured websites. Additionally, employing key semantic elements and properly structuring web pages ensures optimal user experiences and accessibility.

Previous: List and Tables

HTML5Web Developmentsemantichtml