Skip to main content
Practice

Semantic Tags

Using semantic tags in an HTML document helps clarify the meaning of the content.

"Semantic" means having a meaning; it allows you to clearly distinguish parts like the header, main content, and footer.

Using semantic tags helps search engines understand the meaning of your page, which is beneficial for search engine optimization (SEO) and improving web accessibility.

The key semantic tags are listed below.


<header> Tag​

The <header> tag represents the header of a webpage, which typically includes the logo, navigation menu, and the company name.


Example​

header tag example
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

The <footer> tag is used for the footer of a webpage, generally containing copyright information, links, and author details at the bottom of the site.


Example​

footer tag example
<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms of Service</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</footer>


The <nav> tag is used to display navigational links to other pages, usually within the header tag.


Example​

nav tag example
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section> Tag​

The <section> tag is used for thematically grouping content on a page. Examples include contact sections, about sections, and news sections.


Example​

section tag example
<section id="about">
  <h2>About</h2>
  <p>Welcome to our website!</p>
</section>

<article> Tag​

The <article> tag defines a piece of content that's independently readable and reusable like blog posts, news stories, and user comments.


Example​

article tag example
<article>
  <h2>Event News</h2>
  <p>Information about our upcoming event.</p>
</article>

<main> Tag​

The <main> tag is used for the main content of a webpage.


Example​

main tag example
<main>
  <h1>Welcome!</h1>
  <p>Thank you for visiting our website.</p>
</main>

<aside> Tag​

The <aside> tag is used for ancillary content, usually displayed in a sidebar, to provide additional information, such as related links or extra content outside the main content area.


Example​

aside tag example
<aside>
  <h2>Announcements</h2>
  <p>Check out our Events!</p>
  <div>
    <a href="#">Learn more about the event</a>
  </div>
</aside>

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.