HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Block and Inline Elements
Every HTML element consists of a default display value that depends on the type of element it is.
There are two display values: block and inline.
Block-level Elements
A block-level element is always started on a new line, and the browsers add some space (a margin) before and after the element automatically.
A block-level element always stretches up to the full width.
Two commonly used block elements are: <p> and <div>
- The <p> element is used for defining the paragraph in an HTML document.
- The <div> element is used for defining the division or a section in an HTML document.
- The <p> element is a block-level element.
- The <div> element is a block-level element.
Hello World
Hello WorldThe P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).
Output:
Inline Elements
An inline element is not started on a new line.
An inline element only takes up as much width as required.
This is a <span> element inside a paragraph.
This is an inline span Hello World element inside a paragraph.
The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.
Output:
This is an inline span Hello World element inside a paragraph.
The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.