Cambridge University Engineering Department - HTML: block and in-line elements

HTML: block and in-line elements

Some types of elements of an HTML document are "block-level" elements and some are "inline" or "text level". "block-level" elements usually begin a new line whereas "inline" elements don't.

If you want to create documents that conform to the latest standards (and are accepted by HTML checkers) you need to be aware that

You can put "inline" elements inside "inline" elements (so for example <i>test<b>ing</b></i> is ok)

You can't always put "block-level" elements inside other "block-level" elements. <div> can contain any other "block-level" element, but <p> can't contain any "block-level" element

You can't put "block-level" elements (<p>, <table>, etc) inside "inline" elements (<span>, <font>, etc).

Some "block-level" elements (<body>, etc) can only contain block-level elements

Some "block-level" elements (<div>,<li>, etc) can contain either "block-level" or "inline" elements

Consequently you can have <li>test<p>test</p></li> but not <p>test<ul><li>test</li></ul></p>. If you ignore these restrictions an HTML-checker might produce this type of message.

Error Line 135 column 6: document type does not allow element "table" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<table>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

You can redefine whether elements are "block-level" or not by changing the value of their display property, but it's rarely a good idea.