HTML Block and Inline Elements
HTML Elements Types
HTML elements are broadly classified into Block-level and Inline elements based on how they behave in a webpage layout.
1. Block-level Elements
-
Start on a new line and take up the full width of the container.
-
Can contain other block-level or inline elements.
Common Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <table>
Example Code:
Output Preview:
-
Heading and paragraphs each appear on separate lines
-
Container takes the full width of the page
2. Inline Elements
-
Do not start on a new line; they only take up as much width as needed.
-
Can be used inside block-level elements.
Common Examples: <span>, <a>, <b>, <i>, <strong>
Example Code:
Output Preview:
-
Text flows inline, continuing on the same line
-
Only the styled portion is affected
Summary
| Type | Starts on New Line? | Width | Examples |
|---|---|---|---|
| Block-level | Yes | Full width | <div>, <p>, <h1> |
| Inline | No | As needed | <span>, <a>, <b> |
Understanding block and inline elements helps structure web pages properly and style them effectively using CSS.
