1
00:00:00,780 --> 00:00:05,100
So in this video we're going to learn about a few more HDMI elements that are pretty common.

2
00:00:05,340 --> 00:00:11,970
So we've seen how to write comments we've seen head and body doc type in HCM owl as well as H-1.

3
00:00:11,970 --> 00:00:15,710
Now we're going to learn about a bunch more things that can go in the body.

4
00:00:15,840 --> 00:00:20,100
So in the slides there's a little cheat sheet here of some of the things that we're going to cover so

5
00:00:20,100 --> 00:00:22,170
we'll be referring back to this in a little bit.

6
00:00:22,350 --> 00:00:26,430
But before then I want to show you the MT-NW element reference.

7
00:00:26,430 --> 00:00:28,170
So this link is in the description.

8
00:00:28,170 --> 00:00:29,730
It's also in the slides.

9
00:00:29,730 --> 00:00:36,480
You could also just get there by googling M.D. n element reference and it's basically a web page that

10
00:00:36,480 --> 00:00:39,140
lists all the elements in HMO.

11
00:00:39,210 --> 00:00:45,270
So some people are surprised at how many there are other people other students that I've heard are surprised

12
00:00:45,570 --> 00:00:48,260
at how few there are there is around.

13
00:00:48,330 --> 00:00:49,360
And this is just a guess.

14
00:00:49,380 --> 00:00:53,500
I haven't counted but around a hundred or so this page has all of them.

15
00:00:53,520 --> 00:00:59,410
You can read about every single one so you know we could search for body and we could read about body

16
00:00:59,420 --> 00:01:01,100
of which we've already done.

17
00:01:01,340 --> 00:01:03,970
What I want to show you though is that there are a ton here.

18
00:01:04,110 --> 00:01:07,880
There are probably 10 to 15 that you will use all the time.

19
00:01:07,950 --> 00:01:13,230
I'd say if you do about half of these in the last few months none of these really what I'm trying to

20
00:01:13,230 --> 00:01:16,890
say is there's a lot of things here don't feel like you need to know all of this.

21
00:01:16,890 --> 00:01:21,010
This is one of those times where I'm going to tell you it's not about memorization.

22
00:01:21,300 --> 00:01:25,140
Let's go back to our H-1 and let's do a little bit of reading about once.

23
00:01:25,350 --> 00:01:32,280
So I'm just going to search on here for each one quick on the corresponding link and basically an H1

24
00:01:32,520 --> 00:01:36,640
down to an age six are the six levels of document headings.

25
00:01:36,780 --> 00:01:41,970
So in each one is going to be the most important heading on your page it's the largest heading down

26
00:01:41,970 --> 00:01:46,450
to an age 6 which is still a heading but it's the least important heading.

27
00:01:47,130 --> 00:01:53,340
So you can see there's an example here H1 H2 which three all the way down to age six.

28
00:01:53,340 --> 00:01:55,640
This is the resulting age to a male.

29
00:01:56,400 --> 00:02:00,850
So here's another example here where we've got some H1 and some other tags.

30
00:02:00,960 --> 00:02:04,110
And we end up with this heading element.

31
00:02:05,370 --> 00:02:07,860
Well go ahead and make a few more h ones.

32
00:02:07,890 --> 00:02:10,570
Sorry a few more Hedding elements will do in H-2.

33
00:02:10,800 --> 00:02:11,790
We won't do all of them

34
00:02:16,330 --> 00:02:21,460
and we'll do one more.

35
00:02:23,820 --> 00:02:27,150
And let's change this to be an age three.

36
00:02:27,300 --> 00:02:28,510
Let's do actually in age six.

37
00:02:28,510 --> 00:02:32,960
You can see how small they get and let's save it.

38
00:02:32,960 --> 00:02:39,870
Go ahead and open up our page again and you can see that we have a large Hedding slightly smaller heading

39
00:02:39,880 --> 00:02:40,090
.

40
00:02:40,200 --> 00:02:43,190
And this absolute smallest heading that we can go.

41
00:02:43,230 --> 00:02:49,380
So one other thing about H-1 and other headings is that they are something called the block level elements

42
00:02:49,380 --> 00:02:49,530
.

43
00:02:49,530 --> 00:02:53,800
So what that means is each one gets its own line.

44
00:02:54,870 --> 00:03:01,140
So even if I put them on the same line and I refresh the page every one of them gets a separate line

45
00:03:01,140 --> 00:03:04,450
and pushes everything after it to a new line.

46
00:03:04,470 --> 00:03:05,920
So this is important.

47
00:03:06,030 --> 00:03:10,350
This will come up because there are going to be other elements that do not behave this way and those

48
00:03:10,350 --> 00:03:12,010
are called inline elements.

49
00:03:12,200 --> 00:03:14,010
OK so you undo that.

50
00:03:14,040 --> 00:03:15,930
Make sure we have this spaced correctly.

51
00:03:15,930 --> 00:03:18,960
Let's go ahead and add some text here.

52
00:03:19,500 --> 00:03:26,480
So I'm going to let's say that this is just a little bios I'm going to put some text here.

53
00:03:26,700 --> 00:03:29,140
This is some text.

54
00:03:29,160 --> 00:03:30,230
Blah blah blah.

55
00:03:30,390 --> 00:03:34,470
And this I just want to be regular text.

56
00:03:34,470 --> 00:03:41,090
I don't want it to be big or highlighted or anything so I could just write text like this.

57
00:03:41,400 --> 00:03:45,060
Can I add a bunch more here.

58
00:03:46,800 --> 00:03:47,990
And I refresh my page.

59
00:03:48,050 --> 00:03:54,270
I get this giant thing of text on one line but let's say that I realize I actually want a line break

60
00:03:54,270 --> 00:03:54,930
right here.

61
00:03:54,930 --> 00:04:00,450
These are two paragraphs of nonsense to do that I can use the paragraph tag.

62
00:04:00,810 --> 00:04:03,720
So if you went back here and we search for the tag

63
00:04:09,300 --> 00:04:16,170
you'll see that the tag is just used to represent a paragraph of text and paragraphs are block level

64
00:04:16,200 --> 00:04:17,040
elements.

65
00:04:17,040 --> 00:04:20,860
So that means that they also go on their own line.

66
00:04:21,030 --> 00:04:22,620
So let's add a paragraph in here.

67
00:04:22,650 --> 00:04:28,080
So I want to split here and here sorry here.

68
00:04:28,080 --> 00:04:31,770
So I just wrap this in a paragraph tag like so

69
00:04:35,160 --> 00:04:39,030
and then I'll add another paragraph tag in front of this

70
00:04:42,750 --> 00:04:50,470
and afterwards there we go make sure we save it and we refresh.

71
00:04:50,790 --> 00:04:54,740
And now we have two paragraphs that are on separate lines.

72
00:04:55,140 --> 00:04:56,510
So let me go and get syntax.

73
00:04:56,520 --> 00:04:57,780
Let's just do Lorem Ipsum

74
00:05:00,930 --> 00:05:08,160
go to a generator and let's just pull a bunch of text here and copy this over so you can see may have

75
00:05:08,160 --> 00:05:13,140
something longer like that.

76
00:05:13,140 --> 00:05:17,640
It's actually a paragraph so it's not just one line but it's a paragraph and it has spacing after it

77
00:05:17,850 --> 00:05:20,200
before the next paragraph.

78
00:05:20,220 --> 00:05:25,710
So now that I have my paragraph here let's suppose that I wanted to make some text stand out I want

79
00:05:25,710 --> 00:05:32,420
to italicize the title of a book or I want to bold a key word for instance.

80
00:05:32,460 --> 00:05:36,190
So there are ways of doing that with each team I'll I'll show you one here.

81
00:05:36,360 --> 00:05:40,050
Let's say I want to make simply dummy text bolded.

82
00:05:40,260 --> 00:05:51,090
So to do that I could write a B tag around it and as I mentioned earlier this is actually not the best

83
00:05:51,090 --> 00:05:52,570
way of doing this anymore.

84
00:05:52,580 --> 00:05:56,040
We're going to show it to you here briefly just so you can see it.

85
00:05:56,040 --> 00:06:00,600
So I refresh the page and you can see simply dummy text is bold.

86
00:06:00,870 --> 00:06:05,270
And more importantly or equally importantly it doesn't take up a new line.

87
00:06:05,340 --> 00:06:06,800
It's still in line.

88
00:06:07,050 --> 00:06:11,640
So there is something called a block level element which we talked about these take up their own block

89
00:06:11,640 --> 00:06:12,100
level.

90
00:06:12,120 --> 00:06:18,900
This paragraph does this takes up its own block and there are inline elements that just slip in and

91
00:06:18,900 --> 00:06:22,140
won't actually force something down to a new line.

92
00:06:22,800 --> 00:06:26,840
So if we go back I did say it's not really the best way of doing it anymore.

93
00:06:26,940 --> 00:06:30,780
We're going to talk about that in a feature video about semantic markup basically.

94
00:06:30,790 --> 00:06:35,010
And each time at 5 your email now needs to be meaningful.

95
00:06:35,010 --> 00:06:40,160
So by simply saying something is bold it doesn't really say anything about the text.

96
00:06:40,170 --> 00:06:42,700
So rather there are a few options.

97
00:06:42,720 --> 00:06:48,900
The most common one is to use strong and so strong has a little pull a little bit more meaning it will

98
00:06:48,900 --> 00:06:50,420
do exactly the same thing.

99
00:06:50,430 --> 00:06:57,030
You will not notice a difference here but the idea is that by saying this is strong rather than bold

100
00:06:57,360 --> 00:06:59,470
that means something a little bit more.

101
00:06:59,610 --> 00:07:03,760
So you'll see in the future video really what this semantic markup is all about.

102
00:07:03,780 --> 00:07:05,540
What a shame all 5 is trying to do.

103
00:07:05,580 --> 00:07:08,940
But for now just know those are two ways of making something unfold.

104
00:07:08,950 --> 00:07:12,050
Likewise there are few ways if I talus using some text.

105
00:07:12,090 --> 00:07:17,010
So if I want to italicised Lorem Ipsum I could do the I tag

106
00:07:19,980 --> 00:07:27,240
you can see I have I tell Assayas form ipsum there but the better way of doing it is using the E-M tag

107
00:07:27,390 --> 00:07:32,170
which is for emphasis and it looks exactly the same.

108
00:07:32,340 --> 00:07:37,970
And the idea again is that emphasis means something more rather than just saying I.

109
00:07:38,220 --> 00:07:41,230
So we want to separate and this is what my five did.

110
00:07:41,310 --> 00:07:44,650
We want to separate our styling from our structure.

111
00:07:44,910 --> 00:07:49,920
So by saying something should be italicized or bolded that's actually the styling of it.

112
00:07:50,310 --> 00:07:56,130
But by saying something is stronger or something is emphasized that's not how it's styled or how it

113
00:07:56,130 --> 00:07:57,180
looks.

114
00:07:57,300 --> 00:08:00,830
That is more about the structure of it and what it means.

115
00:08:00,960 --> 00:08:05,150
So in summary we've got H-1 386.

116
00:08:05,310 --> 00:08:07,200
These are block level elements.

117
00:08:07,320 --> 00:08:09,920
We've got paragraph's which are also block level.

118
00:08:09,930 --> 00:08:15,790
They take up their own line and then we've got strong and E-M or emphasis.

119
00:08:16,080 --> 00:08:20,470
And these are inline elements that let us build our italicize things.

120
00:08:20,760 --> 00:08:25,050
But really what they do is call something out for being strong or being emphasized.

121
00:08:25,080 --> 00:08:28,680
And our browser just decides to make it italicised or make it bold