Span and div
🔹 <span>
— Inline Container
·
Purpose: Used to group inline elements for styling or scripting (like CSS or
JavaScript).
·
Default Behavior: It does not break the line — it stays inline with surrounding
text.
·
Common Use: Ideal for styling a part of text inside a
paragraph, heading, etc.
✅ Example:
<p>This is
<span
style=
"color: red;">important
</span> text.
</p>
Here, only the word “important” will appear red, and the sentence stays on
the same line.
🔸 <div>
— Block-Level Container
·
Purpose: Used to group block-level content (like paragraphs, images, sections).
·
Default Behavior: It starts
on a new line and takes up the full width available.
·
Common Use: Ideal for layout structures, wrapping
sections, grouping larger chunks of content.
✅ Example:
<div
style=
"background-color: #f0f0f0; padding: 10px;">
<h2>About Me
</h2>
<p>I love vlogging and software development.
</p>
</div>