Semantic Tags and Uses

What is a Semantic Tag?

Semantic tags are HTML elements that carry meaning, indicating the purpose or role of the content they enclose. They provide valuable context to both browsers and developers, aiding in accessibility, search engine optimization, and code readability.

<header>

<header>
  <div>Logo</div>
  <nav>Navigation</nav>
</header>

The <header> tag represents introductory content, typically containing headings, logos, navigation menus, and other introductory elements for a section or page.

<nav>

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

The <nav> tag is used to define navigation links, menus, or any other navigation-related content on a webpage.

<main>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
  <aside>Related content...</aside>
</main>

The <main> tag signifies the main content of a webpage, excluding any header, footer, or sidebar content. It should contain the primary content that is unique to the page.

<section>

<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

The <section> tag defines a section of a document, typically containing related content grouped together. It's often used to divide content into thematic groups.

<article>

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

The <article> tag represents a self-contained piece of content that can be independently distributable or reusable, such as a blog post, news article, or forum post.

<aside>

<aside>
  <h2>Related Content</h2>
  <p>Additional content...</p>
</aside>

The <aside> tag is used for content that is tangentially related to the content around it, such as sidebars, pull quotes, or related links.

<footer>

<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

The <footer> tag represents the footer of a document or section, typically containing copyright information, contact details, or links to related content.

<figure> and <figcaption>

<figure>
  <img src="image.jpg" alt="Description" />
  <figcaption>Caption for the image.</figcaption>
</figure>

The <figure> tag is used to encapsulate media content, such as images, videos, or diagrams, along with an optional <figcaption> tag to provide a caption for the media.

<time>

<time datetime="2024-05-01">May 1, 2024</time>

The <time> tag represents a specific period in time or a duration, allowing browsers and search engines to understand and interpret dates and times within the content.

<address>

<address>
  <p>
    123 Main Street
    <br />
    City, State, Zip
  </p>
</address>

The <address> tag defines contact information for the author or owner of a document, such as an email address or physical address.

<blockquote>

<blockquote>
  <p>Quoted text...</p>
  <footer>Author Name</footer>
</blockquote>

The <blockquote> tag is used to indicate a block of quoted content from another source, helping to distinguish quoted text from regular content.

<cite>

<blockquote>
  <p>Quoted text...</p>
  <footer><cite>Source Title</cite></footer>
</blockquote>

The <cite> tag is used to denote the title of a creative work, such as a book, movie, or article, typically used in conjunction with <blockquote> or <q> tags.

<abbr>

<abbr title="World Wide Web">WWW</abbr>

The <abbr> tag defines an abbreviation or acronym, providing a semantic meaning to the abbreviated text and often used in combination with the title attribute to provide the full expansion of the abbreviation on hover.

These semantic tags help structure the content of a webpage in a meaningful way, making it easier for both developers and assistive technologies to understand and navigate the content.