Brenton Strine

Brenton Strine

Content Models

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (4)

0 answers

Post by David L on March 15, 2012

It made sense! Thanks for the video. But i think the words are self defining so it might be confusing for some.

2 answers

Last reply by: Brenton Strine
Wed Nov 16, 2011 11:47 AM

Post by John Recher on August 24, 2011

I was almost completely lost on this lesson. Had no problems with the rest, but this one seemed contradictory and confusing. I can only trust that it will be as intuitive as the very capable lecturer says it will be toward the end of the lesson.

Content Models

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • The HTML 4.01 Content Model 0:16
    • Block Elements and Inline Elements
    • Example: Block Elements and Inline Elements
    • W3C Markup Validation Service
  • The HTML5 Content Model 6:21
    • Overview of HTML5 New Content Categories
  • Flow Content 8:02
    • Specification for Content Models
    • Flow Content
    • Example: Flow Content Elements
    • List of Flow Content
    • BlockQuote Element
  • Sectioning Content 13:19
    • Introduction to Sectioning Content
  • Heading Content 14:06
    • Heading Content and hgroup Element
  • Phrasing Content 16:56
    • Attributes of Phrasing Content
    • Anchor Element in Phrasing Content
  • Embedded Content 19:33
    • Attributes of Embedded Content
    • No Content
    • Transparent Content
    • Source Elements and Param Elements
  • Interactive Content 24:16
    • Interactive Content Elements
    • Button Element

Transcription: 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

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.