HTML5 Semantic Structure and New Elements

Modern Page Layout with Semantic Tags

HTML5 introduced a set of semantic elements that provide meaningful structure to web pages, improving accessibility and search engine optimizaton. These elements replace generic <div> containers, making the document's outline clearer.

Key Structural Elements

<header>: Represents introductory content, typically a group of introductory or navigational aids. A page can have multiple headers.
<nav>: Defines a section of navigation links.
<main>: Represents the dominant content of the <body>. A page should only have one <main> element.
<article>: Encapsulates a self-contained composition that is independently distributable or reusable, such as a forum post, a magazine article, or a blog entry.
<section>: Defines a thematic grouping of content, typically with a heading. Sections should be used when content naturally falls into groups.
<aside>: Represents a portion of a document whose content is only indirectly related to the document's main content. Often used for sidebars.
<footer>: Represents a footer for its nearest sectioning content or the root sectioning element. A page can have multiple footers.

Example Layout

Here is a basic example of a blog post layout using these semantic tags:


<html>
<head>
  <title>My Blog Post</title>
</head>
<body>
  <header>
    <h1>My Awesome Blog</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Understanding Semantic HTML</h2>
      <p>Semantic HTML5 elements provide meaning to the structure of a web page.</p>
      <section>
        <h3>Benefits</h3>
        <p>Improved accessibility for screen readers and better SEO.</p>
      </section>
    </article>

    <aside>
      <h3>Related Links</h3>
      <p>Check out our other articles on web development.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 My Awesome Blog</p>
  </footer>
</body>
</html>

New Content-Related Elements

HTML5 also added several elements to enhance content presentation and interactivity.

Figure and Figcaption

The <figure> element represents self-contained content, such as an image, diagram, or code snippet, and is often accompanied by a caption using <figcaption>.

<figure>
  <img src="image.jpg" alt="A descriptive image">
  <figcaption>This is a caption for the image above.</figcaption>
</figure>

Details and Summary

The <details> element creates a disclosure widget, where the user can click to show or hide additional information. The <summary> element provides a visible heading for the details.

<details>
  <summary>Click to see more details</summary>
  <p>This is the hidden content that appears when the summary is clicked.</p>
</details>

Mark

The <mark> element is used to highlight or mark text that is relevant to the current user's context, such as search results.

<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>

Progress and Meter

<progress>: Represents the completion progress of a task. It has value and max attributes.
<meter>: Represents a scalar measurement within a known range. It has value, min, max, low, high, and optimum attributes.

<p>Download progress: <progress value="75" max="100"></progress></p>

<p>Disk usage: <meter value="0.8" min="0" max="1" low="0.4" high="0.8" optimum="0.6"></meter></p>

Time and Date

The <time> element can represent either a specific time or a date, and can include a machine-readable value in the datetime attribute.

<p>The event is scheduled for <time datetime="2023-10-27T10:00">October 27th at 10:00 AM</time>.</p>

Deprecated Elements

HTML5 has removed several elements that were either presentational (better handled by CSS) or had accessibility issues. These include:

<basefont>, <font>, <center>, <u>, <big>, <strike>
<frame>, <frameset>, <noframes> (replaced by <iframe>)
<applet> (replaced by <object> or <embed>)
<marquee>, <blink>, <bgsound>

Enhanced List Functionality

The ordered list (<ol>) element now supports two new attributes:

start: Specifies the starting value of the list item counter.
reversed: Indicates that the list should be displayed in reverse order.

<ol start="5">
  <li>Variable</li>
  <li>Function</li>
  <li>Class</li>
  <li>Object</li>
</ol>

Redefined Elements

The definition list (<dl>) element has been redefined. It's no longer strictly for glossaries but can be used for any name-value group of data.

<dl>
  <dt>CPU</dt>
  <dd>Central Processing Unit</dd>
  <dt>RAM</dt>
  <dd>Random Access Memory</dd>
</dl>

Tags: HTML5 semantic-markup web-development structural-elements

Posted on Fri, 21 Aug 2026 16:03:10 +0000 by dhimok

Freaks City