1
00:00:02,070 --> 00:00:03,810
Just to be very clear,

2
00:00:03,810 --> 00:00:06,070
we are done with this exercise

3
00:00:06,070 --> 00:00:10,780
and we practiced all those HTML elements again.

4
00:00:10,780 --> 00:00:14,810
But, there are more HTML elements we could use here

5
00:00:14,810 --> 00:00:18,010
to improve the semantics of our code

6
00:00:18,010 --> 00:00:19,520
or of our page.

7
00:00:19,520 --> 00:00:23,810
And that's always something we should strive for.

8
00:00:23,810 --> 00:00:26,350
Visually, the page is done,

9
00:00:26,350 --> 00:00:29,740
but for computers, search engine crawlers,

10
00:00:29,740 --> 00:00:33,570
for example, or people with assistive technologies,

11
00:00:33,570 --> 00:00:37,600
we can still improve the semantics off this page.

12
00:00:37,600 --> 00:00:41,790
Take this don't word here. As an example.

13
00:00:41,790 --> 00:00:46,160
I'm clearly emphasizing this word here.

14
00:00:46,160 --> 00:00:50,020
That's why I did give it this bold font weight.

15
00:00:50,020 --> 00:00:54,260
Now this boldness is not something you see if you're blind.

16
00:00:54,260 --> 00:00:58,329
I only achieve it with CSS and the dead CSS code is not

17
00:00:58,329 --> 00:01:00,920
read out to blind people.

18
00:01:00,920 --> 00:01:02,750
So blind people don't see

19
00:01:02,750 --> 00:01:05,033
that I'm emphasizing the word don't.

20
00:01:05,960 --> 00:01:07,720
Now, why don't they see it?

21
00:01:07,720 --> 00:01:10,160
Because the CSS styles are not applied.

22
00:01:10,160 --> 00:01:12,090
And because the span element,

23
00:01:12,090 --> 00:01:13,890
which I'm wrapping around "don't"

24
00:01:13,890 --> 00:01:16,533
has no semantic meaning as you learned.

25
00:01:17,390 --> 00:01:20,490
And that's the part which we can improve here.

26
00:01:20,490 --> 00:01:23,340
There are better HTML elements

27
00:01:23,340 --> 00:01:25,780
we can use for situations like this.

28
00:01:25,780 --> 00:01:28,950
When we want to emphasize something, yes,

29
00:01:28,950 --> 00:01:31,740
we might want to bring our own styling,

30
00:01:31,740 --> 00:01:36,360
but we also want to semantically annotate that content

31
00:01:36,360 --> 00:01:39,360
to emphasize it even without the styling

32
00:01:39,360 --> 00:01:42,580
for assistive technologies, for example.

33
00:01:42,580 --> 00:01:45,070
And here we can, for example, use

34
00:01:45,070 --> 00:01:47,890
D E M element

35
00:01:48,920 --> 00:01:52,100
E M stands for emphasize,

36
00:01:52,100 --> 00:01:57,100
but we can also use the strong element as an alternative.

37
00:01:57,280 --> 00:02:00,170
And that also emphasizes to content,

38
00:02:00,170 --> 00:02:02,240
which you wrap it around.

39
00:02:02,240 --> 00:02:05,990
The difference is basically the pronunciation

40
00:02:05,990 --> 00:02:10,440
you would use if you would read out this sentence.

41
00:02:10,440 --> 00:02:11,800
With strong,

42
00:02:11,800 --> 00:02:16,050
we want to put strong emphasis on that word

43
00:02:16,050 --> 00:02:18,830
or that text, which is wrapped by it.

44
00:02:18,830 --> 00:02:21,670
Which basically translates to us ramping

45
00:02:21,670 --> 00:02:24,520
up our voice to speaking of it louder.

46
00:02:24,520 --> 00:02:28,250
For example, I could be reading out this sentence here as

47
00:02:28,250 --> 00:02:31,620
you don't use it for styling purposes,

48
00:02:31,620 --> 00:02:33,510
if I use strong.

49
00:02:33,510 --> 00:02:36,270
If we use M we instead mean emphasis,

50
00:02:36,270 --> 00:02:40,440
which is not conveyed by raising our voice,

51
00:02:40,440 --> 00:02:44,120
but by changing our tone a little bit.

52
00:02:44,120 --> 00:02:44,953
For example,

53
00:02:44,953 --> 00:02:46,930
I could be reading this out as

54
00:02:46,930 --> 00:02:50,920
you don't use it for styling purposes.

55
00:02:50,920 --> 00:02:53,190
And I hope the difference is clear.

56
00:02:53,190 --> 00:02:54,640
So which one is better?

57
00:02:54,640 --> 00:02:58,570
That really depends on which kind of emphasis you want here

58
00:02:58,570 --> 00:03:01,290
and here I want strong emphasis.

59
00:03:01,290 --> 00:03:03,640
So I will use the strong element

60
00:03:03,640 --> 00:03:06,320
because I want this to be read as

61
00:03:06,320 --> 00:03:09,523
you don't use it for styling purposes.

62
00:03:10,460 --> 00:03:15,000
Now we can actually even remove our highlight class here

63
00:03:15,000 --> 00:03:18,530
because it turns out that the browser default for strong

64
00:03:18,530 --> 00:03:20,590
is to make it bold.

65
00:03:20,590 --> 00:03:23,920
We could still also do it ourselves with CSS,

66
00:03:23,920 --> 00:03:27,000
but we don't need to do this ourselves anymore.

67
00:03:27,000 --> 00:03:31,620
The browser default is that it is bold, automatically.

68
00:03:31,620 --> 00:03:34,410
But now, it doesn't just look bold,

69
00:03:34,410 --> 00:03:38,710
but it also is semantically more correct.

70
00:03:38,710 --> 00:03:42,500
Now another semantic change we could make

71
00:03:42,500 --> 00:03:45,860
to this document, to this HTML file

72
00:03:45,860 --> 00:03:48,480
is that we wrap our different sections

73
00:03:48,480 --> 00:03:51,510
in the main content with an extra element.

74
00:03:51,510 --> 00:03:55,553
Though, I will say that this is optional and not required,

75
00:03:56,430 --> 00:03:59,740
but maybe for us as a human, as a developer,

76
00:03:59,740 --> 00:04:02,650
writing that code and working with that code,

77
00:04:02,650 --> 00:04:06,850
it would be nice if our content in those two sections,

78
00:04:06,850 --> 00:04:09,161
in the main element,

79
00:04:09,161 --> 00:04:13,530
would be kind of wrapped with a separate element each,

80
00:04:13,530 --> 00:04:16,870
just to make it a bit easier for us to quickly see where

81
00:04:16,870 --> 00:04:19,690
each section starts and begins.

82
00:04:19,690 --> 00:04:21,850
Because whilst it's clear that it starts

83
00:04:21,850 --> 00:04:23,500
with the H two element,

84
00:04:23,500 --> 00:04:26,670
it's not obvious that it ends after the paragraph.

85
00:04:26,670 --> 00:04:30,580
We have to look at the code as a whole to determine this.

86
00:04:30,580 --> 00:04:32,790
And that's when we can actually wrap it

87
00:04:32,790 --> 00:04:37,563
with another HTML element, the section element.

88
00:04:38,430 --> 00:04:41,620
We can take all our code here,

89
00:04:41,620 --> 00:04:45,620
up to the next H2 tech, but excluding that tag,

90
00:04:45,620 --> 00:04:48,050
and put that into section

91
00:04:48,050 --> 00:04:52,530
and do the same here for the CSS summary, add the section,

92
00:04:52,530 --> 00:04:56,210
select all the content that goes in that section,

93
00:04:56,210 --> 00:04:59,480
not the footer though, just like this,

94
00:04:59,480 --> 00:05:02,240
and put that into the section here.

95
00:05:02,240 --> 00:05:04,913
And then I'll press that auto format shortcut.

96
00:05:05,810 --> 00:05:09,700
Now we've got those section elements and as the name implies

97
00:05:09,700 --> 00:05:12,160
semantically they, mark up a

98
00:05:12,160 --> 00:05:15,630
separate section of your content.

99
00:05:15,630 --> 00:05:18,890
We don't have to add them because the H2 element also

100
00:05:18,890 --> 00:05:22,350
already does this, but now we make it super clear,

101
00:05:22,350 --> 00:05:24,950
which doesn't hurt. And for us as a developer,

102
00:05:24,950 --> 00:05:26,960
this now also might be a bit easier

103
00:05:26,960 --> 00:05:29,200
to read and to work with.

104
00:05:29,200 --> 00:05:33,470
And therefore, the section element is the other new element,

105
00:05:33,470 --> 00:05:35,803
which I wanted to introduce here.