HTML Semantic Elements with examples

HTML5 for Free | HTML5 – Unleashing the Potential of Web Development

About Lesson

Certainly! Here are some examples of HTML semantic elements along with their usage:

<header>:

   <header>
     <h1>My Website</h1>
     <nav>
       <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/about">About</a></li>
         <li><a href="/contact">Contact</a></li>
       </ul>
     </nav>
   </header>

In this example, the <header> element contains the website’s title and a navigation menu.

<nav>:

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

The <nav> element represents a section that contains navigation links.

<main>:

   <main>
     <h1>Welcome to My Website!</h1>
     <p>This is the main content of the webpage.</p>
   </main>

The <main> element represents the main content of a webpage.

<article>:

   <article>
     <h2>Blog Post Title</h2>
     <p>Content of the blog post...</p>
     <p>More content...</p>
   </article>

The <article> element represents a self-contained composition, such as a blog post.

Use CSS to style the element:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

<section>:

   <section>
     <h2>About Us</h2>
     <p>Information about the company...</p>
   </section>

The <section> element represents a generic section of content within a document.

<aside>:

   <aside>
     <h3>Related Links</h3>
     <ul>
       <li><a href="/blog">Blog</a></li>
       <li><a href="/resources">Resources</a></li>
     </ul>
   </aside>

The <aside> element represents content that is tangentially related to the main content.

<footer>:

   <footer>
     <p>© 2023 My Website. All rights reserved.</p>
   </footer>

The <footer> element represents the footer or closing content of a webpage.

These examples demonstrate how semantic elements can be used to structure and describe different parts of a webpage, making it more meaningful and accessible. By using these elements appropriately, you can enhance the readability, structure, and semantics of your HTML code.

Join the conversation