HTML Basics
HTML Block and Inline Elements
Every HTML element is displayed as either block-level or inline by default. Knowing the difference is key to controlling how your page is laid out.
Block-Level Elements
A block-level element starts on a new line and takes up the full width available, pushing later content down. Paragraphs, headings, and divs are block-level.
<div>First block</div>
<div>Second block</div>
<p>Each of these starts on its own line.</p>Inline Elements
An inline element only takes up as much width as its content and does not start on a new line. It sits within the flow of text. Examples include span, a, strong, and img.
<p>This is <strong>bold</strong> and <a href="#">a link</a> together.</p>Common Examples
| Block-level | Inline |
|---|---|
| <div>, <p>, <h1>-<h6> | <span>, <a>, <strong> |
| <ul>, <ol>, <li> | <em>, <img>, <label> |
| <section>, <header>, <footer> | <code>, <sub>, <sup> |
ℹ️
The generic containers <div> (block) and <span> (inline) carry no meaning on their own. Use them for grouping and styling when no semantic element fits. You can change any element's behaviour with the CSS display property.