Latest News
This is a news article that you can read in full.
This is the main content area.
About Us
We are a company focused on providing the best products.
Go Back Course Outline
Using
Using
Html5 Full Course
HTML5 Structural Elements
HTML5 Structural Elements
1. Semantic HTML5 Elements
Explanation: Semantic HTML refers to using HTML elements that convey meaning about the content they contain. Using semantic tags improves accessibility, helps search engines understand your content, and makes your code more readable and maintainable.
Structural Elements in HTML5:
- <header>: Represents introductory content or navigational links.
- <footer>: Represents the footer of a document or section.
- <main>: Represents the primary content of the document.
- <article>: Represents independent content like a blog post or news article.
- <section>: Represents a section of content.
- <aside>: Represents content that is related but not essential to the main content (e.g., sidebar).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML5 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 id="about">
<h2>About Us</h2>
<p>We are a company focused on providing the best products.</p>
</section>
<article>
<h2>Latest News</h2>
<p>This is a news article that you can read in full.</p>
</article>
<aside>
<h3>Related Information</h3>
<p>Check out our blog for more related articles.</p>
</aside>
</main>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>Output:
Welcome to My Website
2. Grouping Content
Explanation: Before HTML5, <div> and <span> were widely used for grouping content. However, for better semantics, you should prefer HTML5 structural elements over <div> and <span> when possible.
The role of <figure> and <figcaption>: These elements are used for grouping images and their captions together.
Using <div> and <span> for Layout
<div class="container">
<div class="header">
<h1>Welcome to My Website</h1>
<span class="subtitle">Your source for news</span>
</div>
<div class="content">
<p>This is the main content area.</p>
</div>
</div>Output:
Welcome to My Website
Your source for newsUsing <figure> and <figcaption> for Images
<figure>
<img src="image.jpg" alt="A beautiful sunset">
<figcaption>This is a picture of a beautiful sunset at the beach.</figcaption>
</figure>Output: