HTML Semantic Elements: Writing Meaningful HTML
Semantic HTML uses tags that describe their meaning, not just their appearance. Instead of using generic Screen readers and assistive technologies rely on semantic HTML to navigate and understand web pages. A Search engines use semantic structure to understand your content better. Proper use of headings, articles, and sections helps Google index your pages more effectively. Semantic code is easier to read and maintain. When you see Defines introductory content for a page or section: Contains navigation links: The primary content of the document (only one per page): This is the main content of the page. Self-contained, independently distributable content: Posted on Article content goes here... A thematic grouping of content with a heading: Our product offers amazing features... Content tangentially related to surrounding content (sidebars): Closing content for a page or section: For images with captions: For quotations: "The only way to do great work is to love what you do." For dates and times: For contact information: Here's a properly structured semantic HTML page: By John Doe on Article introduction text... Article main content... Try building a semantic HTML page in ProLiveEditor and see how the structure improves your code!Why Use Semantic HTML?
1. Accessibility
element tells users "this is navigation" without needing additional labels.2. SEO Benefits
3. Maintainability
, you immediately understand its purpose — unlike a generic Document Structure Elements
header
Site Title
nav
main
Page Title
article
Blog Post Title
section
Features
aside
footer
Text Content Elements
figure and figcaption
blockquote
time
address
Contact us at info@example.comComplete Page Example
My Blog
Blog Post Title
Introduction
Main Content
Best Practices