Show List
Tutorials > HTML > HTML Semantic elements

HTML Semantic elements

HTML semantic elements are elements that have a specific meaning and convey that meaning to both the browser and the developer. These elements allow for a more meaningful structure to be given to a web page, making it easier for both humans and computers to understand the purpose and content of the page. Here are some examples of HTML semantic elements:

  1. <header>: This element is used to define the header of a web page, which typically contains the logo, main navigation, and other important information. For example:
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
  1. <nav>: This element is used to define a section of a web page that contains navigation links. For example:
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
  1. <main>: This element is used to define the main content of a web page, and it should be unique to the document. For example:
<main>
  <h1>Welcome to My Website</h1>
  <p>Here you will find information about my services and how to contact me.</p>
</main>
  1. <article>: This element is used to define a self-contained piece of content, such as a blog post or news article. For example:
<article>
  <h2>My Blog Post</h2>
  <p>This is my first blog post and I am excited to share it with you.</p>
</article>
  1. <section>: This element is used to define a section of a web page that contains related content, such as a chapter of a book. For example:
<section>
  <h2>About Me</h2>
  <p>I am a web developer and I love to create websites and web applications.</p>
</section>
  1. <aside>: This element is used to define content that is tangentially related to the main content of a web page, such as a sidebar. For example:
<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Another Website</a></li>
    <li><a href="#">Yet Another Website</a></li>
  </ul>
</aside>
These are just a few examples of HTML semantic elements, and there are many more available. By using these elements, you can create a more meaningful and accessible structure for your web pages.


Next: Quiz - HTML - 1

    Leave a Comment

  • captcha text