Module 9: Semantic HTML and Page Layouts
Choosing Between Semantic Elements, div, and span
Know when a generic container is the right choice and when a more meaningful element is available.
The div and span elements are generic containers. They do not describe the content’s role by themselves. That is not a flaw; sometimes a generic wrapper is exactly what a design needs.
Use div for a generic flow container and span for a generic phrasing container. They are often used as CSS hooks or to group content for scripting.
<div class="product-card">
<h2>Field notebook</h2>
<p>Water-resistant pages for outdoor notes.</p>
<span class="price">₹399</span>
</div>
The outer div groups a card for styling. The heading, paragraph, and price still use elements that describe their content. If this card is a self-contained item in a collection, an article may be more appropriate. If the price is part of a table, a table cell may be the right structure.
Ask whether HTML already has an element for the content. If yes, use it. If not, use a generic container and give it a class or ID when needed. Do not add ARIA roles automatically; native HTML semantics are usually the most reliable starting point.