HTML Content Models

Hello; welcome to Educator.com.0000

This lesson is going to be about content models.0002

Content models are an important part of HTML that basically tells you where elements are allowed to be placed,0005

and kind of gives you an idea about what they do.0013

In HTML 4.01, content models were very, very simple: it was basically block-level elements and in-line elements--0019

although technically, everything in the body element is also flow content.0027

It just means that it is part of the flow of the document, and it is to be rendered visibly in a typical browser, as opposed to like meta-data in the head element.0034

So, block-level elements are slightly wider-scope than the in-line elements in HTML 4.01.0045

And they break onto their own lines automatically, whereas in-line elements are a little bit lesser-scope, and they tend to stay on their own line.0053

So, some examples would be like...a lot of the text semantic tags are in-line.0061

And then, a lot of the containing elements (like div and things like that...blockquote...) are block-level elements.0067

I will give you a quick demonstration here of that.0079

Here is a page that is just empty right now, but I have given these styles to divs and spans.0083

So, div is the typical semantically-void block-level element, and span is the typical semantically-void in-line level element.0090

And this CSS just makes all divs red and gives them a border; and all spans blue.0101

If I go like this...now, I am actually going to copy these several times, just so that the effect is more clear.0109

Refresh over here; you can see that the divs, which are block-level, when given the border, automatically...0130

you can see that the border goes all the way across; it comes and fills its own line0140

and breaks the next one down onto the next line, whereas the spans all fall into a line, and they are in-line.0146

It is kind of a hint--they are "in-line."0155

And then, the block-level elements--you can think of them as boxes that fill up the whole width of the screen.0158

If I were to change the width, it would change it.0164

Now, another thing is that block-level elements may contain other block-level elements, or in-line elements.0170

So, they can contain either, whereas in-line elements need to be contained in a block-level element, and they can only contain data.0183

(so, something embedded, like an image or a text node) and other in-line elements.0193

Anything other than that, they are not allowed to contain, which means that you can run into validation problems.0201

This is the W3C validation page, and you can see that I am using the HTML 4.01 strict doctype.0208

And if I do something like paragraph and a blockquote, I am going to run a check now; I have two errors.0219

Now, the errors are 1) this blockquote here--character data is not allowed here.0243

This is character data--this h; this is just a text note, and it is directly in blockquote, which happens to be a block-level element.0251

And block-level elements need to contain block-level elements and in-line elements, but not data,0259

whereas if it was an in-line element, like the paragraph (which you don't see any errors for), it is allowed to contain data.0267

And then, you have this secondary problem that shows up, that is actually just the first problem.0274

But it is repeated, because it automatically...see, it says, "end tag for "BLOCKQUOTE" which is not finished."0284

There was no content in here that was required.0292

Block-level elements are required to have one of those two types of content (block-level or in-line).0295

And it didn't run into any of that, so it says, "Well, blockquote can't be done yet, because I don't have the content yet."0300

So, it is saying, "Here is the end tag for it, but it is not finished."0310

If you have a good understanding of the content model, then you will be able to read the validation when you are validating your pages.0316

When you have problems, you will be able to read it more easily, and you will be able to clean up a lot of things with just one fix.0325

Here, I have two problems; it is actually just one problem.0332

If I fix it by putting the correct in-line element, and then re-validate,0335

I have succeeded--no errors, even though I only fixed one thing, and there were two errors before.0348

It is because it was actually the same error.0355

That is the HTML 4.01 content model--very, very simple--basically, just block and in-line, and everything is flow.0360

HTML5 made things more difficult, but also they are kind of just simplifying things by giving them more precise labels.0369

In HTML5, the content model is expanded; so you don't have block and in-line anymore.0383

The block and in-line content model categories are roughly equivalent to the flow content category that is new.0391

It is just called flow; and it is basically like what it was in HTML 4--the flow that nobody cared about, because it was everything.0401

Now, it is a little bit more explicitly defined.0410

There is also a new content category called the phrasing content category.0413

And this is, in a lot of ways, very similar to the old in-line category,0418

in that phrasing content tends to be text-level stuff (emphasis, elements,0425

and things like that that fall all in one line), although it is not exactly the same.0431

There are a couple of new ones, as well.0438

The heading content category is for h1 through h6.0440

Sectioning is the new elements, like section, nav, header, footer, aside...0446

(actually, I think aside may not be one; I will check when I get to that slide)0453

And embedded and interactive content, respectively (I will talk about those in a minute),0457

and then the meta-data content category is also made explicit.0464

I say that because there kind of was always a meta-data category that was separate--it wasn't flow.0468

But now, it is explicitly set up as "this is meta-data that goes up in the header, not in the flow of the document."0475

Before I actually get into flow content too much, I want to look at the actual specification for content models.0485

And I am going to scroll down to where it starts talking about the models here.0496

This is a diagram of the different models and the elements within them; it is like a Venn diagram.0500

So, the elements that are contained in here are in everything that they are encircled by.0510

Flow content--almost all elements in HTML are flow content, except for some meta-data elements that are not flow content.0519

All heading elements (h1...actually, you can see them if I zoom down a little bit...h2, h3, h4 through 6, and hgroup)--0528

that is all of the heading content elements; all of these are heading content and flow content, because this is inside that circle.0544

Embedded content is always phrasing content; it is also always flow.0554

So, this is heading and flow; so the h1 is both heading and flow.0557

And then, all embedded elements are embedded and phrasing and flow; and sometimes they may be interactive.0564

And there are some other additional ones that are not as common as these types here, that are important.0571

Let me zoom back in.0578

You can see that flow is basically everything, kind of like in HTML 4, except for some of the meta-data elements that are in the head.0583

So, some always have to be in the head, like the title element (it always needs to be in the head).0597

Some don't always have to be in the head, like the script element (it can be in the flow of the document).0602

So, that kind of varies, depending on the context.0609

In terms of the content, all flow elements should have at least one descendent node that is text or embedded.0613

It is just like in HTML 4, where you need to have an image or something, or a text node.0624

Otherwise, it is just empty; and you are going to get that error with the blockquote,0630

where it found the end of the tag before it got all of the things that were inside of it.0633

It doesn't need to be an immediate descendant; it doesn't have to be right away.0639

Say we have a flow element, give, and I am going to put directly inside of it p, and then some content; this is a text node here.0647

Now, this div element contains within it a p element (paragraph element).0662

So, it actually doesn't directly have any content; but it does have, inside of it, an element which does have content.0669

So, it has a descendent that has content; so that is good.0679

But what wouldn't be good is if we had this; that would not validate.0682

Looking again at flow content, let's look at...this is the list of all flow content.0690

And you can see that for some of them, it depends on if there is a certain attribute available.0698

And then lastly, it is just text; text counts as flow content--that would be like a text node.0706

But you can actually click on these elements (I just clicked on blockquote) and read the definition0711

(that Zoom didn't zoom the way I wanted it to) of its location in the grouping.0719

Flow content is the first category listed here; it is also a sectioning root and a format block candidate.0736

These two--you don't need to worry about; they are not the main types.0743

But blockquote is just flow content, with some special rules.0750

It also tells you in the specification where it can show up.0755

So, it first tells you what it is; then it tells you where it can show up.0760

And it makes sense that flow content can show up where flow content is expected.0763

Basically, it is kind of redundant, although it gets more complicated in other places.0768

And the content model is: you have a blockquote--what can the blockquote element contain (sorry about the highlighting)?0772

It can contain the content model flow content.0781

Blockquote is a very simple element in terms of all this; it is not terribly confusing.0785

But I wanted to give that to you as an example first, because some of the later ones get very confusing.0791

Sectioning content: sectioning content is just these four elements, and they are all float content.0801

I'll pull this up again; here is sectioning--that is the four that I just showed you, and they are all float.0811

They are not just one or the other; they are both.0820

They are both sectioning and float content, so both rules apply.0823

And they are allowed anywhere float content is allowed, because it is float content; and there are not any particular rules for sectioning content.0827

And it can contain more float content; so it can have a sectioning content element with a float content element in it, and it can go all the way down.0835

Heading content: heading content (I am going to pull this up) is the same as sectioning--every heading element is also a float element.0847

This is all of them: it is just the h1 through h6, and the hgroup.0859

So, it gets a little bit tricky with the hgroup, because of the rules of where they can be placed.0863

The general rule is that heading content can occur anywhere that float content is allowed.0870

But because of the hgroup element, you have to say, "or in an hgroup element,"0876

because all of these can appear inside of an hgroup element, even though the hgroup element doesn't have (as its content) flow content.0880

It has as its content these tags.0889

So, that is what this part--the other side of it--is: it is that heading content must contain phrasing content,0893

or if it is the hgroup, one of the other levels of headers.0898

So, I am going to show you where this is defined in the specification, so you can get an idea for how to read this.0903

Here is the heading content area; I am going to click on hgroup.0912

An hgroup is of category flow and heading (and then this other one we don't need to worry about).0917

It is allowed wherever flow content is allowed, and its content model is these h elements.0924

It doesn't say something like flow or phrasing; you can't have anything inside of an hgroup element except these six header elements.0933

Likewise, if I go to a header (they are all defined together, since they are so similar), they are the same category as flow and heading.0944

And where they may be used: they can appear where flow content is expected (which makes sense) or as a child of an hgroup element.0953

And then, when it comes to the actual headings, phrasing content is what needs to be inside of it.0961

Phrasing content--it makes sense that you would want phrasing content in a header,0968

because sometimes you have just a heading with just some simple text (that is a typo) like hello.0974

So, this is a text node, and that happens to be phrasing content.0985

But then, what if I wanted to say "Hello," with emphasis?0989

I put the emphasis on the wrong syllable.0998

This is phrasing content that is inside; now, what you don't want to be putting in here is things that are not phrasing content.1001

All right, that is heading content.1014

Phrasing content: we will talk about this now--all phrasing content is flow content.1018

Let's look at the chart again: here is phrasing, and so phrasing is both flow and phrasing.1024

Phrasing content makes up paragraphs, and it consists of the sort of tags that would have been in-line in HTML 4.1032

And just like in-line, it needs to have some sort of actual content, as a descendant, eventually (text or an image).1040

Now, the anchor element is a little bit special in phrasing content, because it depends on the context.1049

The anchor element is phrasing content when it contains only phrasing content.1057

But if it contains something other than phrasing content, it switches types.1063

I am going to pull this open again; and let's go and look at the specification.1070

Phrasing content--anchor: the same thing, where phrasing content is expected...1075

And it can't have any interactive content as a descendant; but this is where it is interesting.1083

The category that it fits into is flow content; but when it only contains phrasing content, then it is phrasing content.1090

It is also interactive content, but that is not important at the moment.1100

So, what this means is that, if you have a section element (which is not phrasing content),1105

and you wrap a link around it (which you are allowed to do), then this link is no longer phrasing content--1111

which is good, because now you can put this section (which is wrapped in a link) in places that it wouldn't normally be allowed,1117

just having an anchor tag, because it would be phrasing content; it wouldn't be allowed.1127

This is all the phrasing content elements; all of these asterisks mean that there are sort of special circumstances.1133

We looked at the special circumstance for the anchor element.1140

A couple of other ones have some; it depends on some contexts.1143

And a lot of these are not just phrasing content, but they are also embedded or interactive, or even meta-data content.1148

So, generally, they will be allowed to be containing more phrasing content only.1157

But if it is something like embedded and interactive, as well, then there are additional rules that apply.1165

Embedded content is also flow content and phrasing content.1175

All embedded content is all three, right? Some embedded content is also interactive.1180

Embedded content is allowed in the same places that flow content is allowed, usually.1188

And it has different types of content that it wants to have in it.1191

For example, no content: the image and the embed tags have no content.1199

This is just a simple matter of the type of tag it is.1209

They are void elements, so this is a complete image element.1213

If I go like this, and I try and give it some content, it is going to fail validation, because the content should be none.1223

And it is just wrong; and the same thing with the embed.1234

Now, on the other hand, video, audio, and canvas have transparent content.1238

And that is the content that is the fallback content.1244

Audio: if I put something in here, this text is only going to show up to the browsers that don't recognize this.1250

And it is fallback content, so it has a special type there (it is transparent) that we don't really need to worry about.1266

And then, there are a couple of elements that have special consideration.1277

The source element is contained in audio and video; the param element is contained in the object.1282

And it doesn't really occur anywhere else: object is allowed to have param; audios and videos are allowed to have source elements as the content.1290

I am going to show you in the specification.1299

Let's look at audio: the content--if the element has a source attribute, then it is transparent.1306

What that means is: the normal way you build an audio element--you give it a source,1315

and then, in this case, the content of the audio element is just simple transparent.1328

But there are other ways to do the audio element.1338

You can also give it...if it doesn't have a source element, and you want to specify the source through the source element instead...1342

The source element (I just clicked on it here) has these attributes: source, type, media.1352

When you delete this, and you want to specify multiple sources for your browser to pick through, you can do this.1359

And then, you can copy it, and maybe give it another file type here.1378

Say you have a really esoteric audio format called...that: uhe.1384

Say you have created your own, and so you want most people to get this.1391

But then, if yours doesn't support it (you have a weird device), then you have this weird kind.1396

The specification (going back) requires one or more source elements.1403

That makes sense, because if you take the source attribute out of the audio tag, then it needs a source from somewhere else; you need it in the elements.1411

And then, "one or more source elements, then transparent, but with no media element descendants."1421

So, anything after these is just the same old transparent tags.1427

So, it basically is a tricky way of having two source attributes in the audio element.1431

This is all of the embedded content elements, by the way.1443

And they are all straightforward, in terms of defining their content.1446

The last major group is the interactive content elements; all of them are flow.1457

Here is interactive; all of them are flow; some of them are phrasing; and some are both phrasing and embedded, right here.1463

Interactive content generally can appear anywhere the phrasing content is expected.1472

There are a couple of special exceptions that I will not go into, because if you are using them,1478

you will end up learning very quickly what the exceptions are and where they need to be used.1482

And usually, interactive content has specific rules about what it can contain.1488

Interactive content is things like forms--anything where the user has an input (buttons and input types,1492

and also the media elements, like audio--if you give it a control, that suddenly makes it interactive,1502

because you can click on the Play button, the Pause button, the volume, etc.).1508

That is what these little asterisks here for the media types are: audio is not normally interactive, but with the controls interface, then it is.1515

That is what this is saying right here: if the element has the controls attribute, then it is also interactive content.1529

Interactive content is cool, because...1542

Let's pull this up again; I'm going to scroll down to interactive content;1547

and let me click on button here; the content model for button is phrasing content.1555

If you have seen buttons, you are probably used to them just being very simple buttons, like that.1562

Refresh; I forgot to save; I had a syntax error; I was using the wrong page--OK.1579

So, here is your little button--very simple: click on it, and it does nothing right now.1602

And you are used to just seeing them have just regular text.1606

And that is because most buttons that you see on the Internet today are input types of button.1610

You put type="button", and then you give it a value; and this is sad, because it can only do this text.1620

You can't put HTML in here; that would mess it up.1636

But the content type for this is phrasing; so I can say, just like I was showing you before (I'm getting some typos there)...1640

I can say "hello world" with the emphasis; and when I zoom in, you will see that it actually showed up correctly.1655

And that is all because I know how to read the type for this.1664

I can read the content model, and I can tell that there is phrasing content.1670

And I don't have to worry about validating errors as much, because when I do run into an error,1674

and it says something weird, like "the element is not over yet" when it clearly is over, you know why.1682

It is because the content type has a problem with it.1689

And so, I really recommend that you get to know the content model, at least to some degree,1696

although for the most part, it will be kind of intuitive (like the image--if you are looking at image elements in websites,1704

you will see that they don't have a closing tag, and you will just intuitively not put a closing tag,1712

which gives it the correct content type of not having a content type).1717

And then, where it is not intuitive and you make mistakes, and the validation errors pop up,1723

you can look at that element, and then go to the specification really quickly.1729

And maybe just looking at this chart will be enough, but if it is not, then you can click on the actual element1732

and get the information, and see if you can clear up a lot of validation errors.1740

And that is that; thanks for watching Educator.com.1744