Block-level elements are HTML elements that:
- Always start on a new line in the browser.
- Take up the full width available (from left to right), even if the content is small.
- Can contain other block-level elements or inline elements.
- Are mainly used for structuring and grouping content.
1. Characteristics of Block Elements
- Starts on a new line automatically.
- Full-width by default, but width can be changed with CSS.
- Can have margins, padding, borders.
- Can contain both inline and block elements.
2. Common Block Elements
| Tag | Purpose |
|---|---|
<div> | Generic container for grouping content |
<p> | Paragraph of text |
<h1>–<h6> | Headings, from largest (<h1>) to smallest (<h6>) |
<section> | Thematic section of content |
<article> | Self-contained piece of content (blog post, news) |
<header> | Intro or navigation section |
<footer> | Footer section |
<nav> | Navigation menu |
<main> | Main content of the document |
<table> | Table container |
<form> | User input form |
<ul>, <ol> | Lists (unordered & ordered) |
<li> | List item |
<blockquote> | Long quotation |
<hr> | Horizontal rule (divider) |
3. Example Usage
<h1>My Blog</h1>
<p>This is the first paragraph of my blog post.</p>
<div>
<h2>About Me</h2>
<p>I am a web developer learning HTML.</p>
</div>
Output:
<h1>starts on a new line and takes full width.<p>also starts on a new line.<div>groups heading and paragraph together.
4. Visual Concept
[Block Element: full width]
[Block Element: full width]
Even if text is short, the block stretches across the page width.
5. CSS Display Property
You can make any element a block element using:
display: block;
Example:
<span style="display:block;">This span is now a block element.</span>
