What is semantic elements in HTML?

Question

Ashutosh Patel · Answer

Semantic Elements in HTML

Semantic elements in HTML are elements that explicitly describe what they mean in a human-readable format. These features provide better structure and understanding of web pages, helping developers and browsers better understand content. Semantics makes HTML code easier to maintain and navigate and improves accessibility and SEO (Search Engine Optimization).

Examples of semantic Elements

<header> It represents the preamble or navigation link container. There are usually nicknames, logos, and other identifying features.

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

<nav> It defines the set of navigation links.

<nav>
   <ul>
       <li><a href="#home">Home</a></li>
       <li><a href="#services">Services</a></li>
       <li><a href="#contact">Contact</a></li>
   </ul>
</nav>

<section> Represents an independent section with no specific semantic element to represent it.

<section>
   <h2>Our Services</h2>
   <p>We offer a wide range of services to meet your needs.</p>
</section>

<article> It represents self-contained content that can be distributed independently from the rest of the web page or site.

<article>
   <h2>Latest News</h2>
   <p>Our company has just launched a new product...</p>
</article>

<aside> It has stories that are tangentially related to the surrounding stories. They are often used in parts.

<aside>
   <h3>Related Articles</h3>
   <ul>
       <li><a href="#article1">Article 1</a></li>
       <li><a href="#article2">Article 2</a></li>
   </ul>
</aside>

<footer> Define the footer for the document or section. This usually includes information about the author, copyright information, and links to relevant documents.

<footer>
   <p>© 2024 My Website</p>
   <p><a href="mailto:info@mywebsite.com">Contact Us</a></p>
</footer>

<main> Represents the main text of the document <body>. The document contains only one <main> element.

<main>
   <h1>Welcome to My Website</h1>
   <p>Here is the main content of the page.</p>
</main>

<figure> and <figcaption> The <figure> element represents self-contained objects, such as figures, diagrams, diagrams, code listings, etc., and the <figcaption> element represents text that written for <figure>

<figure>
   <img src="image.jpg" alt="An example image">
   <figcaption>An example image with a caption</figcaption>
</figure>

The use of semantic features improves the clarity and readability of an HTML document, making it easier for developers and devices (such as search engines and assistive technologies) to parse and understand its content

forum

What is semantic elements in HTML?

Can you answer this question?

1 Answers

Semantic Elements in HTML

Examples of semantic Elements