What is the difference between inline and block elements?

Difficulty: 3/10

display, layout, semantic HTML

Difference Between Inline and Block Elements in HTML

In HTML, elements are categorized as either inline or block, which affects how they are rendered on the page and how they interact with surrounding content.

Key Differences

1
Block Elements:
2
- Start on a new line and take up the full width available by default.
3
- Can contain other block or inline elements.
4
- Examples: <div>, <p>, <h1>–, , .

Example Usage

In short: Block elements structure the layout by occupying full width and stacking vertically, while inline elements flow within text and only occupy the space their content needs.

Scenario Questions

0-2 years experience

1If you need to place a navigation link inside a paragraph without breaking the flow, which element type would you choose and why?
2What happens to the page layout if you replace a <div> with a <span> around some text?
3How would you make a button appear on its own line using only HTML tags, no CSS?

Follow-up Questions

Can you give an example of a block element that developers sometimes misuse as inline?
How does changing an element's display type affect its box model and surrounding layout?
What considerations are there for accessibility when swapping block and inline elements?