HTML Block & Inline

How elements flow on the page.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Every element has a default display value: block or inline.

Block-level elements

They always start on a new line and take up the full width available. Examples: <div>, <p>, <h1>, <ul>, <table>, <form>.

Inline elements

They do not start on a new line and only take as much width as needed. Examples: <span>, <a>, <strong>, <img>, <button>.

An inline element cannot contain a block-level element.

Key Takeaways: HTML Block & Inline

Mastering HTML Block & Inline helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Block & Inline Code Example

HTML

<div style="background: #DBEAFE; padding: 6px;">A div is block-level: full width.</div>
<p style="background: #CCFBF1;">A paragraph is block-level too.</p>

<p>Inline elements like
  <span style="background: #FEF08A;">this span</span> and
  <a href="#">this link</a>
  stay inside the line.</p>

Free sign-in required · Google login available

HTML Block & Inline Practice Exercises

Check what you learned in “HTML Block & Inline”.

/ 3 solved

Fill in the blank

Use the generic inline container.

<p>My eyes are < style="color:blue">blue</>.</p>

✓ Correct! Not quite. Try again.

Multiple choice

Which element is block-level?

✓ Correct! Not quite. Try again.

Code challenge

Wrap the word "teal" in a <span> with the style color: teal.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services