HTML Semantics

HTML Semantic Elements

Semantic elements are HTML elements that clearly describe their meaning to both the browser and the developer.

Unlike non-semantic elements such as <div> and <span>, semantic elements define the role and structure of the content they contain.

What Are Semantic Elements?

A semantic element explains what kind of content it holds.

For example, elements like <article>, <section>, <nav>, and <footer> describe their purpose clearly.

Many older websites used generic containers such as:

<div id="nav"> <div class="header"> <div id="footer">

HTML5 introduced semantic elements to replace this pattern with more meaningful markup.

Common Semantic Elements

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <figure> and <figcaption>
• <details> and <summary>
• <time>

The section Element

The <section> element defines a thematic grouping of content, usually with a heading.

It is commonly used for chapters, introductions, news items, or contact sections.

<section> <h1>WWF</h1> <p>The World Wide Fund for Nature is an international organization working on environmental conservation.</p> </section>

The article Element

The <article> element represents independent, self-contained content.

An article should make sense on its own and be reusable outside its original context.

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google.</p> </article>

Typical uses include blog posts, news articles, forum posts, and product cards.

Nesting section and article

The <section> and <article> elements can be nested inside each other.

There is no strict rule: a section can contain articles, and an article can contain sections, depending on the content structure.

The header Element

The <header> element represents introductory content or navigational information.

It commonly includes headings, logos, or authorship details.

<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission</p> </header> </article>

The footer Element

The <footer> element defines footer content for a document or section.

It often contains copyright information, contact details, or related links.

<footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

The nav Element

The <nav> element defines a block of major navigation links.

It should be used only for primary navigation, not for every link on the page.

<nav> <a href="/html/">HTML</a> <a href="/css/">CSS</a> <a href="/js/">JavaScript</a> </nav>

The aside Element

The <aside> element contains content that is indirectly related to the main content.

It is often used for sidebars, notes, or additional information.

<aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort.</p> </aside>

The figure and figcaption Elements

The <figure> element represents self-contained content such as images or diagrams.

The <figcaption> element provides a caption for the figure.

<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Trulli, Puglia, Italy</figcaption> </figure>

Why Use Semantic Elements?

Semantic elements improve accessibility, SEO, and code readability.

They help browsers, search engines, and assistive technologies understand the structure and meaning of a web page.

Semantic Elements Reference

Tag	Description
<article>	Defines independent, self-contained content
<aside>	Defines content aside from the main content
<details>	Defines additional details the user can toggle
<figcaption>	Defines a caption for a figure
<figure>	Defines self-contained content
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<main>	Defines the main content of a document
<nav>	Defines navigation links
<section>	Defines a section in a document
<summary>	Defines a heading for a details element
<time>	Defines date and time