A block-level element starts on a new line and takes up the full available width by default — think of it as a box that stacks vertically with other boxes.
Common Block Elements
<div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>,
<table>, <form>, <header>, <footer>, <section>, <article>Example
<div>First block</div>
<div>Second block</div>Browser output: "First block" and "Second block" appear on separate lines, each stretching the full width of their container, even though the text itself is short.
Why This Matters for Layout
Because block elements default to full width and stack vertically, they're the natural choice for structural sections of a page — headers, content areas, sidebars. Modern CSS (Flexbox, Grid) can override this default display behavior, but the HTML-level default is still worth understanding, since it's what you're working with (or against) before CSS is applied.
Common Mistakes
- Nesting a block element inside an inline element where it isn't valid (e.g. a
<div>inside a<span>) — browsers often "fix" this by restructuring the DOM in ways you didn't intend - Assuming "block" means "styled as a box with a border" — it's purely about layout behavior (full width, new line), not visual styling
Interview Relevance
Q: "What's the difference between block and inline elements?" is one of the most common HTML fundamentals questions — see the companion page Inline Elements for the direct comparison.
Practice Question
List three block-level elements you'd use to structure a blog post page, and explain what each is for.
