Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<div> and<span> are generic HTML containers that carry no semantic meaning. They're used when no other element fits your needs better.
Div characteristics:
See how divs create block-level containers
<h2>Div Element Examples</h2>
<div class="demo-container">
<h3>What is a Div?</h3>
<div class="content-box">
<h4>Box 1: Header Section</h4>
<p>Divs are generic block containers. Each div takes full width and starts on a new line.</p>
</div>
<div class="content-box">
<h4>Box 2: Main Content</h4>
<p>Use divs for grouping sections of your page or creating layout containers.</p>
</div>
<div class="content-box">
<h4>Box 3: Sidebar</h4>
<p>Divs are versatile and work well for complex layouts.</p>
</div>
</div>
<div class="code-info">
<strong>📌 Key Point:</strong> Each div creates its own block-level space
</div>Loading preview...
Span characteristics:
See how spans style portions of text
<h2>Span Element Examples</h2>
<div class="demo-container">
<h3>What is a Span?</h3>
<p class="main-text">
A span is an inline element that
<span class="highlight-span">lets you style small portions</span>
of text or content
<span class="highlight-span">without breaking the flow</span>.
</p>
<p class="main-text">
You can use spans for
<span class="colored-span">different colors</span>,
<span class="bold-span">emphasis</span>,
<span class="underlined-span">highlighting</span>,
and more, all on the same line.
</p>
<p class="main-text">
Spans are perfect for styling individual words or phrases
<span class="background-span">without disrupting</span>
the paragraph structure.
</p>
</div>
<div class="code-info">
<strong>📌 Key Point:</strong> Spans stay on the same line with surrounding text
</div>Loading preview...
Direct comparison of both elements
<h2>Div vs Span: Direct Comparison</h2>
<div class="comparison">
<div class="comparison-section">
<h3><div> Elements</h3>
<div class="info-box">
<p><strong>Block element</strong></p>
<ul>
<li>Takes full width</li>
<li>New line before & after</li>
<li>For grouping sections</li>
</ul>
</div>
</div>
<div class="comparison-section">
<h3><span> Elements</h3>
<div class="info-box">
<p><strong>Inline element</strong></p>
<ul>
<li>Takes needed width</li>
<li>Flows with text</li>
<li>For styling text</li>
</ul>
</div>
</div>
</div>
<div class="code-info">
<strong>💡 Remember:</strong> Choose based on layout needs, not just styling
</div>Loading preview...
HTML5 introduced semantic elements that replace generic divs and spans with meaning. When possible, always use these instead:
Replace div and span with meaningful elements
<h2>Semantic Alternatives to Div & Span</h2>
<div class="demo-container">
<h3>Instead of <div>, use:</h3>
<div class="semantic-example">
<div class="code-label"><section></div>
<p>For thematic grouping of content</p>
</div>
<div class="semantic-example">
<div class="code-label"><article></div>
<p>For independent, self-contained content</p>
</div>
<div class="semantic-example">
<div class="code-label"><header>, <footer></div>
<p>For page or section headers/footers</p>
</div>
<h3>Instead of <span>, use:</h3>
<div class="semantic-example">
<div class="code-label"><strong></div>
<p>For important text that needs <strong>emphasis</strong></p>
</div>
<div class="semantic-example">
<div class="code-label"><em></div>
<p>For <em>emphasized text</em> or stress</p>
</div>
<div class="semantic-example">
<div class="code-label"><mark></div>
<p>For <mark>highlighted text</mark> or important bits</p>
</div>
</div>Loading preview...