HTML Block and Inline

Tables taught you how cells share a grid. Now zoom out to the whole page: every element also follows a default display habit in normal flow. Beginners meet two big families — block and inline. Block boxes usually start on a new line and stretch across the available width. Inline pieces nest inside a line of text. Meaning tags still matter (p, a, strong); this lesson is about how those tags sit beside each other before you restyle them with CSS.

What “flow” means here

Flow is the browser’s default packing order when you have not yet written layout CSS. A paragraph is a block: the next sibling starts below it. A link is inline: it continues in the same sentence. Headings, lists, div, and table behave like block boxes by default. strong, em, span, and a behave like inline pieces. Replaced elements such as img are often described as inline-level in beginner docs even though their box model has special rules — treat them as “sit in the line” until you study CSS in depth.

Direct answer

Block-level elements typically begin on a new line and take the available width (p, div, h1–h6, ul, ol, section, table). Inline elements sit inside a line of text (a, strong, em, span, code). You will later change habits with CSS display, but first memorize the defaults so markup surprises you less. Choose tags for meaning first; use display knowledge to predict stacking versus in-line nesting.

Block boxes with inline pieces inside

A paragraph is a block container. Inside it, links and emphasis stay inline so the sentence still reads as one line (until it wraps naturally). A following div opens a new block box beneath. That mix — block outside, inline inside — is the most common beginner pattern on content pages.

Reading the paragraph sample

• The p is a block: it owns a full paragraph box
• a and strong stay in the reading line as inline pieces
• The div after the paragraph starts on a new line as another block
• You did not need CSS yet to see stacking versus nesting
• Href values and wording can change; the display habit stays the same
• If the link jumps to a new line alone, check whether you accidentally closed the p early

div versus span for grouping

Both div and span are generic wrappers with little built-in meaning. The practical difference for beginners is default display: div is block, span is inline. Wrap a whole section-like chunk that should break onto its own lines with div (or, better when you know them, semantic sectioning tags). Wrap a short phrase inside a sentence with span when you only need a hook for style or script later — not a new block.

Reading the div/span sample

• span keeps “includes tax” inside the paragraph line
• div forces the second note onto its own block row
• Class names are optional hooks; the display difference is the lesson
• Prefer real semantic tags when they fit (strong, em, a) before empty wrappers
• Later CSS can make a span look blocky — defaults still matter for unstyled markup
• Do not replace every semantic tag with div/span just because they are flexible

CSS can change display later

Browsers ship with default style sheets. Your CSS may set display: block, inline, inline-block, or modern layout modes like flex and grid. That is why a tutorial can show span { display: block; } and suddenly a phrase stacks like a paragraph. Learn defaults first so you recognize when CSS is overriding them. This course’s next sessions (div, classes, id) build hooks you will style; block versus inline is the map underneath.

Practice in your editor

1. Write two p elements with different sentences and confirm they stack.
2. Put two a links inside one paragraph and confirm they stay in the line.
3. Wrap one short phrase in span and the same phrase in div on a second try — compare the layout.
4. Add strong around one word inside a paragraph; confirm it does not force a new block line.
5. Temporarily wrap an entire paragraph’s text in an extra div inside the p only if your practice file allows it — or place a div beside the p — and note the extra block break.
6. Write one sentence under your demo listing three block tags and three inline tags you used.
7. Optional: open DevTools and glance at the computed display value for p versus a.

Easy mistakes

• Using div for every tiny phrase that should be span or a semantic tag
• Expecting strong or a to always start on a new line (they are inline by default)
• Forgetting that CSS display can override these defaults later
• Choosing tags only for looks (“I want a new line”) instead of meaning plus default flow
• Nesting block elements inside p incorrectly (invalid or surprising markup in many cases)
• Treating div/span as the only tools and ignoring p, lists, and headings you already know

Summary

• Block defaults: new line, available width (p, div, headings, lists, table)
• Inline defaults: continue inside the text line (a, strong, em, span)
• Mix them: block containers often hold inline pieces
• Prefer span for tiny in-line hooks; prefer meaningful tags when they fit
• CSS may change display later — memorize defaults first
• Next: deeper practice with div as a block container in the following session