1
00:00:02,120 --> 00:00:04,110
So, currently we have one

2
00:00:04,110 --> 00:00:07,300
h one element on our website.

3
00:00:07,300 --> 00:00:09,060
But of course, in reality,

4
00:00:09,060 --> 00:00:12,370
you might already imagine that this will not suffice.

5
00:00:12,370 --> 00:00:14,430
We have more types of content.

6
00:00:14,430 --> 00:00:16,530
We don't just have titles.

7
00:00:16,530 --> 00:00:19,790
We might also have images and subtitles,

8
00:00:19,790 --> 00:00:23,770
and regular text and buttons, and so on.

9
00:00:23,770 --> 00:00:28,390
So one element alone is probably not getting us anywhere.

10
00:00:28,390 --> 00:00:32,159
So therefore, which HTML elements exist?

11
00:00:32,159 --> 00:00:36,530
Well, there are many available HTML elements,

12
00:00:36,530 --> 00:00:40,440
because there are a lot of things you can describe.

13
00:00:40,440 --> 00:00:43,780
A lot of different kinds of content.

14
00:00:43,780 --> 00:00:45,880
We might immediately think about content

15
00:00:45,880 --> 00:00:48,340
like titles, subtitles,

16
00:00:48,340 --> 00:00:49,510
regular text,

17
00:00:49,510 --> 00:00:53,200
images, buttons, maybe also input fields.

18
00:00:53,200 --> 00:00:55,250
But if we dig a bit deeper,

19
00:00:55,250 --> 00:00:58,250
we can get more detailed than that.

20
00:00:58,250 --> 00:01:01,780
For example, we might be building a site like this,

21
00:01:01,780 --> 00:01:03,720
where we have a blog post in the end.

22
00:01:03,720 --> 00:01:08,290
And there we have a date, and we have an author,

23
00:01:08,290 --> 00:01:13,290
and of course, we could just describe that as plain text.

24
00:01:13,430 --> 00:01:16,130
But to us humans, it's more than text.

25
00:01:16,130 --> 00:01:19,860
It's a date, and it's the name of a person.

26
00:01:19,860 --> 00:01:22,100
So we might even want to describe

27
00:01:22,100 --> 00:01:24,980
this kind of content to the browser.

28
00:01:24,980 --> 00:01:27,910
So if we think about content like this,

29
00:01:27,910 --> 00:01:29,800
then it makes sense that we might have

30
00:01:29,800 --> 00:01:33,133
quite a lot of HTML elements we can use.

31
00:01:34,000 --> 00:01:36,210
And indeed, we do.

32
00:01:36,210 --> 00:01:40,000
There is a webpage out there, the MDN Web Docs,

33
00:01:40,000 --> 00:01:43,300
which is kind of like the official documentation

34
00:01:43,300 --> 00:01:46,310
for HTML and more, you could say.

35
00:01:46,310 --> 00:01:51,310
And there, you find a page with an HTML elements reference.

36
00:01:51,450 --> 00:01:55,780
On this page, you find all available HTML elements.

37
00:01:55,780 --> 00:01:59,380
And that is a long list if you scroll through it.

38
00:01:59,380 --> 00:02:01,140
But don't worry.

39
00:02:01,140 --> 00:02:03,160
You don't need to learn those by heart.

40
00:02:03,160 --> 00:02:06,020
You should absolutely not dive into this list

41
00:02:06,020 --> 00:02:10,240
and try to fully understand and learn it right now.

42
00:02:10,240 --> 00:02:12,480
Instead, throughout this course,

43
00:02:12,480 --> 00:02:13,680
we're going to introduce

44
00:02:13,680 --> 00:02:16,300
all those important HTML elements

45
00:02:16,300 --> 00:02:17,940
you're working with all the time,

46
00:02:17,940 --> 00:02:19,500
and we're also going to dive into

47
00:02:19,500 --> 00:02:22,680
some lesser-used elements, of course.

48
00:02:22,680 --> 00:02:25,920
And then you can always use resources

49
00:02:25,920 --> 00:02:28,370
like this MDN page as a backup,

50
00:02:28,370 --> 00:02:30,860
once you are a web developer,

51
00:02:30,860 --> 00:02:32,740
to find the right element

52
00:02:32,740 --> 00:02:36,500
for some niche case you might be facing.

53
00:02:36,500 --> 00:02:39,150
It's also worth pointing out already

54
00:02:39,150 --> 00:02:41,860
that the browser is quite forgiving,

55
00:02:41,860 --> 00:02:46,330
and there is more than one way of annotating content.

56
00:02:46,330 --> 00:02:50,240
You can annotate something as just regular text,

57
00:02:50,240 --> 00:02:53,120
or be more specific and make it clear

58
00:02:53,120 --> 00:02:56,370
that this is actually an address, for example.

59
00:02:56,370 --> 00:02:58,940
So you won't break your webpage

60
00:02:58,940 --> 00:03:02,600
if you go for a wrong HTML element,

61
00:03:02,600 --> 00:03:05,030
and there also won't be always

62
00:03:05,030 --> 00:03:07,830
a clear right element, either.

63
00:03:07,830 --> 00:03:10,000
Sometimes you have multiple options

64
00:03:10,000 --> 00:03:12,580
and you can go with the one which you personally

65
00:03:12,580 --> 00:03:15,760
think best describes the content you have.

66
00:03:15,760 --> 00:03:18,810
But again, that's already a bit too advanced here.

67
00:03:18,810 --> 00:03:20,680
That is something which we'll learn

68
00:03:20,680 --> 00:03:22,900
throughout the course, and that is something

69
00:03:22,900 --> 00:03:24,770
which you'll get a better feeling for,

70
00:03:24,770 --> 00:03:26,460
throughout this course.

71
00:03:26,460 --> 00:03:28,810
But of course, now at this point,

72
00:03:28,810 --> 00:03:30,337
you might be asking yourself,

73
00:03:30,337 --> 00:03:34,960
"Why do we have those different HTML elements?

74
00:03:34,960 --> 00:03:37,030
Why do we need them?"

75
00:03:37,030 --> 00:03:39,930
And the answer here, as mentioned before already,

76
00:03:39,930 --> 00:03:42,080
is that for a lot of content,

77
00:03:42,080 --> 00:03:44,560
if you don't add any extra annotation,

78
00:03:44,560 --> 00:03:47,920
that content doesn't really have a clear meaning.

79
00:03:47,920 --> 00:03:50,480
If you think about text, for example,

80
00:03:50,480 --> 00:03:53,030
There is a difference between having a title

81
00:03:53,030 --> 00:03:55,030
and regular text.

82
00:03:55,030 --> 00:03:59,220
But without some kind of annotation and or styling,

83
00:03:59,220 --> 00:04:01,110
there's no way for us to tell

84
00:04:01,110 --> 00:04:03,200
those different meanings apart.

85
00:04:03,200 --> 00:04:05,950
It is all just plain text, then.

86
00:04:05,950 --> 00:04:08,670
It's basically like in a Word document,

87
00:04:08,670 --> 00:04:13,270
where you also don't just write plain, unformatted text.

88
00:04:13,270 --> 00:04:15,270
Instead, you make text bold,

89
00:04:15,270 --> 00:04:17,100
you turn something into a title,

90
00:04:17,100 --> 00:04:19,690
to convey extra meaning.

91
00:04:19,690 --> 00:04:22,350
That's why we use HTML elements.

92
00:04:22,350 --> 00:04:26,450
Because with that, we can annotate and describe our content,

93
00:04:26,450 --> 00:04:28,420
and we can tell the browser

94
00:04:28,420 --> 00:04:31,600
that something should be a title, a subtitle,

95
00:04:31,600 --> 00:04:34,300
an image, or anything else.

96
00:04:34,300 --> 00:04:37,840
And that in turn then allows the browser

97
00:04:37,840 --> 00:04:40,520
to display this content correctly.

98
00:04:40,520 --> 00:04:42,930
And here it's important to understand

99
00:04:42,930 --> 00:04:45,990
that in the case of a webpage,

100
00:04:45,990 --> 00:04:48,900
there are different kinds of parties

101
00:04:48,900 --> 00:04:51,200
that will view the page.

102
00:04:51,200 --> 00:04:54,550
Of course that's us, as a regular visitor of the page,

103
00:04:54,550 --> 00:04:56,630
and we also need to know

104
00:04:56,630 --> 00:04:58,970
whether something is a title or not,

105
00:04:58,970 --> 00:05:00,750
otherwise it will be hard for us

106
00:05:00,750 --> 00:05:03,500
to get something out of that webpage.

107
00:05:03,500 --> 00:05:05,490
But it's not just us.

108
00:05:05,490 --> 00:05:09,040
It's, for example, all the search engine crawlers.

109
00:05:09,040 --> 00:05:12,010
So the tools search engines use

110
00:05:12,010 --> 00:05:14,880
to look at all the websites

111
00:05:14,880 --> 00:05:16,310
in the World Wide Web,

112
00:05:16,310 --> 00:05:19,500
and to then find out what that website is about,

113
00:05:19,500 --> 00:05:22,160
so that they can present that website

114
00:05:22,160 --> 00:05:24,480
if users search for something.

115
00:05:24,480 --> 00:05:27,260
If you search for something in Google,

116
00:05:27,260 --> 00:05:29,200
then Google shows results,

117
00:05:29,200 --> 00:05:32,840
and these results are the websites it's crawled,

118
00:05:32,840 --> 00:05:36,810
which it then thinks best fit your search query.

119
00:05:36,810 --> 00:05:39,860
And it's able to find out whether a website

120
00:05:39,860 --> 00:05:41,570
fits your search query

121
00:05:41,570 --> 00:05:44,410
because Google looks into that website.

122
00:05:44,410 --> 00:05:46,840
And since, of course, that search engine crawler

123
00:05:46,840 --> 00:05:50,070
is not a human, but some

124
00:05:50,070 --> 00:05:52,380
program written by developers,

125
00:05:52,380 --> 00:05:55,550
that search engine crawler needs extra hints

126
00:05:55,550 --> 00:05:58,260
like the HTML annotations,

127
00:05:58,260 --> 00:06:01,260
to find out what your page is about.

128
00:06:01,260 --> 00:06:03,630
So here we're not talking about a human,

129
00:06:03,630 --> 00:06:06,420
but about a computer looking at our website.

130
00:06:06,420 --> 00:06:09,810
And that hopefully also helps with understanding

131
00:06:09,810 --> 00:06:12,513
why extra annotations are needed.

132
00:06:13,570 --> 00:06:16,330
And last, but definitely not least,

133
00:06:16,330 --> 00:06:19,030
it's also important to keep in mind

134
00:06:19,030 --> 00:06:22,710
that not all human visitors of our website

135
00:06:22,710 --> 00:06:26,480
will be able to just look at our content.

136
00:06:26,480 --> 00:06:29,340
If a visitor is blind, for example,

137
00:06:29,340 --> 00:06:33,370
then he or she will not be able to see the content.

138
00:06:33,370 --> 00:06:36,530
Instead, that visitor typically will rely on

139
00:06:36,530 --> 00:06:39,780
assistive technologies like screen readers,

140
00:06:39,780 --> 00:06:42,570
to have that website content

141
00:06:42,570 --> 00:06:44,890
read out to him or her.

142
00:06:44,890 --> 00:06:49,080
And that means that we need to describe our content

143
00:06:49,080 --> 00:06:51,810
so that such assistive technology

144
00:06:51,810 --> 00:06:56,380
is able to read and present our content correctly.

145
00:06:56,380 --> 00:06:58,740
And because of all those different parties

146
00:06:58,740 --> 00:06:59,763
that are involved,

147
00:07:00,612 --> 00:07:03,220
we need to annotate and describe our content,

148
00:07:03,220 --> 00:07:07,010
and HTML is the language that allows us to do that,

149
00:07:07,010 --> 00:07:09,690
with help of those HTML tags

150
00:07:09,690 --> 00:07:14,253
that turn content into meaningful HTML elements.