? Introduction to HTML <div> and <span> Tags

⚡ Quick Overview

The <div> and <span> tags are general-purpose HTML containers used to group and style parts of a web page. The <div> tag is used for larger blocks or sections, while <span> is used for small inline pieces of text.

? Key Concepts

<div> is a block-level element — it starts on a new line and usually takes the full available width.
<span> is an inline element — it sits inside a line of text without breaking the flow.
Use <div> to group larger sections like headers, footers, sidebars, or content areas.
Use <span> to style or script small parts of text inside paragraphs or other inline content.
Both tags are often combined with CSS classes and IDs to apply reusable styles.

? Syntax and Theory

Basic syntax:

<div> ... </div> — wraps a block of content.
<span> ... </span> — wraps a small inline part of content.

Because <div> is block-level, the browser places it on its own line, stacking one block after another. In contrast, <span> behaves like text, so multiple spans can appear on the same line.

? View Code Example: Basic <div> and <span>

<!-- Block-level container -->
<div>
  <p>This is a paragraph inside a div block.</p>
  <p>Another paragraph inside the same div.</p>
</div>

<!-- Inline container -->
<p>
  This is a sentence with a
  <span style="color: red; font-weight: bold;">highlighted word</span>
  using span.
</p>

? Combined Example

Here is a slightly richer example that uses both <div> and <span> with inline styles to show how they affect layout and text flow.

? View Code Example: <div> and <span> Together

<!-- Block-level container -->
<div style="border: 2px solid #3399ff; padding: 15px; margin-bottom: 15px;">
  <p>This paragraph is inside a <div> block.</p>
  <p>Multiple elements can go inside a div.</p>
</div>

<!-- Inline container -->
<p>This sentence has a <span style="background-color: #ffdede; color: #b30000; 
font-weight: bold;">highlighted text</span> using span.</p>

? Live Output and Explanation

? How the browser renders it

This paragraph is inside a <div> block.

Multiple elements can go inside a div.

This sentence has a highlighted text using <span>.

Notice how the <div> creates a separate block with its own background and border, while the <span> only highlights a small part of the text without breaking the line.

? Tips & Best Practices

Use <div> for larger blocks or page sections like headers, main content, and footers.
Use <span> to style small parts of text inside a line without changing the layout.
Remember: <div> is block-level (new line), <span> is inline (same line).
Attach class or id to divs and spans instead of relying on inline styles, so your CSS stays reusable.
Prefer semantic tags like <header>, <section>, and <footer> when they make sense, and keep <div> as a generic fallback.

? Try It Yourself

Create a simple page layout using <div> for a header, main content area, and footer.
Inside a paragraph, wrap one word in a <span> and give it a different color and font weight.
Take a layout that uses only <div> and replace some with semantic tags like <section> or <article>.
Experiment with nesting a <span> inside a <div> to mix block layout and inline text styling.

? Summary

The <div> and <span> tags are fundamental building blocks for structuring and styling web pages. Use <div> to group larger blocks of content and control layout, and <span> to target small inline pieces of text. Combined with CSS classes and IDs, they give you precise control over how your page looks and behaves.

Div and Span Elements