Use the right HTML elements to structure content in an understandable way
<!-- Bad: divs without semantics -->
<div class="page-header">
<div class="site-title">My Site</div>
<div class="navigation">
<div>Home</div>
<div>About</div>
</div>
</div>
<div class="page-content">
<div class="content-title">Welcome</div>
<div>Main content...</div>
</div>
<div class="page-footer">
© 2025 My Site
</div>Main page content...
<!-- Good: semantic HTML elements -->
<header>
<div class="site-title">My Site</div>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome</h1>
<p>Main content...</p>
</main>
<footer>
<p>© 2025 My Site</p>
</footer>Explanation: A clear semantic structure helps screen readers navigate and understand content. Sectioning elements (header, nav, main, footer) create important landmarks.
Web accessibility is important...
Here are some techniques...
Semantic HTML...
Elements like header, nav...
CSS can improve...
<!-- Bad: divs with classes for styling -->
<div class="title-large">Introduction</div>
<p>Content...</p>
<div class="title-medium">Section 1</div>
<p>Content...</p>
<div class="title-medium">Section 2</div>
<p>Content...</p>
<div class="title-small">Subsection</div>
<p>Content...</p>Web accessibility is important...
Here are some techniques...
Semantic HTML...
Elements like header, nav...
CSS can improve...
<!-- Good: semantic headings hierarchy -->
<h1>Introduction</h1>
<p>Content...</p>
<h2>Basic techniques</h2>
<p>Content...</p>
<h3>Semantic HTML</h3>
<p>Content...</p>
<h4>Structure elements</h4>
<p>Content...</p>
<h3>CSS and accessibility</h3>
<p>Content...</p>Explanation: A logical heading hierarchy (h1 → h2 → h3) allows screen readers to create a navigation outline and users to understand the content structure.
<!-- Bad: clickable divs and spans -->
<div @click="handleSave" style="cursor: pointer;">
💾 Save
</div>
<div @click="handleDelete" style="cursor: pointer;">
🗑️ Delete
</div>
<span @click="navigateToProfile" style="cursor: pointer;">
👤 View profile
</span><!-- Good: buttons for actions, links for navigation -->
<button type="button" @click="handleSave">
💾 Save
</button>
<button type="button" @click="handleDelete">
🗑️ Delete
</button>
<a href="/profile">
👤 View profile
</a>
<button type="button" @click="toggleModal">
ℹ️ More info
</button>Explanation: Use the right elements for actions: buttons for actions, links for navigation. This ensures proper semantics and expected keyboard behaviors.
<!-- Bad: divs for lists -->
<div class="list-title">Ingredients:</div>
<div>3 eggs</div>
<div>2 tablespoons of milk</div>
<div>Salt and pepper</div>
<div class="list-title">Steps:</div>
<div>1. Beat the eggs</div>
<div>2. Heat the butter</div>
<div>3. Pour and cook</div><!-- Good: semantic ul and ol -->
<h3>Ingredients:</h3>
<ul>
<li>3 eggs</li>
<li>2 tablespoons of milk</li>
<li>Salt and pepper</li>
</ul>
<h3>Steps:</h3>
<ol>
<li>Beat the eggs with the milk</li>
<li>Heat the butter</li>
<li>Pour and cook</li>
<li>Fold in half and serve</li>
</ol>Explanation: Using appropriate list elements allows screen readers to announce the number of items and facilitate navigation.