In HTML there are two basic forms of elements from a structural view, block or inline. Block elements are most easily identified at the basic level by looking at how they take up space on the screen. If you place anything after a block level element it will be pushed under, and not to the right side of it. Think of a block level element as having an automatic line break after it. Inline elements don’t have this line break, they occupy space a if you were placing them side by side.

For example, a block level element would be a heading. If you encase your title in <h1> tags, the text following will be shown underneath, even if you wrote it right next to it in the code. There are many block level elements, like paragraphs “<p>”, lists “<ul>” and “<ol>”, divs and so on. Inline elements are not so much strucural as style elements, like bold tags “<strong>”, links “<a>” and others.

A very important rule to remember is that block level elements can contain other block level elements and inline elements, but inline elements can only contain other inline elements. I don’t want to encourage you nesting inline elements into each other, your code will be messy, but it’s possible.

For example, you could have a paragraph and a first level heading inside a div container like so:

<div>
<h1>CSS first steps</h1>
<p>What an awesome article series, woohoo!</p>
</div>

You can also nest inline elements, although the following example is discouraged, since you can achieve the same result using just your css, and this isn’t real nesting per se.

<strong><u>Some text</u></strong>

That’s all you should know right now about inline and block level elements to start out, but let me just give you one more pointer. I don’t want to go into width and height details, suffice it to know, that inline elements can not have width and height. This comes up if you set a div container to be displayed inline, and then try to give it a width. It won’t work, the div will expand to the contents, but not beyond.