Hey there, Web Enthusiasts! 🎉
Today, let's talk about HTML5 Semantic Elements. Semantic elements are HTML tags that inherently carry meaning both for the browser and for the developer. Using them appropriately makes your code easier to read and accessible.
Common HTML5 Semantic Elements
Here are some of the widely-used semantic elements in HTML5:
-
<header>: The top area usually containing a logo, site title, and main navigation. -
<footer>: The bottom part of the page usually containing copyright info, social media links, etc. -
<article>: Represents a self-contained composition. -
<section>: A stand-alone section that should make sense on its own. -
<nav>: A section of a page that contains the navigation links.
Code Example
Here is a sample HTML layout using semantic elements:
<!DOCTYPE html>
<html>
<head>
<title>Semantic Elements</title>
</head>
<body>
<header>
<h1>My Cool Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>This is the about section.</p>
</section>
<article>
<h2>Blog Post Title</h2>
<p>This is a fantastic blog post.</p>
</article>
<footer>
<p>Copyright 2023, My Cool Website</p>
</footer>
</body>
</html>
As you can see, using these elements makes the code easier to understand compared to non-semantic elements like <div> and <span>.
Top comments (0)