Semantic Tags

Semantic tags are the Self Explanatory tag in HTML5. Such tags themselves defines the meaning and purpose of the content they contain.

This increases the readability and maintainability of a page. It improves the SEO and helps the browser to navigate each element the webpage contains.

Semantic element has a proper name that indicates the nature of the content.

For instance: header, nav, article, footer, form, detail, main, section, footer and so on.

Let's create a simple html page that consists of the following tags:

 <body>
    <header>
      <div>
        <center>
          <h1>Company Name</h1>
          <nav>
            <a href="#">HOME</a>
            <a href="#">BLOG</a>
            <a href="#">ABOUT US</a>
            <a href="#">CONTACT US</a>
          </nav>
        </center>
        <hr />
      </div>
    </header>
    <article>
      <center>
        <h1>Tesla Founder Elon Musk</h1>
        <img src="https://images.unsplash.com/photo-1617704548623-340376564e68?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZWxvbiUyMG11c2t8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="elon musk photo"/>
        <h3>"The Visionary Entrepreneur Revolutionizing Innovation"</h3>
      </center>
        <hr>
        <p>
          Elon Musk is a name that needs no introduction in the world of technology and entrepreneurship. He is the CEO and co-founder of Tesla, SpaceX, Neuralink, and The Boring Company. His innovative ideas and futuristic concepts have revolutionized multiple industries, including electric vehicles, space exploration, and transportation.</p>

<p>Born in South Africa, Musk started his entrepreneurial journey in the 90s by founding web software company Zip2, which was later sold for almost $300 million. He then went on to co-found PayPal, which became a major player in the online payment industry.</p>

<p>In 2002, Musk founded SpaceX with the aim of making space travel more accessible and affordable. The company has achieved several milestones, including launching and landing reusable rockets and sending astronauts to the International Space Station. Musk's ultimate goal is to create a self-sustaining civilization on Mars.</p>

<p>In 2008, Musk founded Tesla, a company that has revolutionized the electric vehicle industry. Tesla's cars are known for their high performance, long-range capabilities, and innovative features. Musk's vision is to accelerate the world's transition to sustainable energy and reduce dependence on fossil fuels.</p>

<p>Musk's other ventures include Neuralink, a company working on developing brain-machine interfaces, and The Boring Company, which aims to revolutionize transportation by building underground tunnels for high-speed travel.</p>
        </p>
        <h4> Elon Musk is associated with several companies, including Tesla, SpaceX, Neuralink, and The Boring Company. As of my knowledge cut-off date of September 2021, the valuations of these companies were as follows:</h4>
        <table border cellspacing="6px" cellpadding="4px">
         <thead>
          <tr>
            <th>
              Sr.no
            </th>
            <th>
              Companies
            </th>
            <th>
              Valuation
            </th>

          </tr>
         </thead>
         <tbody>
          <tr>
            <td>1.</td>
            <td>Tesla</td>
            <td>$758 billion USD.</td>

          </tr>
          <tr>
            <td>2.</td>
            <td>SpaceX</td>
            <td>$74 billion</td>

          </tr>
          <tr>
            <td>3.</td>
            <td>Neuralink</td>
            <td>$500M to $1B</td>

          </tr>
          <tr>
            <td>4.</td>
            <td>Boring Company</td>
            <td>$1B to $10B</td>

          </tr>
         </tbody>
        </table>

    </article>
    <hr>

      <fieldset>
        <legend> Write Comments</legend>
        <form>
        <label for="name">NAME:</label>
        <input type="text" id="name" name="user name">
        <br><br>
        <label for="email">EMAIL:</label>
        <input type="email" name="user email" id="email">
        <br><br>
        <label for="comment">Comment:</label>
        <textarea id="comment" name="user comment"></textarea>
        <br><br>
        <input type="button" value="SUBMIT">
      </form>
      </fieldset>
      <hr>
      <footer>
        <h2>COMPANY NAME</h2>
        <h3>Essential links</h3>
        <nav>
          <a href="#">HOME</a>
          <a href="#">BLOG</a>
          <a href="#">ABOUT US</a>
          <a href="#">CONTACT US</a>
        </nav>
        <hr>
        <center>
        <strong >Copyright ©  2010-2023 Devbytes. All rights reserved.</strong>
      </center>   
       </footer>

  </body>

Output:

This is an example of a Blog page with a header, main body and footer as well as other semantic tags mentioned above.

What are Semantic Tags In HTML?

Subscribe to my newsletter

Devyansh

Devyansh