HTML Elements (Inline & Block)
HTML elements are building blocks of a web page.
They are mainly of two types:
- Block Elements
- Inline Elements
Block Elements
What is a Block Element?
A block element:
- Starts on a new line
- Takes full width of the page
- Pushes next element to next line
Easy Example
Block element is like a table or bed
It occupies full space.
Common Block Elements
| Tag | Use |
| <div> | Container |
| <p> | Paragraph |
| <h1> to <h6> | Headings |
| <section> | Section |
| <article> | Article |
| <header> | Header |
| <footer> | Footer |
| <ul>, <ol> | Lists |
Example
<h1>This is Heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>Each appears on new line
Inline Elements
What is an Inline Element?
An inline element:
- Does not start on a new line
- Takes only required width
- Stays in same line
Easy Example
Inline element is like a pen or mobile
Takes only needed space.
Common Inline Elements
| Tag | Use |
| <span> | Inline container |
| <a> | Link |
| <img> | Image |
| <strong> | Bold |
| <em> | Italic |
| <label> | Form label |
| <input> | Input field |
Example
<p>This is <strong>bold</strong> text</p>
<a href="#">Click here</a>Appears in same line
Human Body Example
| HTML | Human Body |
| Block element | Body |
| Inline element | Hand, Eye |
Block vs Inline (Difference)
| Block | Inline |
| New line | Same line |
| Full width | Content width |
| Can contain inline | Cannot contain block |
Can Inline Become Block?
Yes, using CSS:
span {
display: block;
}One Line Remember
Block = full line, Inline = same line
