Elements that describe their meaning.
✍️ 3 exercises + code challenge in this lessonA semantic element clearly describes its meaning to both the browser and the developer. <div> and <span> say nothing about their content; <article>, <nav> and <footer> do.
<figure> and <figcaption>: an image with a caption.<time>: a date or time.<details> and <summary>: a box the user can open and close.<mark>: highlighted text.Semantic HTML improves accessibility, SEO and makes code easier to read and maintain.
Mastering HTML Semantic Elements helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<article>
<header>
<h2>Launching our new academy</h2>
<p>Published <time datetime="2026-10-22">22 October 2026</time></p>
</header>
<figure>
<img src="https://picsum.photos/id/180/320/160" alt="Laptop on a desk" width="320" height="160">
<figcaption>Learning to code, one lesson at a time.</figcaption>
</figure>
<details>
<summary>Read more</summary>
<p>Hidden content appears when you open the details element.</p>
</details>
</article>Check what you learned in “HTML Semantic Elements”.
Use the element for an image with a caption.
<> <img src="chart.png" alt="Sales chart"> <>Sales in 2026</> </>
Which element is best for an independent blog post?
Create a <details> element with a <summary> "More info" and a paragraph inside.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services