Note: This document is a work in progress. You can help improve it.
Block versus inline elements
There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.
- Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.
- Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an
<a>element (hyperlink) or emphasis elements such as
<em> is an inline element, so as you can see below, the first three elements sit on the same line as one another with no space in between. On the other hand,
<p> is a block-level element, so each element appears on a new line, with space above and below each (the spacing is due to default CSS styling that the browser applies to paragraphs).
<em>first</em><em>second</em><em>third</em> <p>fourth</p> <p>fifth</p> <p>sixth</p>