In this chapter, we’ve explained HTML Structure and Semantic Elements in detail. Below is a complete example of a semantic HTML structure.
Try It Yourself
Understanding HTML Structure and Semantic Elements
Learn HTML Structure and Semantic Elements with clear and easy explanation.
✅ HTML Structure
An HTML document typically consists of the following structural components:
1. DOCTYPE Declaration:
The <!DOCTYPE> declaration specifies the HTML version being used. For modern websites, <!DOCTYPE html> is commonly used for HTML5.
Example
2. HTML Element (<html>):
It is the root element that wraps everything of the HTML document.
Example
<html lang="en"> <!-- Everything of HTLM document goes here --> </html>
3. Head Section (<head>):
Contains metadata, styles, links to external resources, and other non-visible elements of the page.
Example
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="styles.css"> </head>
4. Body Section (<body>):
Contains the visible content and structure of the webpage.
Example
<body> <!-- Visible content here --> </body>
✅ HTML Semantic Elements
Semantic elements clearly define their meaning and purpose, improving readability for both developers and search engines. These elements replace generic <div> or <span> tags for specific content types. Let's know about them.
1. Header (<header>):
It represents the introductory content or navigation links of a page.
Example
<header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </header>
2. Main (<main>):
Specifies the primary content of webpage. It should not contain repeated elements like sidebars or navigation links.
Example
<main> <article> <h2>Main Article</h2> <p>This is the core content of the page.</p> </article> </main>
3. Section (<section>):
It defines a thematic grouping of content, often with a heading.
Example
<section> <h2>Our Services</h2> <p>Details about services offered.</p> </section>
5. Aside (<aside>):
<aside> Contains content related to the main content but not essential, like sidebars or advertisements.
Example
<aside> <h3>Related Links</h3> <ul> <li><a href="#link1">Link 1</a></li> <li><a href="#link2">Link 2</a></li> </ul> </aside>
6. Footer (<footer>):
It represents the footer of a document or a section, often containing copyright, contact information, or navigation links.
Example
<footer> <p>© 2024 My Website</p> </footer>
7. Nav (<nav>):
It defines a navigation menu for the website.
Example
<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>
8. Figure and Figcaption (<figure>, <figcaption>):
These are used to group media content like images or illustrations, with captions.
Example
<figure> <img src="image.jpg" alt="Descriptive text"> <figcaption>Figure 1: Description of the image.</figcaption> </figure>
Benefits of Semantic HTML
Improved Accessibility: Assistive technologies like screen readers can better understand and navigate the content.
SEO Benefits: Search engines can easily parse semantic elements, improving search rankings.
Better Readability: Developers can quickly understand the structure and purpose of the content.
Future-Proof Code: Adhering to standards ensures compatibility with future web technologies.
