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.