In HTML, semantics refers to using HTML tags that clearly describe their meaning in a human- and machine-readable way. Semantic HTML elements make your web content more understandable and accessible to both browsers and developers. They help search engines and other user devices determine the importance of the content.
Semantic HTML elements clearly describe their meaning in a readable way, both to the browser and the developer. For example, elements like <header>
, <footer>
, <article>
, and <section>
describe parts of a webpage and their intended meaning. Using semantic elements helps to make web pages more accessible and SEO-friendly.
Here is a list of some common semantic HTML tags and their uses:
<header>
- Represents the header section of a webpage or a section. Usually contains logo, navigation, and other introductory content.<footer>
- Represents the footer section, usually containing copyright information, links to privacy policy, contact info, etc.<article>
- Represents an independent, self-contained piece of content, like a blog post or a news article.<section>
- Represents a section of content in the document, often used to group related content together.<nav>
- Represents a section of navigation links, typically used for site navigation menus.<aside>
- Represents content tangentially related to the content around it, like sidebars or related links.<main>
- Represents the main content of a document, excluding header, footer, and navigation.<figure>
- Represents content like images, charts, or illustrations that are referenced from the main content.<figcaption>
- Provides a caption or description for the content inside the <figure>
element.<mark>
- Highlights a portion of text to show importance or relevance.<!DOCTYPE html> <html> <head> <title>Semantic HTML Example</title> </head> <body> <header> <h1>Welcome to 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> <main> <section> <article> <h2>Article Title</h2> <p>This is an example article. It is a self-contained piece of content.</p> </article> </section> </main> <footer> <p>© 2025 My Website. All rights reserved.</p> </footer> </body> </html>
Semantic HTML is an essential part of building accessible and SEO-friendly websites. By using semantic elements like <header>
, <footer>
, <article>
, and others, you can make your website more readable, structured, and easily understood by both humans and search engines.
Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!