Div and Span: Block and Inline Elements

Laying Out a Newspaper Page

Open any newspaper and look at how the front page is arranged. The big masthead sits across the top. Below it, the page is cut into columns, and each news story sits in its own rectangle: a headline, a few paragraphs, maybe a photo. Inside the sentences, some words stand out: a price in bold red, a key number in a box.

A designer works with two kinds of tools here. Boxes that hold a whole story, and a marker pen for a few words inside a line. HTML has the same two tools: <div> is the box and <span> is the marker pen.

Neither tag changes how text looks on its own. They are empty containers that you label with a class and then style with CSS. In this lesson you will build the front page of a city newspaper, The City Herald, with them.

Block and Inline: Two Ways Elements Behave

Before you meet <div> and <span>, you need one idea that explains much of HTML layout. Every element is either block or inline by default.

The easiest way to see this is to draw a border around each element. Run this example. Blue borders are block elements, red borders are inline:

<h2 style="border: 2px solid blue;">A heading is block</h2>
<p style="border: 2px solid blue;">A paragraph is block too.</p>
<div style="border: 2px solid blue;">A div is block.</div>

<p>
  <span style="border: 2px solid red;">A span is inline,</span>
  <strong style="border: 2px solid red;">strong is inline,</strong>
  <a href="#" style="border: 2px solid red;">and a link is inline.</a>
</p>

Each blue box stretches across the whole width and starts on its own line. The red boxes sit side by side inside one line and are only as wide as their words.

Small style attributes in this lesson: the examples use style="..." and short <style> blocks only to make the boxes visible. You met the style attribute in the Attributes lesson. You will learn CSS properly in the CSS lessons, starting with What is CSS.

div: A Box for Grouping

<div> (short for division) is a block element with no meaning of its own. Its job is to group other elements into one box, so you can style or move them together. Here one news story, a heading and two paragraphs, is grouped inside a div with a border:

<div style="border: 1px solid gray; padding: 12px;">
  <h2>Heavy Rain Expected This Weekend</h2>
  <p>The weather office has asked people in coastal areas to stay alert.</p>
  <p>Schools in three districts will remain closed on Monday.</p>
</div>

<p>This paragraph is outside the box.</p>

Without the div, you would have to add the border to each element separately, and you would get three small boxes instead of one story box.

span: Marking Part of a Line

<span> is the inline partner of the div. It also has no meaning and no look of its own. Use it to wrap a few words inside a sentence, so you can style just those words. The sentence stays on one line, because span is inline:

<p>The price of onions rose to
<span style="color: crimson; font-weight: bold;">₹60 per kg</span>
in the city market this week.</p>

<p>Match report: India won by
<span style="background: lightgreen;">6 wickets</span> with 2 overs to spare.</p>

If you used a div here instead, “₹60 per kg” would jump onto its own line and break the sentence apart.

Should a highlight use <span> or <mark>? Ask yourself whether the words have a meaning that matters. If they are highlighted because they are relevant, like a search result, use <mark> from the Text Formatting lesson. If it is only decoration, use <span>.

Adding a class to div and span

Writing style="..." on every element gets messy fast. A newspaper has dozens of story boxes and they should all look the same. The better way is to give each element a class name and write the style once, in a <style> block in the head. Then every element with that class gets the same look:

<style>
  .story {
    border: 1px solid #999;
    padding: 10px;
    margin-bottom: 12px;
  }
  .highlight {
    background: #fff3a0;
    font-weight: bold;
  }
</style>

<div class="story">
  <h3>New Metro Line Opens</h3>
  <p>The new line will cut travel time to <span class="highlight">25 minutes</span>.</p>
</div>

<div class="story">
  <h3>College Fest Next Week</h3>
  <p>Entry is <span class="highlight">free for all students</span> with an ID card.</p>
</div>

In the <style> block, a dot before a name, like .story, means “every element with class="story"”. Change the border colour in one place and both boxes update. This is how real websites are built.

Choose class names that describe what the thing is, like story, price or highlight, not how it looks, like red-box. If you later change the colour to blue, the name still makes sense.

When a Semantic Tag Is Better Than a div

A div says nothing about its content. Look at this page built only from divs. It works, but a screen reader or a search engine cannot tell the newspaper title from a news story:

<div class="top">
  <div class="title">The City Herald</div>
</div>
<div class="news">
  <div class="headline">New Metro Line Opens</div>
  <div class="text">Travel time drops to 25 minutes.</div>
</div>

HTML has semantic tags, tags whose names describe their content. They are block elements just like div, but they carry meaning:

<header>
  <h1>The City Herald</h1>
</header>

<main>
  <article>
    <h2>New Metro Line Opens</h2>
    <p>Travel time drops to 25 minutes.</p>
  </article>

  <section>
    <h2>Sports</h2>
    <p>Our city team reached the state final.</p>
  </section>
</main>

The rule is simple: use a semantic tag if one fits; use a div only when none does. A div is perfect for boxes that exist only for layout, like the row that holds the columns in the example below. You will study these tags in depth in the Semantic HTML lesson.

Real-Life Example: The City Herald Front Page

Here is the front page. The masthead is a <header>, each news story is an <article>, and a plain <div class="columns"> holds them side by side, because “a row of columns” is pure layout with no meaning. Spans mark the important words and prices.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The City Herald</title>
  <style>
    .masthead {
      text-align: center;
      border-bottom: 3px double black;
    }
    .columns {
      display: flex;
      gap: 16px;
    }
    .column {
      flex: 1;
      border: 1px solid #ccc;
      padding: 10px;
    }
    .highlight {
      background: #fff3a0;
    }
    .price {
      color: crimson;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <header class="masthead">
    <h1>The City Herald</h1>
    <p>Monday edition</p>
  </header>

  <div class="columns">
    <article class="column">
      <h2>Metro Line Opens</h2>
      <p>The new line joins the railway station to the IT park.
      Travel time drops to <span class="highlight">25 minutes</span>.</p>
      <p>A single ticket costs <span class="price">₹30</span>.</p>
    </article>

    <article class="column">
      <h2>Rain Alert</h2>
      <p>Heavy rain is expected this weekend.
      <span class="highlight">Schools stay closed on Monday</span>
      in three districts.</p>
    </article>
  </div>
</body>
</html>

The two lines display: flex; and flex: 1; place the stories next to each other in equal columns. Do not worry about them now: you will learn exactly how they work in the CSS Flexbox lesson.

Try these changes, one at a time, and press Run after each:

1. Copy one whole <article class="column">...</article> and paste it to make a third column about sports.
2. Wrap a score like “245 runs” in <span class="highlight">.
3. Change the .highlight background colour and see every highlight change together.

Common Mistakes (and How to Fix Them)

• “Div soup”: using div for everything. Pages built only from divs are hard to read and confusing for screen readers. Fix: use <header>, <article>, <section>, <p> and headings first, and divs only for layout boxes.
• Using a div where a paragraph belongs. <div>Some text</div> looks like a paragraph but is not one. Fix: text goes in <p>.
• Putting a block inside an inline element. A <div> or <p> inside a <span> is not valid HTML. Fix: block elements can hold inline ones, not the other way round.
• Using span to make text bold or important. A span with bold style has no meaning. Fix: if the words are important, use <strong>; use span only for decoration.
• Forgetting the closing </div>. Everything after it ends up inside the box. Fix: indent your code so that each <div> lines up with its </div>.

Practice Task: A School Notice Board

Turn the plain notices below into a notice board with a separate box for each notice and coloured dates. Complete the four TODO steps:

• Write a .notice class with a border and some padding
• Write a .date class with a colour and bold text
• Wrap each notice, heading and paragraph together, in a <div class="notice">
• Wrap each date in a <span class="date">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>School Notice Board</title>
  <style>
    /* TODO 1: Add a .notice class with a border and padding */

    /* TODO 2: Add a .date class with a colour and bold text */
  </style>
</head>
<body>
  <h1>School Notice Board</h1>

  <!-- TODO 3: Put each notice (heading + paragraph) inside a div with class "notice" -->
  <h2>Annual Day</h2>
  <p>Annual Day will be held on 14 December in the school hall.</p>

  <h2>Library Books</h2>
  <p>Return all library books by 30 November.</p>

  <!-- TODO 4: Wrap each date in a span with class "date" -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>School Notice Board</title>
  <style>
    .notice {
      border: 2px solid teal;
      padding: 10px;
      margin-bottom: 12px;
    }
    .date {
      color: darkred;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>School Notice Board</h1>

  <div class="notice">
    <h2>Annual Day</h2>
    <p>Annual Day will be held on <span class="date">14 December</span> in the school hall.</p>
  </div>

  <div class="notice">
    <h2>Library Books</h2>
    <p>Return all library books by <span class="date">30 November</span>.</p>
  </div>
</body>
</html>

Key Takeaways

• Block elements start on a new line and take the full width. Inline elements sit inside a line.
• <div> is a block box for grouping elements. <span> is an inline wrapper for a few words.
• Neither tag has meaning or style of its own. Give them a class and style them with CSS.
• Name classes by what things are (story, price), not how they look.
• Prefer semantic tags like <header>, <article> and <section>. Use div when no semantic tag fits.