HTML Block & Inline
HTML meaning and CSS layout are related but different. An element’s default display style explains how it normally flows; it does not define every kind of content the element may legally contain.
How it works
- In normal flow, block boxes typically stack vertically. Inline content participates in lines of text, wrapping as necessary.
- div is a generic flow container and span is a generic phrasing container. Choose a more meaningful element when one describes the content.
- Changing display with CSS does not change HTML nesting rules or turn a generic element into a native control.
A practical example
<div class="notice">
<p>Workshop status: <span class="status">open for booking</span>.</p>
</div>
The div groups the notice, while the span identifies a phrase within its paragraph. CSS can target either class without changing the surrounding sentence.