HTMLLesson 8 of 10Jump to practice

Block and inline, div and span

Learn how block and inline elements behave, and when to reach for the generic div and span.

Every element is either block or inline by default. It decides how the element sits on the page.

Block Inline
Starts on a new line? Yes No, it flows inside the line
How wide? The full width available Only as wide as its content
Examples <p>, <h1>, <ul>, <div>, <form> <a>, <strong>, <em>, <span>, <img>

Borders make this easy to see:

Block vs inline
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  p, div { border: 2px solid teal; }
  a, strong, span { border: 2px solid orange; }
</style>
</head>
<body>
<p>A paragraph is a block.</p>
<div>So is a div.</div>
<p>
  Inside this block there is a <a href="#">link</a>,
  some <strong>strong text</strong> and a <span>span</span>.
  They stay in the line.
</p>
</body>
</html>
Result

div and span: containers with no meaning

Most elements mean something: <h1> is a heading, <nav> is navigation. Sometimes you just need a box to style, with no special meaning. That’s what these two are for.

  • <div> is a generic block container. Use it to group several elements, like a card or a column.
  • <span> is a generic inline container. Use it to style a few words inside a sentence.
Styling with div and span
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    background: #f2f7f6;
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 320px;
  }
  .price { color: #b44a00; font-weight: bold; }
</style>
</head>
<body>
<div class="card">
  <h3>Honeycrisp apples</h3>
  <p>Today only: <span class="price">$2.99</span> a pound.</p>
</div>
</body>
</html>
Result

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Wrap the two paragraphs in a generic block container, so they can be styled as one card.

    < class="card">
  <p>Fresh apples from Boston.</p>
  <p>Delivered within two days.</p>
</>

  2. Exercise 2

    Wrap only the price in a generic inline container, so CSS can color it.

    <p>Today only: < class="price">$2.99</> a pound.</p>

Quiz: 3 questions

1. Which of these is a block element?
2. What do <div> and <span> look like on their own?
3. Two <span> elements sit next to each other in the code. How do they appear?

Finish the practice to complete this lesson.

Sign in to keep your progress on any device.