So far, we've covered some of the basics of HTML syntax and
how documents are structured.
Now, we're going to begin to focus on learning many of the individual elements
of HTML.
Before we begin doing that,
however, we need to first have a brief discussion about content models.
Almost every element in HTML belongs to at least one content model.
These content models help user agents know what type of
content to expect within an element.
And they control certain aspects of syntax,
such as which elements can nest within other elements and things like that.
Now, prior to HTML5,
there were basically only two content types, block level and inline.
Now, to show you the difference between those two,
I'm going to switch over to an HTML document.
So here, I've opened up the models.htm file,
found in the 02_05 directory of your exercise files.
Now, you don't need to open this up if you don't want to.
This is not going to be a hands on exercise.
This is more of a demonstration.
But feel free to open it up if you'd like.
But if we look at the structure of the page,
we can see there's a heading 1 at the top, that says content models.
And then we have three separate paragraphs.
And inside those paragraphs,
some of the text is wrapped in these B tags, which is holding that text.
And then down at the very bottom, for the first time we see a link,
which is the anchor element, which is going to link to an outside page.
So that's kind of the structure of this page.
And that's going to help us illustrate the difference between block level and
inline level elements.
Block level elements take up their own line within the flow of the document.
While inline level elements basically appear within the flow of other content.
So if I were to preview this in the browser, you can see the headings and
the paragraphs all stack one on top of each other.
While the bold text and the link appear within the flow of the content itself.
So that's kind of the difference between block level and inline.
And until HTML5, that's really all we kind of had.
The increased emphasis on semantics and structure in HTML5 has actually led to
the expansion of content models into seven main models.
And I have them listed right here in the document.
These are flow,
metadata, embedded, interactive, heading, phrasing, and sectioning.
Now, these are going to help authors create more sophisticated document
structures and to write more meaningful code.
Now, it's worth noting that they haven't done away with the concept of block level
and inline level elements.
They've just moved that functionality inside of these new content models, so
that some of them behave as block level.
Others can behave as inline level elements.
All right.
I want to take a quick look at each one of these content models.
So you have an idea as to what type of content are contained inside of that and
sort of how they behave.
And the best way to do that is to view in an interactive graphic that the W3C
has within their HTML file specification.
And I've actually provided a little link right here.
All right.
So clicking on the link is going to take us right here to the different kinds of
content found in HTML5.
This graphic shows you sort of a Venn diagram of all of
the different content models that HTML5 has.
The interesting thing about this, is you can see that some of these overlap.
And what that means is that there are different elements that can belong to
multiple content models, which is kind of interesting.
Okay.
So I want to go over these kind of one at a time.
Give you a brief description of what the content model is.
And the different elements that belong to it.
And what's nice is this graphic is interactive.
So if you mouse over it, you're going to get a listing of all the elements that
belong to that content model.
I want to start with metadata content.
Now, this is content that's defined as setting up the presentation or
the behavior of the rest of the content.
You're going to primarily find these elements in the head of the document.
And it's going to contain things like metatags, no-script tags,
script tags, style tags, the title tag of pages, things like that.
Embedded content is any content that imports other resources into the document.
So here, for example, we have things like canvas and
iFrame, object SVG, video, the embed tag, things like that.
Interactive content is any content that's specifically intended for
some type of user interaction.
So here, you can see we have things like the A,
the anchor or link tag that people would click on.
You have the button.
You have things like audio and video.
Now, you'll notice that things like audio and video and
object for example, have a little asterisks beside them.
And, that means under certain circumstances.
So, for example, video would be considered part of
interactive content if it had controls enabled.
So, some of those are only interactive on occasion.
Now, heading content defines the header of a section,
which can be either explicitly marked up with sectioning elements or
it can be applied by the heading content itself.
You'll notice that the heading content only includes the heading tags,
which is H1 all the way through H6.
Phrasing content is a little bigger.
This is the text of the document, as well as any elements that are used to
mark up text within paragraph level structures.
So in a lot of ways, phrasing content is really the same as what used to
be inline level elements from the HTML4 specifications.
So you can see, there's a lot contained here.
We have the A or anchor tag, abbreviations, things like buttons,
iframes, progress, input objects, span, strong, bold, italic.
All those things that are being kind of contained within the flow of normal text.
Now, flow content, as you can see, this is easily the biggest.
This contains the majority of the elements in HTML5.
You can really think of these elements as elements that would be
included in the normal flow of the document.
It's important to note here that being identified as flow content really has
no bearing on how the content is displayed within the user agent.
So there are no rules on how flow content has to be displayed.
You can see there's a lot of elements here,.
There's the link element A, article, so some of the sectioning elements.
Aside, audio, bold, embed, iFrame, header, main, ordered list, unordered list.
So a lot of the elements that we're going to be working with,
almost all of them that we're going to work with within a document can be
considered to be part of the flow of content.
Now, finally, we have sectioning content.
I saved this for last.
This is content that defines the scope of the headings and footers.
Now, using these elements, we'll actually create a new section within the document.
So you can see here, we have article, aside, nav and
section, and these are all new to HTML5.
Now, I don't expect any of you guys that are new to HTML
to memorize these content models and all of the elements that belong to them.
But really, it's just important that you understand how the elements
are categorized by HTML.
If you understand those content models, you can take advantage of HTML5's,
and prove semantics, and write more meaningful documents.