CSS Tutorial - From HTML to XHTML - Block Level and Inline Elements

Block Level and Inline Elements

As we have seen in the examples above the HTML tags, or elements can either be Block Level Elements or Inline Elements. We already understand the difference, the Block Level Elements appear as square boxes, the Inline Elements are affecting only sections within lines of text. It is important to keep that in mind, when working with the elements later on. If I only want to make one word in a sentence red, I can't put that one word into a new <p>aragraph, it would form a new line, we have to use an Inline Element (like <span>), to keep the text flow.

(to me) important Inline Elements

<a>
<abbr>
<acronym>
<b>
<em>
<i>
<strong>
<big>
<small>
<sub>
<sup>
<br>
<button>
<img>
<input>
<label>
<map>
<object>
<q>
<select>
<script>
<span>
<textarea>

This list is not complete, if you want to see them all, with explanations, then look it up at the right source, on the W3C site

Block Level Elements

<address>
<blockquote>
<div>
<h1> ... <h6>
<form>
<hr>
<p>

Also here, you should have a look at the W3C page

The <div> tag is my usual shoebox. When I have content, that I want to put in it's own shoebox, like a bunch of images, then I put them into <div></div> tags. They are structural tags, and should hold block content that belongs logically together, and that is not held by more appropriate tags, like <h2> for a headline.
For inline elements (some words, out of a line of text or so) the shoebox would be <span></span>.