Difference between block level elements and inline elements in HTML

Background

Most of you might already know HTML stands for HyperText Markup Language and is the standard markup language used to create web pages. HTML consists of elements. Most of the elements have stating and ending tag. For eg. <div></div>. Some don't need. For eg. <br />. You can read more about it on Wikipedia or w3schools. In this post I am going to cover what are basic blocks in a HTML.

Blocks in HTML

Elements in HTML are categorized into two types- 

1. block level elements
2. inline elements

When block level elements are rendered in a webpage they generally begin and end with a new line. For example <ul>, <table>, <h1>, <p>  tags. Inline elements comprise of tags that come inside(nested) block level element tags. For example <a>, <img>, <b>, <td>.

Difference

Picking this up directly from the W3 documentation -

Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:

• Content model : Generally, block-level elements may contain inline elements and other block-level elements (Exception to this on paragraph/p tag). Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
• Formatting : By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.

Below are some details on <div> and <span> elements which I have directly picked up from W3schools.I have used them a lot in web pages and JSPs but never knew the basic difference between them and their intended purpose.

<div>  element

• The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
• The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
• When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
• Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.

<span> element

• The HTML <span> element is an inline element that can be used as a container for text.
• The <span> element has no special meaning.
• When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

Nesting block level elements inside the <p> tag… right or wrong?

As the documentation clearly says

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

You cannot use block level elements inside paragraph tag. Well no body stops you from adding it but here's what will happen  - opening <div> or any other block level tag will automatically close the <p> element.

Related Links

• Why <p> tag can't contain <div> tag inside it?
• Nesting block level elements inside the <p> tag… right or wrong?
• Block-level and inline elements
• Paragraphs: the P element