By now you should have realised what is explained below but here are the proper words.

In HTML there are two types of elements categorised by how they are laid out on the page.  That difference is most obvious once you have done some CSS so they are:

Block elements take up the whole width of the page (unless you style them) and will appear on a new line each time.  In-line elements appear in the flow of text (again unless you style them).

To illustrate create a new page called inlineblock.html.  Paste this in:

<p style="background-color:rgb(255,0,0);">Hello I am some text with an image inside it</p>

Try the page and you can see that even though the text does not fill the width of the page the paragraph does.  Now add this img element somewhere inside the text (you will also need to copy texture.png from the beginnersite folder into your media folder):

<img src="./media/texture.png" alt="a texture">

When you try it the image should appear inside the line of text (in-line).  There are two ways to change this behaviour:

Do the second one now by adding this style inside the img element:


You should now see the image displayed on it's own line.


Although you might never need to change the display from block to in-line or back it is important to realise the difference between the two types.  Partly because although block elements can contain anything there is a rule that an in-line element cannot contain a block element.  If you think about it that is really just common sense.

Inline block

These are a cross between the two.  Inline block elements will stay within the flow of text but you can set width and height (which you cannot do with inline elements).  Add span tags around a word in the paragraph and give it the id inlineblock.  Now put span tags around another word but with no id.  Then paste these into the embedded style sheet:

#inlineblock {
span {

The colour and height are applied to all span elements but only the one which has had display set to inline-block is affected.