1
1
00:00:00,520 --> 00:00:03,320
HTML elements are grouped into content categories
2
2
00:00:03,320 --> 00:00:05,300
based on what they're used for.
3
3
00:00:05,300 --> 00:00:07,450
And the categories are important for understanding
4
4
00:00:07,450 --> 00:00:10,970
what is valid markup in HTML.
5
5
00:00:10,970 --> 00:00:13,220
We'll see some examples of this in the next lecture
6
6
00:00:13,220 --> 00:00:16,300
when we talk about nesting HTML elements.
7
7
00:00:16,300 --> 00:00:18,170
Some categories that we're gonna talk about
8
8
00:00:18,170 --> 00:00:20,300
are subsets of other categories.
9
9
00:00:20,300 --> 00:00:23,430
For example, all elements which fall into the phrasing
10
10
00:00:23,430 --> 00:00:27,090
content category also fall into the flow content category.
11
11
00:00:27,090 --> 00:00:28,370
This is gonna make more sense
12
12
00:00:28,370 --> 00:00:30,650
as we go through this lecture.
13
13
00:00:30,650 --> 00:00:33,870
We're not going to cover all of the HTML categories here,
14
14
00:00:33,870 --> 00:00:36,620
but there are a few that we should know about,
15
15
00:00:36,620 --> 00:00:39,110
and you don't need to remember every category
16
16
00:00:39,110 --> 00:00:41,206
or every element that is in each category.
17
17
00:00:41,206 --> 00:00:43,340
Knowing that there are different categories
18
18
00:00:43,340 --> 00:00:45,516
will help you make sense of why some elements
19
19
00:00:45,516 --> 00:00:47,830
behave differently from others.
20
20
00:00:47,830 --> 00:00:49,480
All right. That's enough of that.
21
21
00:00:49,480 --> 00:00:50,493
Let's get started.
22
22
00:00:54,540 --> 00:00:56,470
So the first content type that we're gonna talk about
23
23
00:00:56,470 --> 00:00:58,860
is flow content.
24
24
00:00:58,860 --> 00:01:02,680
Typically these elements are texts or embedded content,
25
25
00:01:02,680 --> 00:01:05,950
or they contain that directly underneath them,
26
26
00:01:05,950 --> 00:01:09,763
like images or videos, or just plain text.
27
27
00:01:10,810 --> 00:01:15,310
Most HTML elements are part of the category of flow content.
28
28
00:01:15,310 --> 00:01:17,770
And there's a few that are not flow content,
29
29
00:01:17,770 --> 00:01:19,343
but most of them are.
30
30
00:01:20,630 --> 00:01:23,490
Flow content also has multiple sub categories
31
31
00:01:23,490 --> 00:01:26,880
and then elements can be grouped into those as well.
32
32
00:01:26,880 --> 00:01:29,140
So this is more or less what this looks like.
33
33
00:01:29,140 --> 00:01:31,840
You've got this massive group of elements
34
34
00:01:31,840 --> 00:01:33,970
that are called flow content.
35
35
00:01:33,970 --> 00:01:36,580
And these are basically all the elements
36
36
00:01:36,580 --> 00:01:39,410
that effect what the user sees.
37
37
00:01:39,410 --> 00:01:42,390
So, this is most HTML elements.
38
38
00:01:42,390 --> 00:01:43,730
So inside flow content,
39
39
00:01:43,730 --> 00:01:47,740
then we've got other sub categories that are very important.
40
40
00:01:47,740 --> 00:01:50,663
For example, the sectioning category of elements.
41
41
00:01:52,180 --> 00:01:53,560
The sectioning elements are used
42
42
00:01:53,560 --> 00:01:56,780
for grouping other elements into collections.
43
43
00:01:56,780 --> 00:01:59,330
So, this is what that means.
44
44
00:01:59,330 --> 00:02:01,880
Sectioning elements are special container elements
45
45
00:02:01,880 --> 00:02:03,820
that are used for grouping other elements
46
46
00:02:03,820 --> 00:02:05,660
into meaningful collections.
47
47
00:02:05,660 --> 00:02:08,270
For example, the article element,
48
48
00:02:08,270 --> 00:02:10,783
the section element, or the nav element.
49
49
00:02:11,640 --> 00:02:14,690
Notably the header, main, and footer elements
50
50
00:02:14,690 --> 00:02:17,120
are not considered sectioning elements.
51
51
00:02:17,120 --> 00:02:19,400
They are flow elements.
52
52
00:02:19,400 --> 00:02:21,800
We're going to talk about article, section, and nav
53
53
00:02:21,800 --> 00:02:24,360
in a lot of detail later on in this section,
54
54
00:02:24,360 --> 00:02:27,700
because they are some of the most used elements in HTML.
55
55
00:02:27,700 --> 00:02:29,810
Because they're used for grouping other elements
56
56
00:02:29,810 --> 00:02:31,600
into meaningful collections,
57
57
00:02:31,600 --> 00:02:34,220
we normally use them to separate our pages
58
58
00:02:34,220 --> 00:02:36,600
into different parts.
59
59
00:02:36,600 --> 00:02:38,600
As well as sectioning inside flow content,
60
60
00:02:38,600 --> 00:02:41,130
we've also got heading content.
61
61
00:02:41,130 --> 00:02:43,487
So the heading content is used for defining titles
62
62
00:02:43,487 --> 00:02:45,300
of a section.
63
63
00:02:45,300 --> 00:02:47,260
The heading content category is reserved
64
64
00:02:47,260 --> 00:02:50,917
for the six heading elements from <h1> to <h6>,
65
65
00:02:50,917 --> 00:02:53,270
<h1> being the most important title of the page
66
66
00:02:53,270 --> 00:02:56,230
and <h6> being the least important title of the page.
67
67
00:02:56,230 --> 00:02:58,600
The heading elements can only contain
68
68
00:02:58,600 --> 00:03:01,100
phrasing content inside them.
69
69
00:03:01,100 --> 00:03:03,320
So let's take a look at the final piece of the puzzle
70
70
00:03:03,320 --> 00:03:05,670
in here, which is phrasing content.
71
71
00:03:05,670 --> 00:03:07,900
So just to make sure that this is clear,
72
72
00:03:07,900 --> 00:03:10,520
sectioning, heading, and phrasing content
73
73
00:03:10,520 --> 00:03:13,300
are all subcategories of flow content.
74
74
00:03:13,300 --> 00:03:16,350
So phrasing content are plain text elements,
75
75
00:03:16,350 --> 00:03:18,640
or elements that become plain text
76
76
00:03:18,640 --> 00:03:21,620
if the associated resource is not available.
77
77
00:03:21,620 --> 00:03:22,510
So let's take a look at that.
78
78
00:03:22,510 --> 00:03:25,030
So for the most part, phrasing content is text
79
79
00:03:25,030 --> 00:03:26,610
and the markup of that text.
80
80
00:03:26,610 --> 00:03:29,870
For example, emphasis elements or strong elements,
81
81
00:03:29,870 --> 00:03:30,940
and so on.
82
82
00:03:30,940 --> 00:03:33,080
If it can be inside a sentence,
83
83
00:03:33,080 --> 00:03:35,550
the element is likely phrasing content.
84
84
00:03:35,550 --> 00:03:39,270
For example, you may put images inside a sentence
85
85
00:03:39,270 --> 00:03:40,760
if the image is related to that,
86
86
00:03:40,760 --> 00:03:44,150
and you want the sentence to be somehow associated with it.
87
87
00:03:44,150 --> 00:03:46,970
So, images are phrasing content,
88
88
00:03:46,970 --> 00:03:50,000
and so is audio, video, and there's a bunch of others.
89
89
00:03:50,000 --> 00:03:51,730
An important test for this
90
90
00:03:51,730 --> 00:03:54,050
is that if the associated resource,
91
91
00:03:54,050 --> 00:03:56,550
for example, the audio file that you're trying to load,
92
92
00:03:56,550 --> 00:03:59,000
is not available, or it can't be retrieved,
93
93
00:03:59,000 --> 00:04:02,510
then the audio elements become text,
94
94
00:04:02,510 --> 00:04:04,480
and so that they can be displayed in the webpage
95
95
00:04:04,480 --> 00:04:05,690
in a different manner.
96
96
00:04:05,690 --> 00:04:07,670
So that is a good test for determining
97
97
00:04:07,670 --> 00:04:10,210
whether something is phrasing content or not.
98
98
00:04:10,210 --> 00:04:13,498
All elements which accept phrasing content inside them
99
99
00:04:13,498 --> 00:04:15,570
are expected to have a descendant
100
100
00:04:15,570 --> 00:04:18,040
that contains some plain text.
101
101
00:04:18,040 --> 00:04:20,337
And that plain text is expected to contain something
102
102
00:04:20,337 --> 00:04:22,610
other than just white space.
103
103
00:04:22,610 --> 00:04:26,970
So it needs to have some letters or numbers inside it.
104
104
00:04:26,970 --> 00:04:27,920
Okay, so just to recap.
105
105
00:04:27,920 --> 00:04:30,050
We've got the flow content category,
106
106
00:04:30,050 --> 00:04:32,440
which basically contains all HTML elements
107
107
00:04:32,440 --> 00:04:35,400
except a select few that don't affect
108
108
00:04:35,400 --> 00:04:38,210
what the user sees on the page.
109
109
00:04:38,210 --> 00:04:40,921
Inside flow content, there are multiple subcategories
110
110
00:04:40,921 --> 00:04:43,380
and the elements of each sub category
111
111
00:04:43,380 --> 00:04:44,960
can behave slightly differently
112
112
00:04:44,960 --> 00:04:47,430
or have slightly different properties.
113
113
00:04:47,430 --> 00:04:48,340
We've got, for example,
114
114
00:04:48,340 --> 00:04:51,220
sectioning elements that are used for dividing
115
115
00:04:51,220 --> 00:04:54,620
or grouping the other elements into meaningful collections.
116
116
00:04:54,620 --> 00:04:58,090
We've got the heading content, which is used for titles.
117
117
00:04:58,090 --> 00:04:59,500
And we've got phrasing content,
118
118
00:04:59,500 --> 00:05:01,490
which is used for plain text
119
119
00:05:01,490 --> 00:05:03,690
or elements that become plain text
120
120
00:05:03,690 --> 00:05:06,610
if their associated resource is not available.
121
121
00:05:06,610 --> 00:05:08,050
Again, just to reiterate,
122
122
00:05:08,050 --> 00:05:10,610
you don't need to remember every element
123
123
00:05:10,610 --> 00:05:12,470
and what content categories for,
124
124
00:05:12,470 --> 00:05:13,428
but knowing that these exist
125
125
00:05:13,428 --> 00:05:14,740
and that different elements
126
126
00:05:14,740 --> 00:05:16,150
are part of different categories,
127
127
00:05:16,150 --> 00:05:19,270
can help us understand why they behave differently,
128
128
00:05:19,270 --> 00:05:21,220
why sectioning elements behave differently
129
129
00:05:21,220 --> 00:05:23,560
from phrasing elements, for example.
130
130
00:05:23,560 --> 00:05:25,630
All right, that's everything for me for this lecture.
131
131
00:05:25,630 --> 00:05:26,950
Thank you for joining me in this one.
132
132
00:05:26,950 --> 00:05:28,600
And I'll see you in the next one.