Semantic and Media TagsCheatsheet

"A quick reference for List tags you'll actually use"

Updated July 2026

Main Content, , Division , Image , Audio , Video , Media Source , Text Tracks , Figure , Figure Caption , Navigation , Section , Article , Aside tag , Span , header , Footer , address , time

Main Content

<main>

  <section>
    <h1>Frontend Development</h1>

    <p>
      Build responsive websites using modern
      HTML5, CSS3, and JavaScript.
    </p>

    <a href="#">
      Start Learning
    </a>
  </section>

</main>

Division

<div>
  <h2>About Us</h2>

  <p>
    We create fast and responsive websites.
  </p>
</div>

Image

<img src="image.jpg" alt="Image">

Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Video

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Media Source

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Text Tracks

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="en" label="English">
</video>

Figure

<figure>
  <img src="mountain.jpg" alt="Mountain">
  <figcaption>
    Beautiful Mountain View
  </figcaption>
</figure>

Figure Caption

<figure>
  <img src="mountain.jpg" alt="Mountain">

  <figcaption>
    Beautiful Mountain View
  </figcaption>
</figure>

Navigation

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Section

<section>
  <h2>About Us</h2>

  <p>
    Learn modern web development with practical examples.
  </p>
</section>

Article

<article>
  <h2>Getting Started with HTML5</h2>

  <p>
    HTML5 introduces semantic elements for better structure.
  </p>
</article>

Aside

<aside>
  <h3>Quick Links</h3>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</aside>

Span

<p>
  Learn <span>HTML5</span> with modern examples.
</p>

Header

<header>
  <h1>Welcome to Tag Web</h1>

  <p>
    Learn HTML, CSS, and JavaScript with interactive examples.
  </p>
</header>

Footer

<footer>
  <p>
    © 2026 Tag Web. All rights reserved.
  </p>

  <a href="#">Privacy Policy</a>
</footer>

Address

<address>
  Contact us:
  <a href="mailto:hello@tagweb.com">
    hello@tagweb.com
  </a>
</address>

Time

<p>
  Published on 
  <time datetime="2026-07-22">
    July 22, 2026
  </time>
</p>
Download HTML CheatSheet