← HTML5 Semantic Tags

Semantic Tags in HTML5

A catalog of semantic elements introduced to organize modern webpage layouts.

HTML5 introduced several tags to clarify the structure of documents, improving compatibility, indexing, and accessibility.

HTML5 Semantic Elements

  • <header> / <nav> / <main>: Core page headers and navigational layout wraps.
  • <section> / <article> / <aside> / <footer>: Content segments and footers.
  • <figure> / <figcaption>: Captioned images/diagrams.
  • <details>: Defines additional details that the user can view or hide.
  • <summary>: Defines a visible heading for a <details> element.
  • <time>: Translates dates/times into machine-readable formats.
  • <address>: Defines contact information for the author/owner of a document.

Interview questions

Sign in to save

What is the benefit of the <time> tag?

It lets search engines, calendars, and text readers extract exact, machine-readable date/time data (`datetime` attribute) from standard, human-readable UI texts.

Practice

Build a collapsible accordion section using details and summary tags.

Hint: Set <details><summary>More Info</summary><p>Hidden details...</p></details>.