HTML5 Semantic Tags

1<body>
2  <header>
3    <img src="logo.png" alt="Skill-Forge" />
4    <nav>
5      <a href="/">Home</a> | <a href="/notes">Notes</a>
6    </nav>
7  </header>
8 
9  <main>
10    <article>
11      <h2>Semantic HTML Layouts</h2>
12      <p>Using semantic tags helps screen readers and search engines...</p>
13      <section>
14        <h3>Why section inside article?</h3>
15        <p>This is a sub-topic inside the article.</p>
16      </section>
17    </article>
18  </main>
19 
20  <aside>
21    <h3>Related Topics</h3>
22    <ul><li><a href="/notes/css">CSS Layouts</a></li></ul>
23  </aside>
24 
25  <footer>
26    <p>&copy; 2026 Skill-Forge. All rights reserved.</p>
27  </footer>
28</body>

1<!-- Description list -->
2<dl>
3  <dt>HTML</dt>
4  <dd>HyperText Markup Language</dd>
5  <dt>CSS</dt>
6  <dd>Cascading Style Sheets</dd>
7</dl>
8 
9<!-- Image with caption -->
10<figure>
11  <img src="house.jpg" alt="A cottage in the woods" />
12  <figcaption>Figure 1: Analogy of building a codebase.</figcaption>
13</figure>
14 
15<!-- Quote -->
16<blockquote cite="https://example.com/quotes">
17  "First solve the problem. Then write the code."
18</blockquote>

1<!-- Responsive image -->
2<picture>
3  <source media="(min-width: 800px)" srcset="hero-large.webp" />
4  <source media="(min-width: 400px)" srcset="hero-medium.webp" />
5  <img src="hero-small.jpg" alt="Hero banner" />
6</picture>
7 
8<!-- Video with captions -->
9<video controls width="640">
10  <source src="video.mp4" type="video/mp4" />
11  <source src="video.webm" type="video/webm" />
12  <track src="captions.vtt" kind="subtitles" srclang="en" label="English" />
13  Your browser does not support video.
14</video>
15 
16<!-- Sandboxed iframe -->
17<iframe
18  src="https://www.youtube.com/embed/VIDEO_ID"
19  title="Demo video"
20  sandbox="allow-scripts allow-same-origin"
21  loading="lazy"
22></iframe>

1<table>
2  <caption>Monthly Sales Report</caption>
3  <colgroup>
4    <col style="background: rgba(255,255,255,0.05)" />
5    <col span="2" />
6  </colgroup>
7  <thead>
8    <tr>
9      <th scope="col">Month</th>
10      <th scope="col">Units</th>
11      <th scope="col">Revenue</th>
12    </tr>
13  </thead>
14  <tbody>
15    <tr>
16      <td>January</td><td>120</td><td>$6,000</td>
17    </tr>
18    <tr>
19      <td>February</td><td>90</td><td>$4,500</td>
20    </tr>
21  </tbody>
22  <tfoot>
23    <tr>
24      <th scope="row">Total</th>
25      <td colspan="1">210</td>
26      <td>$10,500</td>
27    </tr>
28  </tfoot>
29</table>

1<!-- Autocomplete with datalist -->
2<label for="browser">Favourite browser:</label>
3<input list="browsers" id="browser" name="browser" />
4<datalist id="browsers">
5  <option value="Chrome" />
6  <option value="Firefox" />
7  <option value="Safari" />
8</datalist>
9 
10<!-- Progress and meter -->
11<label>Upload progress:</label>
12<progress max="100" value="72">72%</progress>
13 
14<label>Battery:</label>
15<meter min="0" max="100" low="20" high="80" value="65">65%</meter>
16 
17<!-- Range + live output -->
18<label for="vol">Volume: <output for="vol" id="volOut">50</output></label>
19<input type="range" id="vol" min="0" max="100" value="50"
20  oninput="volOut.value = this.value" />

1<!-- Native accordion — no JS required -->
2<details>
3  <summary>What is the DOM?</summary>
4  <p>The Document Object Model is a tree representation of the HTML page.</p>
5</details>
6 
7<!-- Native modal dialog -->
8<dialog id="myDialog">
9  <h2>Confirm Delete</h2>
10  <p>Are you sure? This cannot be undone.</p>
11  <form method="dialog">
12    <button>Cancel</button>
13    <button value="confirm">Delete</button>
14  </form>
15</dialog>
16<button onclick="myDialog.showModal()">Open Dialog</button>
17 
18<!-- Template + script -->
19<template id="card-tpl">
20  <div class="card"><slot name="title"></slot></div>
21</template>

1<!-- ❌ Deprecated — do not use -->
2<center>Centred text</center>
3<font color="red" size="5" face="Arial">Red large text</font>
4<marquee>Scrolling text</marquee>
5 
6<!-- ✅ Modern equivalents -->
7<p style="text-align: center;">Centred text</p>
8<p style="color: red; font-size: 1.25rem; font-family: Arial, sans-serif;">
9  Styled text
10</p>
11<div class="marquee-wrapper">
12  <!-- Handled with CSS @keyframes animation -->
13  <span class="scrolling-text">Scrolling text</span>
14</div>