HTML Block and Inline
A block element is an element that starts on a new line and takes the full width of its space. An inline element flows inside a line without breaking the line.
Block elements stack
Each paragraph starts on a new line. The two block elements stack one under the other.
<p>First paragraph</p>
<p>Second paragraph</p>Inline elements stay in the line
A link is an inline element. It sits inside the sentence and the line flows on after it.
<p>Read the <a href="guide.html">guide</a> today.</p>Strong text inside a line
The strong element is inline too. It marks words inside a line and starts no new line.
<p>Words can be <strong>strong</strong> mid-sentence.</p>A heading above a paragraph
A heading and a paragraph are both block elements. Each one starts on its own new line.
<h2>News</h2>
<p>Block elements stack from the top.</p>Example
<!DOCTYPE html>
<html>
<head>
<title>Block and Inline</title>
</head>
<body>
<h1>Block and Inline</h1>
<p>This paragraph is a block element.</p>
<p>It holds a <a href="more.html">link</a> and <strong>strong text</strong> inline.</p>
</body>
</html>Key points
- Block element: an element that starts a new line at full width
- Inline element: an element that flows inside a line of content
- Headings and paragraphs are block elements
- Links and strong text are inline elements
- Block elements stack, and inline elements flow.
In this example, the heading and both paragraphs are block elements. Each one starts on a new line at full width. The second paragraph holds two inline elements. The link and the strong text flow inside its line. The line does not break for either one.
Note
An inline element can sit inside a block element.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which one is an inline element?