Block vs. Inline Tags

We can separate just about every XHTML tag into one of two categories: block-level, and inline. The difference is important because it tells the browser how the content within the tags should be separated prior to manipulation or formatting. If this sounds complicated, don't worry, because examples are on the way.

Block-Level Elements

You already know a handful of block-level tags and we went over the definition of a block when we discussed paragraphs. A block-level tag is a tag that tells the browser to separate out the contained content for formatting in an invisible box, usually surrounded by line-breaks. <p> tags and heading tags are examples of block-level tags.

Inline Elements

Separating text for formatting with line breaks is often not practical at all. This is where inline elements come in. Inline elements do not separate their content with boxes and line breaks. You know of a couple inline tags as well: <b> and <i> are examples of inline-level tags.

Lets look at the differences between the two types with an example, and see how the text is handled. The following example shows what happens when you place <b> tags with in a <p> block, and what happens when you place a <p> block within <b> tags. (Note: due to some tag-closing awkwardness, the following code will not validate.)

source

<p> vs. <b>:

<p>
  1. This is a paragraph with a section of 
  <b>bold text</b> inside of it.
</p>

<b>
  2. This is a section of bold text with 
  <p>a paragraph</p> inside of it.
</b>

The first sentence results in one "block" with a couple of bold words inside of it. In the second sentence, the <p> tags break the text up into multiple blocks.

results

Headings:

1. This is a paragraph with a section of bold text inside of it.

2. This is a section of bold text with

a paragraph

inside of it.

Why Does This Matter?

The difference between block-level and inline-level tags may not seem important right now, and for all practical purposes, it isn't. However, when we later learn more about CSS, the difference between the two will become more important. CSS even contains a way to change the formatting level of a tag, which can be very powerful if used properly, but disastrous if used improperly. It's important to thoroughly understand the differences early on.