How to understand block vs inline elements

Default flow

Block elements such as paragraphs normally begin on a new line and fill available width. Inline elements such as links normally flow within a line of text.

<p>A paragraph with an <a href="/help/">inline link</a>.</p>
<p>A second block starts on a new line.</p>

Common defaults

• Usually block: div, p, headings, section, and lists
• Usually inline: a, span, strong, em, and code
• Replaced inline elements such as img have their own sizing behavior

Display is CSS

HTML semantics and visual display are separate. CSS can make a link display: block without changing its meaning into a section.

a.card-link { display: block; }
li { display: list-item; }

Respect content rules

Changing display does not make invalid nesting valid. A paragraph still cannot contain a section or div. Choose HTML for meaning and valid content structure, then use CSS for layout.