So in HTML 4.0 we had 2 main content types, Block and Inline.
Basicly a block element is an element that takes up it’s own “line”, or block, so to speak in the document. A generic block element is the <div> element which is a perfect example. You see a block element is like the word implies, a “block” that expands left to right inside the block it’s inside (that can be the browser window) and takes up that space much like the diagram below.
While an inline element exists in line with the content (eg text) and does not force a container around it. A generic inline element is the <span> element which is a perfect example of this. In the diagram below we have the block element <p> and inside it is a <span> element containing the word Fox. Inline elements can be nested inside other inline elements and inside block elements and block elements can be nested inside other block elements.
It all changes with HTML5
With the introduction of HTML5 we now have 7 main content types, Metadata, Embedded, Interactive, Heading, Phrasing, Flow and Sectioning.
Now don’t be confused, block elements and inline elements still exist in HTML5 they are just part of some of these new types and are no longer content types themselves, just elements.
Why the change? These content types are going to help authors create more sophisticated documents and to write more meaningful/semantic html. Lets go over the types briefly.
This is defined as setting up presentation or the behaviour of the rest of the content. You’ll find most of these in the <head> element of the document.
This contains the large majority of elements in HTML5. One way to think of these is as the elements contained in the normal “flow” of the document.
Simply put it’s elements that import other resources into the document.
These are elements, as the name implies, are intended for some type of user interaction.
This defines the header of a section. A section can be marked up explicitly using the sectioning elements or applied by the headers themselves (ie the 6 h tags)
This is the text of the document and the elements used to mark up text within a paragraph.
These define the scope of heading and footers. Using these element will actually create a new section in the document. These elements are new to HTML5.
To see how some elements overlap different content types, refer to this diagram sourced from W3C:
For more indepth information and for an interactive diagram of the content types goto https://www.w3.org/TR/html5/dom.html#kinds-of-content