forum

Home / DeveloperSection / Forums / What is semantic elements in HTML?

Ask Question

What is semantic elements in HTML?

Harry20006-Jun-2024

What is semantic elements in HTML?

htmlhtml html5 
Updated on 14-Jun-2024
Harry

Harry

Follow
Harry Smith is a passionate and versatile content writer with a knack for turning words into compelling stories. With a keen eye for detail and a deep love for the written word, Harry crafts content that not only informs but also engages and captivates readers.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

14-Jun-2024

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

MindStick Training

Liked By