Problem Statement
What are semantic HTML elements?
Explanation
Semantic HTML elements are tags whose names clearly describe their meaning and purpose to both developers and browsers. For example, header clearly indicates header content, article indicates an independent piece of content, and nav indicates navigation links. Semantic elements make your HTML more readable and meaningful compared to generic div and span tags. They help browsers, search engines, and assistive technologies understand the structure and purpose of your content. This improves accessibility for screen reader users, enhances SEO by giving search engines context, and makes code easier to maintain. Using semantic elements is considered best practice in modern web development and demonstrates professional coding skills.
Code Solution
SolutionRead Only
<!-- Semantic HTML (clear meaning) -->
<header>
<h1>Website Title</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
</main>
<footer>
<p>© 2024 Company</p>
</footer>
<!-- Non-semantic (no clear meaning) -->
<div class="header">
<div class="title">Website Title</div>
<div class="navigation">
<a href="/">Home</a>
</div>
</div>