The identification and use of block and inline elements is the most common mistake that designers often make in a web design. Even though, the words “block” and “inline”, themselves are self explanatory. It is important to understand the difference to avoid coding errors and inconsistencies related to CSS. Quoting section 7.5.3 of W3C specifications, “Certain HTML elements that may appear in BODY are said to be “block-level” while others are “inline” (also known as “text level”).”
HTML Block elements
A block element forms a separate block. The block elements are commonly referred as containers. Unless explicitly specified, it expands to the full width of the parent element and the height changes in correlation to the content. Both height and width can be defined for the block element to impose fixed height and/or width. The flow continues on the next line after the block element ends. A block element can contain other block and inline elements. So, a block element and/or an inline element can be nested in a block element. Some of the natural html block element are <div>, <h1>…<h6>, <p>, <ul>, <ol>, <table>, <blockquote>, <form>. So often the nested <div> tags are used for generating table-less layouts.
HTML Inline elements
An inline element positions itself horizontally inline with the rest of the content of its parent element. An inline element takes the minimum height and width in relation to its content. We cannot explicitly apply the fixed measures. An inline element can only contain an inline element. Some examples of natural inline elements are <span>, <a>, <strong>, <em>, <img />, <br />, <label>, <abbr>, <acronym>. As per the standards, a <span> cannot contain a <div>.
An inline element doesn’t support the height, width properties. Some versions of IE are found to apply these properties to inline elements but this is not in compliance with standards and should always be avoided.
The elements like <object>, <script>, <map>, <button> may be used as either block-level or inline elements. When used within an inline-element, they work like inline elements. In such case, these should not contain any block-level elements.
Overriding the natural element behavior – From Inline to Block and Vice-versa
Using the display property of the CSS, we can change the default behavior of any of the HTML element. Setting display as block or inline, we can change the behavior of an inline element to block type and block to inline type respectively.
You might want to display a text header inline with the text. In that case a block element <h1> can be set as display:inline, so that the following text is displayed in the same line next to the heading text.
Another Element Type in HTML
There is another type of elements in the HTML page. These elements don’t display in the webpage view. These tags provide the information about the HTML page but don’t show up in the page view. The tags include <head> tag and the contained tags like <meta>, <style> etc.
Removing from display
To extend the topic to another value of display property, we can remove an element from the display by setting the property display to none. Setting the display to value inline-block allows the element to stay in the flow (inline) but act as a block level element. This means that we can add properties like margin and padding.
A paragraph (block element <p>) at natural state
A paragraph with fixed height and width
An HTML <span> (inline element) at its natural state
HTML <span> with display set as block
- An inline element cannot contain a block-level element. So, you cannot use a <p> tag inside <i> tag. But, <b> tag inside <i> tag is perfectly okay.
- Since, inline elements don’t have a structural role. Every inline element should be enclosed in a block element. An anchor tag, <a>, should be enclosed in some block element like <p>.
- There is a defined hierarchy for block-level elements. In the HTML page body, <div> is at the top of hierarchy. A <div> can contain any block-level (and inline element) but other block level elements like <p> or <table> cannot contain a <div>. It is improper.
- A <div> tag can contain multiple block level elements.
- Quoting section 9.3.1 of the HTML specifications, “The P element represents a paragraph. It cannot contain block-level elements (including P itself).” So, <p> tag can only contain inline elements. Any block-level elements like lists (<ul>, <ol>) can only be defined outside the <p> tag. The open <p> tag has to be closed to define the lists.