HTML Semantic Elements: A Comprehensive Guide
HTML semantic elements clearly describe their meaning in a way that both the browser and the developer can understand. They enhance the readability and accessibility of web pages. This guide explores various semantic elements, their purposes, and practical code examples.
What Are Semantic Elements?
Semantic elements are HTML elements that convey meaning about the content they contain. Unlike non-semantic elements like <div> and <span>, semantic elements provide a clear structure to the web page.
Common HTML Semantic Elements
<header>: Defines a header for a document or a section.
<nav>: Defines a container for navigation links.
<article>: Represents a self-contained piece of content.
<section>: Defines a section in a document.
<aside>: Defines content aside from the content it is placed in.
<footer>: Defines a footer for a document or a section.
<main>: Specifies the main content of a document.
<figure>: Specifies self-contained content, like illustrations or diagrams.
<figcaption>: Provides a caption for a<figure>element.
<time>: Represents a specific time or date.
Example: Using Semantic Elements
Let's create a simple webpage using semantic elements to demonstrate their usage.
HTML Code:
CODE
<!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 id="home">
<h2>Home</h2>
<p>This is the home section of the webpage.</p>
</section>
<section id="about">
<h2>About</h2>
<article>
<h3>About Us</h3>
<p>We are a company that values excellence and innovation.</p>
</article>
</section>
<section id="contact">
<h2>Contact</h2>
<aside>
<h3>Contact Information</h3>
<p>Email: [email protected]</p>
<p>Phone: 123-456-7890</p>
</aside>
</section>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Welcome to My Website
- Home
- About
- Contact
Home
This is the home section of the webpage.
About
About Us
We are a company that values excellence and innovation.
Contact
Contact Information
Email:
Vollständiger Original-Artikel
Den kompletten Beitrag mit allen Details direkt auf dev.to lesen.
SOCIAL SHARE CARD GENERATOR