WEBVTT

1
00:00:00.000 --> 00:00:05.157
[MUSIC]

2
00:00:05.157 --> 00:00:08.432
HTML's role in web design and
development is to provide structure and

3
00:00:08.432 --> 00:00:09.570
meaning to content.

4
00:00:09.570 --> 00:00:13.840
For example, a p tag identifies
content as a paragraph, and

5
00:00:13.840 --> 00:00:18.700
an h1 tag means that the text inside it
is the top level heading of the page.

6
00:00:18.700 --> 00:00:22.317
When you write markup that clearly
communicates the meaning of your content,

7
00:00:22.317 --> 00:00:24.635
it is said that you're
writing semantic markup.

8
00:00:24.635 --> 00:00:27.077
Now you'll hear the word
semantic markup or

9
00:00:27.077 --> 00:00:31.237
semantic HTML mentioned a lot in web
design and front end web development.

10
00:00:31.237 --> 00:00:35.480
Semantics is the meaning behind words,
phrases, or any text.

11
00:00:35.480 --> 00:00:39.817
Now semantics, as it relates to HTML,
is the idea that markup should describe

12
00:00:39.817 --> 00:00:44.303
the meaning of your content rather than
define its presentation or how it looks.

13
00:00:44.303 --> 00:00:47.204
For instance,
you wouldn't want to place what should

14
00:00:47.204 --> 00:00:51.610
be paragraph text inside an h1 tag
just to make the text large and bold.

15
00:00:51.610 --> 00:00:55.620
H1 and p tags convey two
completely different meanings.

16
00:00:55.620 --> 00:01:00.115
Writing semantic markup makes your website
more understandable to search engines.

17
00:01:00.115 --> 00:01:03.610
Clearly identifying important
information using a heading tag, or

18
00:01:03.610 --> 00:01:06.840
one of the other tags helps search
engines categorize your pages,

19
00:01:06.840 --> 00:01:10.004
and help users find
the content your site provides.

20
00:01:10.004 --> 00:01:14.159
In addition, carefully organizing your
content with HTML tags makes your site

21
00:01:14.159 --> 00:01:18.550
more accessible to users who rely on
assistive technologies to use the web.

22
00:01:18.550 --> 00:01:22.100
For example, users with visual
impairments use screen readers

23
00:01:22.100 --> 00:01:25.430
which literally read out
loud the words on a page.

24
00:01:25.430 --> 00:01:29.300
Writing semantic markups helps users with
screen reading software navigate a site

25
00:01:29.300 --> 00:01:30.410
and engage with the content.

26
00:01:31.530 --> 00:01:35.950
So as developers, it's our responsibility
to be thoughtful about the markup we

27
00:01:35.950 --> 00:01:39.915
write, making sure that each tag we
use is appropriate for the content.

28
00:01:39.915 --> 00:01:43.120
I'll teach you more about semantic
markup throughout this course.

29
00:01:43.120 --> 00:01:45.810
Now let's get started with
HTML's set of elements that

30
00:01:45.810 --> 00:01:47.340
help describe sections of content.

31
00:01:48.910 --> 00:01:53.627
A typical webpage can be divided
into three major sections, a header,

32
00:01:53.627 --> 00:01:55.681
footer and main content area.

33
00:01:55.681 --> 00:01:59.497
The header is the introductory content
usually at the top of the page,

34
00:01:59.497 --> 00:02:04.580
containing the site logo, navigation,
main heading and site description.

35
00:02:04.580 --> 00:02:08.080
At the bottom of the page, a footer
contains information about the site.

36
00:02:08.080 --> 00:02:13.220
Like the company address, site authors,
copyright date, and other site navigation.

37
00:02:13.220 --> 00:02:17.550
The pages main content appears
between the header and footer.

38
00:02:17.550 --> 00:02:20.988
This section contains the most
important content on the page.

39
00:02:20.988 --> 00:02:25.710
Such as blog entries, videos,
news articles, photo galleries,

40
00:02:25.710 --> 00:02:27.220
recipes, and so on.

41
00:02:27.220 --> 00:02:29.970
It's the section users
come to the page to see.

42
00:02:29.970 --> 00:02:33.614
Usually, the content inside the header and
footer is the same,

43
00:02:33.614 --> 00:02:37.616
or very similar, from page to page,
while the content area changes.

44
00:02:37.616 --> 00:02:39.871
You've seen how the body, head and

45
00:02:39.871 --> 00:02:45.160
title tags use standard human readable
words to describe the content inside them.

46
00:02:45.160 --> 00:02:49.799
Well HTML semantic sectioning and content
grouping elements are no different,

47
00:02:49.799 --> 00:02:51.299
using words like header,

48
00:02:51.299 --> 00:02:55.544
footer, section and article to indicate
their purpose in the document.

49
00:02:55.544 --> 00:02:59.499
Back in index.html, let's divide
our page into logical sections, and

50
00:02:59.499 --> 00:03:04.420
we'll start at the top by placing the
introductory content here inside a header.

51
00:03:04.420 --> 00:03:09.056
So, above the h1 element,
type an opening header tag,

52
00:03:09.056 --> 00:03:14.381
then place the closing header tag
right below the closing ul tag.

53
00:03:14.381 --> 00:03:18.373
And to indent the content inside
the header tags all at once,

54
00:03:18.373 --> 00:03:22.598
select the content then press Cmd or
Ctrl followed by the right or

55
00:03:22.598 --> 00:03:26.214
closed bracket key once to
indent the code two spaces.

56
00:03:26.214 --> 00:03:29.329
So now that we've grouped
the page's headline, tagline, and

57
00:03:29.329 --> 00:03:31.994
navigation list in a header,
let's create a footer.

58
00:03:31.994 --> 00:03:37.150
Footers are like headers, except they
usually appear at the bottom of a page.

59
00:03:37.150 --> 00:03:41.546
So right above the closing body tag and
below the closing ol tag,

60
00:03:41.546 --> 00:03:44.732
type a set of opening and
closing footer tags.

61
00:03:47.279 --> 00:03:51.661
Inside the footer, let's include
a paragraph tag that contains the name of

62
00:03:51.661 --> 00:03:53.587
the blog and the copyright date.

63
00:04:00.920 --> 00:04:05.676
Now this strange looking ampersand
copy text is called an HTML

64
00:04:05.676 --> 00:04:10.802
character entity and it's how you
add a copyright symbol in HTML.

65
00:04:10.802 --> 00:04:14.180
I teach you more about these
characters in a later video.

66
00:04:14.180 --> 00:04:16.358
In between the header and footer,

67
00:04:16.358 --> 00:04:21.090
the page's main content area is usually
further divided into subsections

68
00:04:21.090 --> 00:04:24.556
based on how you want to
logically group your content.

69
00:04:24.556 --> 00:04:29.053
So for example, the intro paragraph and
call to action link below

70
00:04:29.053 --> 00:04:33.488
the header are not closely related
to the blog entries below it.

71
00:04:33.488 --> 00:04:38.300
So let's divide the main content area by
grouping the blog entries into a section

72
00:04:38.300 --> 00:04:39.157
of their own.

73
00:04:39.157 --> 00:04:42.880
And HTML has just the element for
that, section.

74
00:04:42.880 --> 00:04:46.930
The section element groups together
related sections of content,

75
00:04:46.930 --> 00:04:50.180
like a group of blog entries,
news articles, or video.

76
00:04:50.180 --> 00:04:56.670
So just above the h2 tag,
type an opening section tag.

77
00:04:56.670 --> 00:05:00.693
Then add the closing section tag
below the last blog entry or

78
00:05:00.693 --> 00:05:05.293
just above the resources list so
that it wraps all the blog entries.

79
00:05:08.248 --> 00:05:13.021
And again, it's a good idea to indent
the code inside the section by

80
00:05:13.021 --> 00:05:18.241
selecting it and pressing Cmd or
Ctrl followed by the closed bracket key.

81
00:05:20.316 --> 00:05:24.559
The first element of each section
should always be a heading that

82
00:05:24.559 --> 00:05:27.872
indicates what the section is about or
its topic.

83
00:05:27.872 --> 00:05:31.760
In this case, it's the latest
articles about virtual reality.

84
00:05:31.760 --> 00:05:34.420
Next, let's add two more
sections to our page.

85
00:05:34.420 --> 00:05:37.230
The About section and the Contact section.

86
00:05:37.230 --> 00:05:40.698
So right above the article
section we just wrote,

87
00:05:40.698 --> 00:05:44.662
let's add a set of opening and
closing section tags, and

88
00:05:44.662 --> 00:05:50.130
inside this section, I'll nest an h2
to indicate what the section is about.

89
00:05:51.350 --> 00:05:54.109
In this case it's the about content so
I'll type about this site.

90
00:05:56.189 --> 00:05:58.763
Right below the h2,
I'll add a paragraph and

91
00:05:58.763 --> 00:06:03.252
paste in some placeholder text that will
serve as the about text for our site, and

92
00:06:03.252 --> 00:06:06.831
you can copy this snippet from
the teacher's notes of this video.

93
00:06:06.831 --> 00:06:09.411
All right, let's give this a save and
have a look in the browser.

94
00:06:10.947 --> 00:06:13.330
Here we have the about content.

95
00:06:13.330 --> 00:06:16.240
So now let's add the Contact
section of the page, and

96
00:06:16.240 --> 00:06:18.410
we'll do so below our article section.

97
00:06:18.410 --> 00:06:24.380
So back inside index.html,
I'll scroll down to just above the footer,

98
00:06:24.380 --> 00:06:28.437
and add a set of opening and
closing section tags.

99
00:06:31.212 --> 00:06:37.204
Inside the section element,
I'll add an h2 with a text contact,

100
00:06:37.204 --> 00:06:42.234
and right below a paragraph with the text,
Email us at,

101
00:06:42.234 --> 00:06:51.091
I'll make up an email here,
coolvrexperience@gmail.com.

102
00:06:56.652 --> 00:06:57.770
And there we have it.

103
00:06:57.770 --> 00:07:03.280
Now there are no hard and fast rules
about when to use or not to use sections.

104
00:07:03.280 --> 00:07:06.150
They're simply tags for
organizing your content and

105
00:07:06.150 --> 00:07:10.178
you can decide when it makes sense to
group related content into a section.

106
00:07:10.178 --> 00:07:13.252
And sections can also give your
page clearer structure and

107
00:07:13.252 --> 00:07:16.202
can help assistive technologies
like screen readers,

108
00:07:16.202 --> 00:07:20.710
used by the visually impaired users,
to identify distinctive parts of a page.

109
00:07:20.710 --> 00:07:24.900
Now there are other sectioning elements,
like the article tag, that are used for

110
00:07:24.900 --> 00:07:27.099
more specific types of content grouping.

111
00:07:27.099 --> 00:07:28.840
I'll teach you those in the next video.