Block Elements and Inline Elements

ABSTRACT

When it comes to markup (structure), there are a few “prototypical” characteristics that can be applied to elements. There are languages called XML, and SGML (which is the “root language” for HTML). In XML and SGML, elements are “generic.” They don’t have any characteristics, beyond their use and context. In HTML and XHTML, however, there are some “rules” that are applied to markup elements.

UNDER THE HOOD

A Web browser is what actually “draws” the page on the screen of your computer. It receives “instructions” on what to draw from the Web server, but it already has a list of assumptions about the information it will get. This is established in the protocol specifications for markup (I referenced them in the first paragraph). These specifications tell the browser that this element can/cannot contain other elements, and, if so, what those elements are, or that this element must always have some kind of attribute, etc. It can get pretty intense and complex, but that is what is necessary when computers talk to each other.

If you ever want to get the “real deal” about [X]HTML, then you can look at the DTD documents for each language. These are special computer-readable files that define, exactly, in real, hard-coded terms, what the language means. The DTD for HTML 4.01 Strict is here, and the DTDs for XHTML 1.0 are here. They ain’t exactly relaxing bedtime reading, but they are the “Alpha and the Omega” of what can and cannot happen in your document.

The Two Main Types of Elements

There are a number of basic “display types” for markup elements. I’ll talk about the two principal ones here. Pedants will point out that there are actually several, but I’m keeping it simple, and just starting with two.

This is a good time to introduce you to a valuable resource for learning: W3Schools. This is a terrific resource that has a “try it yourself” type of functionality, where you can edit some code, then see what it does, in real-time. The CSS section is here. I will refer to W3Schools pages often, as they are an accurate and authoritative source of information.

In order to keep things as simple as possible, I’ll only talk about two “main” elements: <div>, to represent “block” elements, and <span>, to represent “inline” elements.

In fact, there are quite a few elements that fall into “block” and “inline,” but these generally have “extra characteristics” that can confuse the issue. <div> and <span> are pretty much “pure” examples of these two display types, and give us a nice “blank slate.”

Notice that I am not talking about <table> elements here. <table> elements are a very powerful, useful and controversial element, but have been overused (in my and many others’ opinion). They have a display property that is different from both block and inline. I’ll get to them later.

Block elements

Block-level elements display a 2-dimensional area. A block element has both a height and a width, and will “break” a continuous line.

For example:

Example 3

This is a bunch of text, and <div>this is text inside a &lt;div&gt; element.</div> Notice that it broke the continuity of the line.

With no modification, this will display like so:

The <div> element actually stretches across the width of the display area, and its height is based upon the line-height of the text it contains.

This can be illustrated like so:

Example 4

This is a bunch of text, and <div style="border:1px solid red">this is text inside a &lt;div&gt; element.</div> Notice that it broke the continuity of the line.

Which would display like so:

The border shows where the <div> fits in the example.

Again, I “cheated,” and applied styles directly in the presentation. This is called “inline styles.” I’m just doing this to keep things simple. It’s actually a practice to be avoided in real applications of these techniques. I’ll explain why in later posts.

Now, since this is a block element, a <div> can be given a height and a width, like so:

Example 5

This is a bunch of text, and <div style="border:1px solid red;height: 10em; width: 10em">this is text inside a &lt;div&gt; element.</div> Notice that it broke the continuity of the line.

Which would display like so:

In this case, see that we made the <div> element 10em square. The block element occupies its own line, and has both height and width.

Inline Elements

Inline elements, on the other hand, don’t really have a height or width, per se. They adapt to their contents, and don’t break the flow of their context.

If we modify the examples above, like so:

Example 6

This is a bunch of text, and <span>this is text inside a &lt;span&gt; element.</span> Notice that it does not break the continuity of the line.

The <span> element simply encloses the text, and allows us to do things like make it bold:

Example 7

This is a bunch of text, and <span style="font-weight:bold">this is text inside a &lt;span&gt; element.</span> Notice that it does not break the continuity of the line.

You can see the <span> element here:

Example 8

This is a bunch of text, and <span style="border: 1px solid red">this is text inside a &lt;span&gt; element.</span> Notice that it does not break the continuity of the line.

Now, the inline element doesn’t react to height and width properties:

Example 9

This is a bunch of text, and <span style="border:1px solid red;height:10em;width:10em">this is text inside a &lt;span&gt; element.</span> Notice that it does not break the continuity of the line.

Note that the height and width did not change. Inline elements are just that: inline.

In subsequent entries, I’ll use the <div> and <span> elements to illustrate many CSS behaviors and properties.