There are three major types of HTML elements.
- Structural Elements
- Block Elements
- Inline Elements
Structural Elements
The Structural Elements are <html>, <head> and <body> tags.
Block Level Elements
- All Block elements occupy a rectangular space within the web page and the content before and after the element are separated with the help of line spacing (in other words line break) i.e they represent a separate section from the elements preceding and following them.
- The block elements provide structure to a particular web page.
- Examples of Block Elements: Headings, Paragraphs, Body, <table>, <div> etc.
- HTML5 introduced new block elements for every sections of the web page like section, header, footer etc.
- A Block element should never be inside an inline element.
- Many of the block elements can be nested. A block element can contain other block elements. But the exceptions are <p> and <pre> and they can contain only inline elements and plain text.
- They never overlap or overlapped by other elements.
- They change the content flow.
- Block elements occupy the full width available and just enough height to accommodate the content.
- They have the CSS box properties.
Inline Elements
- They are the elements within a line. Examples: <span>, <em>, <img>, <a> etc.
- Inline elements can contain inline elements but no block elements.
- Inline Elements are mostly used to format words and characters.
- Inline elements take only as much space as their content requires.
- They do not change the content flow.
The below HTML and Image differentiates between block and inline elements.
<h1>Block Level Element - Heading</h1>
<p>Block Level Element - Paragraph1
<span>Inline Span Element</span>
<a href="">Inline Anchor Element</a>
</p>
<p>Block Level Element - Paragraph2</p>
<a href="">Inline Anchor Element</a>
</p>
<p>Block Level Element - Paragraph2</p>
