div and span
When no semantic tag fits, use <div> and <span>. They are generic containers with zero semantic meaning — invisible to search engines. Use them only for CSS grouping.
div — Block Container
<div> is block-level: starts on a new line and takes full width. Use it to group multiple elements for CSS layout:
<div class="card"> <h3>HTML Lesson</h3> <p>Learn HTML from scratch.</p> </div> <div class="card"> <h3>CSS Lesson</h3> <p>Style your HTML pages.</p> </div>
HTML Lesson
Learn HTML from scratch.
CSS Lesson
Style your HTML pages.
span — Inline Container
<span> is inline: flows within text without line breaks. Use it to style part of a sentence:
<p>HTML was created in <span style="color:orange;font-weight:bold"> 1991 </span> by Tim Berners-Lee. </p> <p>Today <span style="color:#22c55e;font-weight:bold"> 1.9 billion </span> websites use HTML. </p>
HTML was created in 1991 by Tim Berners-Lee.
Today 1.9 billion websites use HTML.
When to Use div vs Semantic Tags
<header> not <div class="header"><nav> not <div class="nav"><article> not <div class="post"><div> — this is the correct use case<span>Using div for everything when semantic tags exist is called "divitis." It was common before HTML5. Modern employers and code reviews flag excessive div usage where semantic tags should be used instead.
Search engines completely ignore div and span. Every time you use a semantic tag instead of a div, you give Google one more signal about your content structure and intent.
div was in HTML from the very beginning as a generic grouping element. With CSS it became the primary layout tool throughout the 1990s and 2000s. HTML5 semantic elements replaced most layout divs but div remains essential for CSS grouping with no semantic role.