---
id: html-semantics
title: "HTML Semantics"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["semantic elements", "semantic HTML", "HTML5 semantic elements", "section article", "non-semantic elements", "figure figcaption"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.91
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "semantic", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_semantic_elements.asp"]
applied_in: []
github_commit: ""
---

# [[HTML Semantics]]

## 🎯 한 줄 통찰 (One-line insight)
Semantic elements are elements with a meaning: a semantic element clearly describes its meaning to both the browser and the developer, unlike non-semantic elements such as `<div>` and `<span>` that say nothing about their content. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Semantic = meaning** — a semantic element clearly describes its meaning to both the browser and the developer. [S1]
- **Non-semantic elements** — `<div>` and `<span>` tell nothing about their content. [S1]
- **Semantic elements** — `<img>`, `<table>`, `<article>`, etc. clearly define their content. [S1]
- **Page-region elements** — `<article>`, `<aside>`, `<details>`, `<figcaption>`, `<figure>`, `<footer>`, `<header>`, `<main>`, `<mark>`, `<nav>`, `<section>`, `<summary>`, `<time>` define different parts of a web page. [S1]
- **Why semantics** — per the W3C, a semantic Web allows data to be shared and reused across applications, enterprises, and communities. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **`<section>`** — a thematic grouping of content, typically with a heading. [S1]
- **`<article>`** — independent, self-contained content that should make sense on its own. [S1]
- **`<header>` / `<footer>`** — introductory content/nav vs. footer info; multiple of each allowed per document. [S1]
- **`<nav>`** — only for major blocks of navigation links, not every link. [S1]
- **`<aside>`** — content indirectly related to the surrounding content (sidebar). [S1]
- **`<figure>` + `<figcaption>`** — self-contained illustration plus its caption. [S1]
- **Free nesting** — `<section>` and `<article>` may contain each other; definitions do not dictate nesting. [S1]

## 📖 세부 내용 (Details)
**What are semantic elements?**
Semantic elements = elements with a meaning. A semantic element clearly describes its meaning to both the browser and the developer. Non-semantic elements such as `<div>` and `<span>` tell nothing about their content. Semantic elements such as `<img>`, `<table>`, and `<article>` clearly define their content. [S1]

Semantic elements that define different parts of a web page: `<article>`, `<aside>`, `<details>`, `<figcaption>`, `<figure>`, `<footer>`, `<header>`, `<main>`, `<mark>`, `<nav>`, `<section>`, `<summary>`, `<time>`. [S1]

**HTML `<section>` element**
The `<section>` element defines a section in a document. According to W3C documentation, a section is a thematic grouping of content, typically with a heading. Use cases include chapters, introduction, news items, and contact information. [S1]
```html
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
```

**HTML `<article>` element**
The `<article>` element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site. Use cases include forum posts, blog posts, user comments, product cards, and newspaper articles. [S1]
```html
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
```
Example with CSS styling articles: [S1]
```html
<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>
```

**Nesting `<article>` in `<section>` or vice versa?**
The `<article>` element specifies independent, self-contained content. The `<section>` element defines a section in a document. Can we use the definitions to decide how to nest those elements? No, we cannot. So, you will find HTML pages with `<section>` elements containing `<article>` elements, and `<article>` elements containing `<section>` elements. [S1]

**HTML `<header>` element**
The `<header>` element represents a container for introductory content or a set of navigational links. It typically contains one or more heading elements (`<h1>` – `<h6>`), a logo or icon, and authorship information. You can have several `<header>` elements in one HTML document. However, `<header>` cannot be placed within a `<footer>`, `<address>`, or another `<header>` element. [S1]
```html
<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
```

**HTML `<footer>` element**
The `<footer>` element defines a footer for a document or section. It typically contains authorship information, copyright information, contact information, sitemap, back-to-top links, and related documents. You can have several `<footer>` elements in one document. [S1]
```html
<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
```

**HTML `<nav>` element**
The `<nav>` element defines a set of navigation links. Notice that NOT all links of a document should be inside a `<nav>` element. The `<nav>` element is intended only for major blocks of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. [S1]
```html
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
```

**HTML `<aside>` element**
The `<aside>` element defines some content aside from the content it is placed in (like a sidebar). The `<aside>` content should be indirectly related to the surrounding content. [S1]
```html
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
```
Example with CSS styling the aside: [S1]
```html
<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>
```

**HTML `<figure>` and `<figcaption>` elements**
The `<figure>` tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The `<figcaption>` tag defines a caption for a `<figure>` element. The `<figcaption>` element can be placed as the first or as the last child of a `<figure>` element. The `<img>` element defines the actual image/illustration. [S1]
```html
<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
```

**Why semantic elements?**
According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." [S1]

**Semantic elements reference**

| Tag | Description |
|---|---|
| `<article>` | Defines independent, self-contained content |
| `<aside>` | Defines content aside from the page content |
| `<details>` | Defines additional details that the user can view or hide |
| `<figcaption>` | Defines a caption for a `<figure>` element |
| `<figure>` | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| `<footer>` | Defines a footer for a document or section |
| `<header>` | Specifies a header for a document or section |
| `<main>` | Specifies the main content of a document |
| `<mark>` | Defines marked/highlighted text |
| `<nav>` | Defines navigation links |
| `<section>` | Defines a section in a document |
| `<summary>` | Defines a visible heading for a `<details>` element |
| `<time>` | Defines a date/time |

[S1]

## 🛠️ 적용 사례 (Applied in summary)
The WWF section example, the browser-list article examples (plain and CSS-styled), the header/footer/nav/aside snippets, and the figure/figcaption example are the canonical applied demonstrations of each semantic element. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Thematic section:
```html
<section>
  <h1>Heading</h1>
  <p>...</p>
</section>
```
Self-contained article with header:
```html
<article>
  <header><h1>Title</h1></header>
  <p>...</p>
</article>
```
Major navigation block:
```html
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a>
</nav>
```
Figure with caption:
```html
<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Semantic elements** (`<article>`, `<section>`, `<header>`, …) — clearly define their content to browsers and developers; preferred for meaningful structure and accessibility. [S1]
- **Non-semantic elements** (`<div>`, `<span>`) — tell nothing about their content; use only when no semantic element fits. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the deliberate non-rule about nesting: the definitions of `<section>` and `<article>` do not determine how to nest them, so either can contain the other. [S1]

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.91
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Layout]], [[HTML Computercode]], [[HTML Introduction]], [[HTML Style Guide]]
- **참조 맥락:** Referenced when choosing meaningful structural elements for a page's regions and for accessibility / SEO benefits.

## 📚 출처 (Sources)
- [S1] W3Schools — HTML Semantics — https://www.w3schools.com/html/html5_semantic_elements.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Semantics" page (Astra wiki-curation, P-Reinforce v3.1 format).