HTML Tutorial
HTML Block and Inline
Block elements start on a new line. Inline elements sit in the flow of text.
Two kinds of elements
Every visible HTML element is either a block or an inline element by default. That choice decides how it sits on the page before you write any CSS.
- A block element starts on a new line and stretches across the available width.
- An inline element stays in the sentence. It only takes the width of its content.
Headings, paragraphs, lists, and div are blocks. A word of bold text, a link, and most images are inline. Open the live preview at /html/try and watch how each kind stacks or flows.
Block elements
Common block tags include div, p, h1 through h6,ul, ol, li, header, main, and section. Each one begins on its own line. The next block starts after it.
Example
<h1>Cafe menu</h1>
<p>Open today from 8 to 16.</p>
<ul>
<li>Espresso</li>
<li>Still water</li>
</ul>
<div>Kitchen note: sourdough is limited.</div>The heading, paragraph, list, and div do not sit on one line. The browser stacks them.
Inline elements
Common inline tags include span, a, strong, em,code, and img. They live inside a block and follow the text.
Example
<p>
Try the <strong>sourdough</strong> with
<a href="olive-oil.html">olive oil</a>.
Today only: <span>half price</span>.
<img src="bread.jpg" alt="A loaf of sourdough" width="80">
</p>The bold word, the link, the span, and the image stay in the paragraph. They do not force a new line the way a heading would.
img is inline by default. It sits in the text unless CSS or a wrapping block changes that.
A quick comparison
| Block | Inline | |
|---|---|---|
| Starts on a new line | Yes | No |
| Width | Full available width | As wide as the content |
| Typical tags | div, p, h1, ul | span, a, strong, img |
| May contain | Blocks and inline | Mostly other inline content |
| Use for | Sections, boxes, lists | A word, a link, a small image |
Do not put a block inside a p
A paragraph may contain inline tags. It must not contain another block. If you nest a div, a heading, a list, or another p inside a p, the browser closes the paragraph early and the page tree is wrong.
Example
<!-- Wrong: a block inside a paragraph -->
<p>Today's soup is tomato. <div>Ask for extra bread.</div></p>
<!-- Right: two blocks, one after the other -->
<p>Today's soup is tomato.</p>
<div>Ask for extra bread.</div>
<!-- Right: inline markup inside the paragraph -->
<p>Today's soup is <strong>tomato</strong>. <span>Ask for extra bread.</span></p>The invalid version may still “look fine” in a browser. That is the browser guessing. Validators and screen readers see a broken outline. Keep blocks next to each other, not inside p.
span for a word, div for a box
When no more specific tag fits, pick the generic one that matches the shape:
- Use
spanto mark a word or phrase inside a sentence. - Use
divto group a box of content that should start on a new line.
Example
<p>Hours: <span>Tuesday to Sunday, 8–16</span>.</p>
<div>
<h2>Takeaway</h2>
<p>Order at the counter. Ready in ten minutes.</p>
</div>The span does not change the layout. The div is a box you can later style as a card, a column, or a banner. The next chapter is that box in detail.
CSS can change the default
Block and inline are the default display. CSS can turn a span into a block or adiv into an inline box. Until you write CSS, trust the defaults in the table above.
Prefer the right tag first. Do not wrap every sentence in a div just to force a new line. A p already does that. Use span and div when no better tag exists.
Next: the div as a generic layout box, then classes to style groups of those boxes.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Engineering
A status word in a line of copy
Block boxes (p, h1, div) start on a new line and take the available width. Inline boxes (span, a, strong) sit in the text and only as wide as their content.
span is a hook for a word. div is a hook for a region. Do not wrap every sentence in a div. That is how pages become unreadable trees.
Example
<p>Logger:
<span style="color:#166534">ok</span>
— last packet 12 mT.
</p>
<div style="background:#e0f2fe;padding:0.6rem">Whole status card (block).</div>Physics
Unit sitting in the sentence
The unit A is inline. The reading is still one paragraph. Making the unit a div would throw the ampere onto its own line and look like a poster, not a sentence.
Example
<p>Current I = 0.45 <span>A</span></p>