Platform under construction

HTML Layout

Intermediate

Block & Inline

Learn Block & Inline with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.

<p>Block paragraph</p>
<a href="#">Inline link</a>

HTML structure and layout

Block and inline behavior is the first layout model beginners need to understand.

HTML elements have default display behavior. Some elements naturally start on a new line and stretch across available width. Others flow inside a line of text. That difference affects layout before you write a single line of CSS.

Block and inline are not about importance. They are about how boxes participate in normal document flow. A paragraph is block-level by default. A link inside that paragraph is inline by default.

Modern CSS can change display behavior, but strong developers first understand the browser default. That makes layout bugs much easier to diagnose.

block elements

Start on a new line and usually fill available width.

inline elements

Flow inside text and only take the space they need.

normal flow

The default layout before flexbox, grid or positioning.

display

The CSS property that can change how an element participates in layout.

Syntax and structure

Block elements create structure. Inline elements shape text-level content.

Do not choose an element because it appears block or inline. Choose it for meaning, then change display with CSS if needed.

Meaning first, display second

<section class="lesson-section">
  <h1>Block elements form page structure.</h1>
  <p>
    Inline elements such as <a href="#example">links</a>
    sit inside text.
  </p>
</section>

<style>
  .lesson-section { display: block; }
  a { display: inline; }
</style>

Choosing tags for visual behavior

<span class="page-title">Main page heading</span>
<br><br>
<div>Read <div>more</div> now</div>

Rules that matter

Structure should stay readable before the design layer is applied.

Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.

Learn default flow first

Before flex and grid, understand what the browser already does.

Do not use br for layout

Spacing belongs in CSS, not repeated line breaks.

Do not make headings from spans

A heading needs heading semantics, even if CSS later changes display.

Keep inline content inline

Links, emphasis and short labels usually belong inside text flow.

Use CSS for visual changes

display: block, inline-block, flex and grid are styling decisions.

Inspect boxes in DevTools

The box model becomes much clearer when you look at computed display values.

Production thinking

HTML structure affects design, accessibility, SEO and long-term maintenance.

Why does this matter?

This matters because layout is not magic. Block and inline behavior is the foundation underneath spacing, wrapping, alignment and responsive design.

Accessibility

Screen readers care about element meaning, not only visual line breaks. A span that looks like a heading is still not a heading.

Production note

Many layout bugs start with the wrong mental model of default display. Debug normal flow before adding more CSS.

SEO note

Semantic structure still matters when CSS changes display. Search engines do not treat a styled span as a real h1.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change one span into a p and run the preview.
Add display: block to .badge and describe what changes.
Explain why the link should stay inline inside the sentence.

Practice assignment

Do this before moving to the next lesson.

Make a small page with two block elements and two inline elements.
Inspect their default display values in DevTools.
Change display in CSS without changing the semantic HTML.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.