Lecture 4: HTML Grouping - Div & Span

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-01-29

Lecture 4

HTML Grouping: Div & Span

Week 1 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand the difference between block and inline elements
  • Learn when and how to use <div> and <span>
  • Practice grouping and organizing HTML content

Block-level vs Inline Elements

Block-level

  • Start on new line
  • Take full width
  • Stack vertically
  • Examples: <div>, <p>, <h1>

Inline

  • Flow with text
  • Only take needed width
  • Sit side-by-side
  • Examples: <span>, <a>, <strong>

Block vs Inline Visual Difference

Block Element:

<div>Block 1</div>
<div>Block 2</div>

Inline Element:

<span>Inline 1</span>
<span>Inline 2</span>
Block 1
Block 2

Inline 1 Inline 2

The <div> Element

Generic block-level container

  • Used to group content for styling/layout
  • No semantic meaning (unlike <section>, <article>)
  • Can contain any HTML elements
  • Most important layout tool before CSS Flexbox/Grid

Example:

<div class="header">
    <h1>Website Title</h1>
    <p>Your tagline here</p>
</div>

The <span> Element

Generic inline container

  • Used to apply styles to text portions
  • Doesn’t create line breaks
  • Perfect for highlighting specific words
  • Allows targeting with CSS classes

Example:

<p>Price: <span class="highlight">$99</span> today!</p>

Using <div> for Page Layout

HTML Code:

<div class="container">
  <div class="header">
    <h1>Website</h1>
  </div>
  
  <div class="content">
    <p>Main content</p>
  </div>
  
  <div class="sidebar">
    <h3>Posts</h3>
  </div>
  
  <div class="footer">
    <p>&copy; 2026</p>
  </div>
</div>

Visual Result:

Website
<div style="flex: 1; background: #e8f4f8; padding: 10px; border: 1px solid #0088cc;">
  <strong>Main Content</strong><br>
  <small>This takes up most space</small>
</div>

<div style="width: 120px; background: #fff4e6; padding: 10px; border: 1px solid #ff9800;">
  <strong>Posts</strong><br>
  <small>Sidebar</small>
</div>
Footer &copy; 2026

Using <span> for Text Styling

HTML & CSS:

<style>
  .red-text { color: red; font-weight: bold; }
  .large { font-size: 20px; }
</style>

<p>Price: <span class="red-text large">$99</span></p>

<p>Call <span style="font-weight: bold; color: #0088cc;">1-800-HELP</span></p>

Rendered Output:

Price: $99

Call 1-800-HELP

Key Point: Span doesn’t create new lines - it flows inline with text!

Nesting Divs and Spans

HTML Structure:

<div class="article">
  <div class="article-header">
    <h2>Web Design Tips</h2>
    <span class="date">Jan 29</span>
  </div>
  <div class="article-body">
    <p>Keep design <span class="bold">clean</span></p>
  </div>
</div>

Rendered Output:

<h2 style="margin: 5px 0;">Web Design Tips</h2>
<span style="font-size: 12px;">Jan 29</span>
<p style="margin: 0;">Keep design <span style="font-weight: bold; color: #ff6b6b;">clean</span></p>

Warning

Nesting is powerful but keep it reasonable (3-4 levels max)

Semantic HTML5 Alternatives

Instead of generic <div>, use semantic elements:

<header> - Page/section header area

<nav> - Navigation links

<main> - Main content area

<section> - Thematic grouping

<article> - Self-contained content

<aside> - Sidebar or supplementary content

<footer> - Page/section footer

Good Semantic Structure

<header>
    <h1>Website Title</h1>
    <p>Tagline</p>
</header>
<nav><!-- Navigation links --></nav>
<main>
    <article><!-- Blog post --></article>
    <article><!-- Another post --></article>
</main>
<footer>
    <p>&copy; 2026</p>
</footer>

When to Use <div> vs <span>

Use <div>

  • Grouping blocks
  • Layout containers
  • Multiple elements
  • Full width sections

Use <span>

  • Text styling
  • Small portions
  • Inline content
  • Highlighting words

⭐ Prefer semantic elements when appropriate!

Best Practices for HTML Grouping

Tip

✓ DO USE: - Semantic HTML5 elements (<header>, <nav>, <article>, <footer>) - Meaningful class names for styling - Reasonable nesting (3-4 levels max) - Proper indentation for readability

Warning

✗ DON’T USE: - <div> for everything without semantic alternatives - Deeply nested divs (5+ levels) - Generic names like <div class="wrapper"> - Mixed semantic and non-semantic structure

Real-world Example: Blog Post

Semantic HTML:

<article>
  <header>
    <h2>Modern Web Design</h2>
  </header>
  <div class="post-meta">
    <span class="author">John</span>
    <span class="date">Jan 29</span>
  </div>
  <div class="post-content">
    <p>Design evolves...</p>
  </div>
  <footer>
    <span class="tags">Design</span>
  </footer>
</article>

Visual Rendering:

Modern Web Design 

<span style="font-weight: bold; color: #0088cc;">John</span>
<span style="color: #999; margin-left: 10px; font-size: 12px;">Jan 29</span>
<p style="margin: 0; color: #333;">Web design continuously evolves with new technologies and trends.</p>
Design

Practice Exercise

Create a page structure with:

  1. A <header> with your name
  2. A <nav> with menu links
  3. A <main> containing articles
  4. Several <article> elements with content
  5. Use <span> to highlight important words
  6. A <footer> with copyright
  7. Meaningful class names for styling

Resources & References

Questions?

Week 1 Complete!
Lab 1: Development Environment Setup