Web Development - HTML Blocks
HTML Block and Inline Elements
Every HTML element has a default display behavior. It is either a block-level element or an inline element.
Understanding the difference is key to building well-structured and styled web pages.
Block-level Elements
A block-level element always starts on a new line and stretches the full width available. It takes up as much horizontal space as possible.
Example
Block elements:
<p>This is a paragraph.</p>
<div>This is a div element.</div>
Try it Yourself »
Common block-level elements:
<div><p><h1>to<h6><table><form>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary. It sits inside a block-level element without breaking the flow of text.
Example
Inline elements:
<p>This is a <span>span element</span> inside a paragraph.</p>
Try it Yourself »
Common inline elements:
<span><a><img><strong><em>
Combining Block and Inline Elements
Inline elements can appear inside block elements, but block elements should not appear inside inline elements.
Example
Correct usage:
<div>
<p>This is a <span>span</span> inside a paragraph.</p>
</div>
Try it Yourself »
Tip: Think of block elements as containers, and inline elements as content that flows inside them.
The <div> Element
The <div> element is often used as a container for other elements.
It helps group sections of content and can be styled easily with CSS.
Example
Using a <div> as a container:
<div style="background-color: lightblue; padding: 10px;">
<h2>A Div Section</h2>
<p>This is some text inside a div.</p>
</div>
Try it Yourself »
The <span> Element
The <span> element is an inline container used to style a small part of text or content.
Example
Styling part of a sentence:
<p>My favorite color is <span style="color: red;">red</span>!</p>
Try it Yourself »
Use <span> when you only want to style or target part of the content inside a block element.
Block vs Inline Comparison
| Feature | Block Elements | Inline Elements |
|---|---|---|
| Start on new line? | Yes | No |
| Take full width? | Yes | Only as wide as content |
| Can contain block elements? | Yes | No |
Summary
- Block elements start on a new line and take full width.
- Inline elements stay within a line and take up only needed width.
<div>- block container for layout.<span>- inline container for text.
Next, you will learn about HTML Classes and IDs - naming elements so they can be styled and targeted easily with CSS or JavaScript.
