Inline vs Block Elements

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Demonstrate the difference between block and inline elements using pure HTML. Show that block elements start new lines while inline elements flow within text without breaking layout, and explain the difference in a short summary section.

Solution

Overview

This task demonstrates default display roles using HTML only. Block elements like paragraphs start on new lines and take full width, while inline elements like strong and img flow within a line. The markup should make the difference obvious without any CSS edits or extra wrappers.

Approach 1 – Minimal demo with semantic structure

Create two paragraphs in main. In the second paragraph, include a strong word and an inline img so they sit in the same line. Add a short explanation section that explicitly states which tags are block and which are inline, using code tags or escaped text to show the element names.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        Inline vs Block
      </title>
    </head>
    <body>
      <h1>
        Inline vs Block
      </h1>
      <main>
        <p>
          This is the first paragraph. It is a block-level element by default.
        </p>
        <p>
          Here is a second paragraph with a
          <strong>
            bold
          </strong>
          word and an inline image
          <img alt='Demo image' src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2250%22%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22%23ddd%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2212%22%3EIMG%3C/text%3E%3C/svg%3E' />
          in the same line.
        </p>
      </main>
      <section id='explanation'>
        <h2>
          Explanation
        </h2>
        <p>
          <code>

&lt;p&gt;

</code>
          is block-level (starts on a new line).
          <code>

&lt;strong&gt;

</code>
          and
          <code>

&lt;img&gt;

</code>
          are inline by default (they flow within a line of text).
        </p>
      </section>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}
main {
  display: block;
}
img {
  vertical-align: middle;
}

Notes & Pitfalls

Pitfalls

Don’t put block elements inside a <p> (a paragraph cannot contain other block-level sections).
If you want to show tag names as text, escape them (e.g. <p>) or wrap in <code>.

Techniques

Keep <strong> and <img> inside the same paragraph to demonstrate inline flow.
Use <main> as a clean landmark; keep #explanation separate so it’s easy to read and test.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep