WEBVTT
0
00:00.680 --> 00:01.040
All right.
1
00:01.040 --> 00:08.690
So in this lesson, we're going to learn all about the HTML void elements such as the horizontal rule and
2
00:08.690 --> 00:09.770
the break element.
3
00:10.130 --> 00:12.420
What exactly are void elements?
4
00:12.440 --> 00:19.700
Well, we've seen what non-void elements are, such as the paragraph element or the heading elements,
5
00:19.700 --> 00:25.070
and they're not void because they have content right here in between.
6
00:25.490 --> 00:33.340
A void element is an element where you are forbidden from putting any content inside the tag.
7
00:33.350 --> 00:37.160
And in fact the tag itself even looks very different.
8
00:37.160 --> 00:43.490
So this is a horizontal rule element (<hr />) and you can see that it starts out with an angle bracket, ends
9
00:43.490 --> 00:44.660
with an angle bracket,
10
00:44.660 --> 00:51.320
but then right here, there is this forward slash (/) just before the end of the tag.
11
00:51.410 --> 00:58.520
You might think this looks a bit like the closing tag of a normal HTML element, but it's actually subtly
12
00:58.520 --> 01:07.500
different, because here in the closing tag, that forward slash is just after the opening angle bracket.
13
01:07.500 --> 01:10.680
It's right here in front of the letter.
14
01:10.710 --> 01:17.760
Whereas in the void elements, the forward slash is actually just before the end of the tag.
15
01:17.850 --> 01:23.910
And normally by convention, you'll see a little space here as well between the tag name and also that
16
01:23.910 --> 01:25.170
forward slash.
17
01:25.710 --> 01:28.740
This is just something to be really careful about
18
01:28.740 --> 01:31.560
when you're creating these void elements.
19
01:31.560 --> 01:38.400
Make sure that you've got the forward slash, slashing in the right direction so this way (/)and not a backslash
20
01:38.400 --> 01:39.150
(\) like this.
21
01:39.150 --> 01:47.700
So when it points to the right, then it's a forward slash and when it points backwards, then it's
22
01:47.700 --> 01:49.020
a backslash.
23
01:49.770 --> 01:55.020
So what does this look like when we add it to a HTML document?
24
01:55.050 --> 02:02.250
Well, here we've got our previous two paragraphs and right in between the two paragraphs I've added
25
02:02.250 --> 02:10.860
a horizontal rule which will hopefully help us divide the content to show that this part is not related
26
02:10.860 --> 02:11.670
to this part
27
02:11.670 --> 02:18.840
and we've got some sort of separation in between. When we run this code or when we view it in a web browser,
28
02:18.840 --> 02:20.130
this is what you would see.
29
02:20.160 --> 02:25.560
You would see the first paragraph, the second paragraph, and then you would see this horizontal rule
30
02:25.560 --> 02:31.920
or basically, a horizontal line where the "hr" element would be in that document.
31
02:32.130 --> 02:35.970
Now the horizontal rule is not the only void element.
32
02:36.000 --> 02:38.910
Another common one you'll see is the break element.
33
02:38.910 --> 02:40.650
And it looks like this (<br />).
34
02:40.680 --> 02:47.670
Now, similarly, again, we've got the name of the tag and then we've got that forward slash and then
35
02:47.670 --> 02:50.190
we basically end the tag.
36
02:50.190 --> 02:51.810
So there is no opening tag.
37
02:51.810 --> 02:53.040
There is no closing tag.
38
02:53.040 --> 02:56.580
There is only a single tag that looks like this,
39
02:56.580 --> 03:01.650
and the name of the tag goes right before the forward slash.
40
03:01.770 --> 03:04.800
Now, how does the break element work?
41
03:05.280 --> 03:11.220
Well, it's really useful when you have things where you need to separate things onto separate lines
42
03:11.220 --> 03:13.440
in order to have the correct meaning.
43
03:13.470 --> 03:21.240
For example, if you have poems, they are in fact meant to be in the same paragraph, but they should
44
03:21.240 --> 03:27.900
really each be on different lines in order to make the rhyming work, or in order to make the structure
45
03:27.900 --> 03:29.370
of the poem correct.
46
03:29.400 --> 03:34.350
So this is a poem from one of my favorite poets, William Blake
47
03:34.350 --> 03:42.840
and in order for it to work, we can't have it all run in one line, even if it's in the same paragraph.
48
03:42.930 --> 03:49.980
If we had this code right here, even though yes, it is all in the same paragraph, it is all related
49
03:49.980 --> 03:52.920
to each other and this does make sense,
50
03:52.920 --> 03:54.960
but you don't look at poetry like this,
51
03:54.960 --> 03:56.250
it doesn't really work.
52
03:56.250 --> 04:00.270
We don't know where we're supposed to breathe and how we're supposed to read out the poem.
53
04:00.270 --> 04:04.350
So instead we can add our break elements that we just learned about.
54
04:04.590 --> 04:11.820
Our void element doesn't have any content in it, but it just shows where the breaks in this paragraph
55
04:11.820 --> 04:14.880
has to go in order for this poem to look right.
56
04:14.880 --> 04:19.110
And when this HTML document is rendered, this is what you'll see.
57
04:19.140 --> 04:21.410
A perfect layout for a poem.
58
04:21.420 --> 04:25.230
To see a World in a Grain of Sand
And Heaven in a Wild Flower,
59
04:25.260 --> 04:29.970
Hold Infinity in the palm of your hand
And Eternity in an hour.
60
04:30.390 --> 04:39.060
And it's all beautifully formatted thanks to each of our break elements at the end of each line.
61
04:39.540 --> 04:45.120
So now it's your turn to try an exercise using these void elements.
62
04:45.120 --> 04:53.160
So go ahead and download the starting files for this exercise from the course resources for this lesson,
63
04:53.700 --> 04:59.610
and when you've extracted it and opened it up, this is what you should see in the index.html.
64
05:00.960 --> 05:07.170
We've got the name of our poet, William Blake, and this is apparently his real address that he lived
65
05:07.170 --> 05:08.900
at at some point in life.
66
05:08.910 --> 05:14.160
And then we've got two paragraphs from Wikipedia which briefly describes the poet.
67
05:14.160 --> 05:20.790
And I want you to use everything you've learned so far in order to format this HTML document so that it will
68
05:20.790 --> 05:24.480
look like the goal that I've got right here for you.
69
05:24.600 --> 05:31.200
As you can see, this top-level, the name of our poet is going to be rendered as an h1, because
70
05:31.200 --> 05:35.450
that is the most important thing about this particular web page.
71
05:35.460 --> 05:40.800
And then we've got the address of the poet, which is rendered as a paragraph,
72
05:40.800 --> 05:47.520
but notice that addresses, even though they are a single paragraph, they again need to be broken up
73
05:47.520 --> 05:50.670
into separate lines using our break element.
74
05:50.670 --> 05:58.380
And then finally, we've got a horizontal rule that separates the address and the name of the author
75
05:58.380 --> 06:04.960
from the little bit of description of this author, which should sit in two separate paragraphs.
76
06:04.990 --> 06:12.720
Now I want you to pause the video and edit the index.html so you end up with this goal.png,
77
06:13.000 --> 06:19.930
when you preview this website instead of this jumbled block of text that we have at the moment.
78
06:20.650 --> 06:24.430
Pause the video now and give this challenge a go.
79
06:26.080 --> 06:26.620
All right.
80
06:26.620 --> 06:31.060
So hopefully you've given it a go and everything worked out.
81
06:31.720 --> 06:33.850
I'm going to run through the solution.
82
06:33.850 --> 06:41.200
So first we said we were going to have an h1 for his name, and then we're going to have a paragraph
83
06:41.200 --> 06:44.390
tag that encloses the address.
84
06:44.410 --> 06:52.240
Now, in order to have that address on different lines, we're going to add our break element to the
85
06:52.240 --> 06:53.860
end of each line.
86
06:53.860 --> 06:57.730
And remember, our break element is a self-closing tag.
87
06:57.730 --> 07:02.110
So we're going to create it like like so.
88
07:02.350 --> 07:09.340
Now I'm going to go ahead and simply copy and paste it to the end of each line and you can see how nicely
89
07:09.340 --> 07:11.710
our address is now formatted.
90
07:11.710 --> 07:19.240
And finally, we wanted these two paragraphs at the end to be separated.
91
07:19.240 --> 07:22.750
So I'm going to go ahead and simply do that.
92
07:22.870 --> 07:26.890
And now we are pretty much golden.
93
07:28.840 --> 07:31.960
We've achieved our goal output.
94
07:31.990 --> 07:38.380
We've got our h1, our address separated, and the only thing we need to do is to add that horizontal
95
07:38.380 --> 07:42.340
rule between the address and the two paragraphs.
96
07:42.370 --> 07:46.690
Let's go ahead and add the other void element that we learned about.
97
07:46.690 --> 07:52.960
And now we've completed the challenge and you can check yourself against the solution to make sure that
98
07:52.960 --> 07:56.530
everything that you did looks exactly the same.
99
07:56.680 --> 08:03.940
Now, a neat trick I like to use is to simply copy the solution and go to diffchecker.com, paste in
100
08:03.940 --> 08:05.470
the solution code,
101
08:06.620 --> 08:12.710
and then paste your code and then go ahead and click find difference.
102
08:12.770 --> 08:18.320
And it should highlight all the places that are different in case you've misspelled something or you've
103
08:18.320 --> 08:19.370
done something wrong.
104
08:19.370 --> 08:26.360
So for example, in this case, in our version, there is a space after the word Blake and the closing
105
08:26.390 --> 08:30.830
tag, which in terms of HTML will not make any difference.
106
08:30.980 --> 08:41.030
But had I instead maybe written the h1 incorrectly and I didn't write the h for the closing tag, then
107
08:41.030 --> 08:45.560
you can see our output looks completely different and we're looking through all of this text.
108
08:45.560 --> 08:51.590
We don't know why it's happened, so we go ahead and copy it and then diff it to the solution.
109
08:51.590 --> 09:00.770
And it should highlight the fact that that is incorrect and we should now be alerted to check the difference.
110
09:01.070 --> 09:04.490
That's one tip that I have for you today.
111
09:04.940 --> 09:13.800
And let me just go back to our index.html fix this bug and we should now be ready to go.
112
09:14.690 --> 09:22.340
Now in terms of do's and don'ts with void elements, sometimes you see people doing is they add a break
113
09:22.370 --> 09:28.010
tag to add a new line instead of creating a separate paragraph element.
114
09:28.040 --> 09:34.040
Now, this is not what you want to do because this is not very good for accessibility, which means
115
09:34.040 --> 09:40.630
it'll make it harder for blind users with screen readers to understand the content on your website.
116
09:40.640 --> 09:47.570
So I recommend you always create new paragraph elements when you have new paragraphs and use the break
117
09:47.570 --> 09:54.110
element only when there is some sort of reason why you would want to separate the different lines in
118
09:54.110 --> 09:55.220
a single paragraph,
119
09:55.220 --> 10:01.580
but it still is a single paragraph such as in the case of a poem or in the case of an address that we
120
10:01.610 --> 10:03.140
covered in this lesson.
121
10:03.830 --> 10:11.120
Now, the final thing to mention is that sometimes when you look at the horizontal rule element or the
122
10:11.120 --> 10:14.340
break element, you might see it represented
123
10:14.340 --> 10:21.240
without this final closing tag, you might see people simply write this, and this is perfectly valid
124
10:21.450 --> 10:21.950
HTML.
125
10:21.960 --> 10:26.940
So you could in fact have a horizontal rule that looks like this.
126
10:26.970 --> 10:34.620
You could have a break element that looks like this instead of the one with the forward slash at the
127
10:34.620 --> 10:35.190
end.
128
10:35.190 --> 10:38.370
And these are both valid options.
129
10:38.370 --> 10:44.670
You could go for this or you could go for this. As of HTML5, the latest version of HTML,
130
10:44.700 --> 10:50.490
what it's starting to do is it's starting to ignore this forward slash at the end so it doesn't even
131
10:50.490 --> 10:51.120
look at it.
132
10:51.120 --> 10:57.330
It sees the first part and already knows that a break is a void element and a horizontal rule is a void
133
10:57.330 --> 10:57.900
element,
134
10:57.900 --> 11:00.300
so it doesn't actually need to keep reading.
135
11:00.420 --> 11:06.150
But I recommend to write your code with this end forward slash.
136
11:06.150 --> 11:11.820
And the reason is because when you read your code, you as the human, it will be much easier for you
137
11:11.820 --> 11:19.590
to see that this is a void element and it doesn't need a closing tag so that you don't end up being
138
11:19.590 --> 11:26.370
confused and you can identify the void elements and the non-void elements easily and distinguish them
139
11:26.370 --> 11:27.240
from each other.
140
11:27.240 --> 11:34.260
So that's just a quick tip and something to alert you to when you see it written like this on the internet.
141
11:34.260 --> 11:35.850
Both versions are valid.
142
11:35.850 --> 11:39.720
You can pick and choose, but I recommend going with this version.