Inline vs Block Tags — Demo

This page shows common block and inline HTML tags, their code, and the rendered output. Use it for learning or classroom demos.

1. Block tags (block elements)

Block elements start on a new line and take the full width available. Common block tags: <h1>–<h6>, <p>, <div>, <ul>, <ol>, <li>, <section>, <header>, <footer>, <nav>.

Output

A heading (block)

A paragraph — each block starts on a new line and stretches across.

A <div> (block)
Another <div> — always on its own line
Code 
<h3>A heading (block)</h3>
<p>A paragraph — each block starts on a new line and stretches across.</p>
<div>A div (block)</div>
<div>Another div — always on its own line</div>
Explanation: Block elements always start on a new line and by default take 100% width. You cannot put two block elements “side by side” without changing display (e.g. with Flexbox or inline-block).

2. Inline tags (inline elements)

Inline elements sit inside a line of text and do not force a new line. Common inline tags: <span>, <a>, <strong>, <em>, <code>, <img>, <br>.

Output

This is a red <span> inside a paragraph. Here is a link <a>, bold <strong>, and italic <em>.

Code 
<p>This is a <span style="color: #b91c1c; font-weight: 600">red span</span> inside a paragraph.
Here is a <a href="#">link</a>, <strong>bold</strong>, and <em>italic</em>.</p>
Explanation: Inline elements flow with the text. They do not start a new line and only take as much width as their content. You cannot reliably set width or height on inline elements (use inline-block if you need that).

3. More block tag examples

<ul>, <ol>, and <li> are block-level. So are <section>, <article>, <header>, <footer>.

Output
<header> (block)

A paragraph before the list.

  • <li> item one (block)
  • <li> item two (block)
Code 
<header>Header (block)</header>
<p>A paragraph before the list.</p>
<ul>
  <li>item one (block)</li>
  <li>item two (block)</li>
</ul>

4. More inline tag examples

<code> for code, <strong> and <em> for emphasis — all stay in the same line.

Output

Use console.log() to debug. Important: always close your tags.

Code 
<p>Use <code>console.log()</code> to debug. <strong>Important:</strong> always <em>close</em> your tags.</p>

5. Inline-block — changing display

CSS display: inline-block makes an element sit inline (like text) but accept width, height, and vertical alignment. Useful for buttons, cards in a row, etc.

Output
Box 1
Box 2
Box 3
Code 
<style>
.inline-box { display: inline-block; width: 120px; height: 72px; background: #fde68a; margin-right: 8px; }
</style>

<div class="inline-box">Box 1</div>
<div class="inline-box">Box 2</div>
<div class="inline-box">Box 3</div>
Explanation: These are <div>s (normally block). With display: inline-block they sit side by side but still respect width and height.

6. Quick test: change display

Click the buttons to change the display of the yellow boxes and see how layout changes.

Item A
Item B
Item C

Explanation: Same three <div>s — only display changes. block = stacked; inline-block = side by side with size; inline = in one line, size ignored.

7. Summary