HTML Block & Inline
Every HTML element has a default display mode. Block elements stack vertically and take the full width. Inline elements flow within a line of text.
The two flows
Common elements by default mode
| Mode | Examples |
|---|---|
| Block | <div>, <p>, <h1>–<h6>, <section>, <ul>, <form> |
| Inline | <span>, <a>, <strong>, <em>, <img>, <code> |
Tip: You can change an element's default mode with CSS:
display: block, display: inline, or display: inline-block (which mixes both behaviors).Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Block & Inline</title>
</head>
<body>
<h1>HTML Block & Inline</h1>
<p>This is a demo page for the "HTML Block & Inline" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Use an inline wrapper to style just a word inside a paragraph.
<p>Save <
style="color: red;">$10</
> today.</p>
The generic inline grouping element.
Discussion
Loading…