HTML and CSS Basics - HTML5 with CSS3 - page 22



Heading content : These elements are headings or titles, introducing the text that follows them.
Headings are covered in Chapter 4.



Sectioning content : These elements wrap around groups of elements to form larger, distinctive
blocks of content, such as an article or a sidebar. These are covered in Chapter 4 as well.



Embedded content : Elements that embed content into the page, like images, videos, audio, or
dynamic graphics. You'll learn about most of these in Chapter 5.



Interactive content : Interactive elements are typically found in forms that let web users send
data directly to the web server, like text fields, checkboxes, and buttons. Forms and their
interactive elements are covered in Chapter 8.



Metadata content : These elements supply information about the document itself, or connect the
document to additional resources like scripts and style sheets. You'll learn about these in
Chapter 3.

Some elements may have more than one content model. For instance, a link (the a element, covered in
depth in Chapter 6) is both a phrasing element and an interactive element. Although there are occasional
exceptions and oddities, these content models are generally intuitive and easy to keep straight. As we
introduce the individual elements in detail throughout this topic we'll include their relevant content model(s)
and any special rules about what they can or can't contain.

Block-level vs. Inline

In previous versions of HTML (including XHTML), most elements were divided into two broad categories:
block-level and inline . A block-level element is one that contains a significant block of content that should
be displayed on its own line, to break apart long passages of text into manageable portions such as
paragraphs, headings, and lists. An inline element usually contains a shorter string of text and is displayed
adjacent to other text on the same line, like a few emphasized words within a sentence. Inline elements
could only contain text and other inline elements.

The block and inline classifications were always essentially presentational, and HTML5 has moved to the
more nuanced and meaningful system of content models. If you're familiar with HTML 4.01 or XHTML 1.0,
the flow and sectioning content models are roughly analogous to block-level, and phrasing elements are
roughly analogous to inline.
Even though these classifications are gone from HTML5, their legacy remains in the form of the display
property in CSS, which determines an element's formatting on the rendered page. If an element's display
property is declared with the value block , the rendered element forms a “block box” and rests on its own
line, occupying the full available width unless some other width is specified. The value inline indicates
that the element appears on the same line as adjacent text or elements, and its width collapses to the
width of its contents.

Graphical web browsers have their own built-in style sheets that dictate how various HTML elements
display by default, including whether they should be treated as block-level or inline. You can override these
browser defaults with your own CSS, as you'll soon see, but it's important to know which elements are
styled as block-level or inline by default.