Lecture 5: HTML Content Models

Before HTML 5 there were only two types of HTML elements:

1. Block level elements
2. Inline elements

In HTML 5 the elements are divided into 7 types. But the concept of block level and inline elements are still useful. 

A block level element always begins in a new line and also pushes any next inline element to a new line. 

An inline element begins at the same line. 

To illustrate this, we introduce the div and the span element. <div> is an example of a block level element and <span> is an example of an inline element.



Here we can see that the first line is a div text. And hence it pushed the next span text to a new line. The third line (in the code) is a span text. So it begins at the same line of the previous span text (in the output). The next div begins at a new line.

A block level element may contain both block level and inline elements. But an inline element can only contain other inline elements. 

For example - 
<div>This is some <span>text</span> only.<div> is valid HTML. 
<div>This is some <div>text<div> only.</div> is also valid. 
<span>This is some <div>text</div> only.</span> is invalid. 
<span>This is some<span>text</span>only.<span> is valid. 

In HTML 5 the element classification is more complex. 

Under the new category system (which you can check at https://www.w3.org/TR/html5/dom.html#kinds-of-content) the block level elements can roughly be called Flow content and the inline elements can roughly be called Phrasing content. 

For most of the practical purposes, the concepts of block level elements and inline elements are enough.