All right. 1
So in this lesson, we're going to learn all about the HTML void elements such as the horizontal rule and 2
the break element. 3
What exactly are void elements? 4
Well, we've seen what non-void elements are, such as the paragraph element or the heading elements, 5
and they're not void because they have content right here in between. 6
A void element is an element where you are forbidden from putting any content inside the tag. 7
And in fact the tag itself even looks very different. 8
So this is a horizontal rule element (<hr />) and you can see that it starts out with an angle bracket, ends 9
with an angle bracket, 10
but then right here, there is this forward slash (/) just before the end of the tag. 11
You might think this looks a bit like the closing tag of a normal HTML element, but it's actually subtly 12
different, because here in the closing tag, that forward slash is just after the opening angle bracket. 13
It's right here in front of the letter. 14
Whereas in the void elements, the forward slash is actually just before the end of the tag. 15
And normally by convention, you'll see a little space here as well between the tag name and also that 16
forward slash. 17
This is just something to be really careful about 18
when you're creating these void elements. 19
Make sure that you've got the forward slash, slashing in the right direction so this way (/)and not a backslash 20
(\) like this. 21
So when it points to the right, then it's a forward slash and when it points backwards, then it's 22
a backslash. 23
So what does this look like when we add it to a HTML document? 24
Well, here we've got our previous two paragraphs and right in between the two paragraphs I've added 25
a horizontal rule which will hopefully help us divide the content to show that this part is not related 26
to this part 27
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
this is what you would see. 29
You would see the first paragraph, the second paragraph, and then you would see this horizontal rule 30
or basically, a horizontal line where the "hr" element would be in that document. 31
Now the horizontal rule is not the only void element. 32
Another common one you'll see is the break element. 33
And it looks like this (). 34
Now, similarly, again, we've got the name of the tag and then we've got that forward slash and then 35
we basically end the tag. 36
So there is no opening tag. 37
There is no closing tag. 38
There is only a single tag that looks like this, 39
and the name of the tag goes right before the forward slash. 40
Now, how does the break element work? 41
Well, it's really useful when you have things where you need to separate things onto separate lines 42
in order to have the correct meaning. 43
For example, if you have poems, they are in fact meant to be in the same paragraph, but they should 44
really each be on different lines in order to make the rhyming work, or in order to make the structure 45
of the poem correct. 46
So this is a poem from one of my favorite poets, William Blake 47
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
If we had this code right here, even though yes, it is all in the same paragraph, it is all related 49
to each other and this does make sense, 50
but you don't look at poetry like this, 51
it doesn't really work. 52
We don't know where we're supposed to breathe and how we're supposed to read out the poem. 53
So instead we can add our break elements that we just learned about. 54
Our void element doesn't have any content in it, but it just shows where the breaks in this paragraph 55
has to go in order for this poem to look right. 56
And when this HTML document is rendered, this is what you'll see. 57
A perfect layout for a poem. 58
To see a World in a Grain of Sand And Heaven in a Wild Flower, 59
Hold Infinity in the palm of your hand And Eternity in an hour. 60
And it's all beautifully formatted thanks to each of our break elements at the end of each line. 61
So now it's your turn to try an exercise using these void elements. 62
So go ahead and download the starting files for this exercise from the course resources for this lesson, 63
and when you've extracted it and opened it up, this is what you should see in the index.html. 64
We've got the name of our poet, William Blake, and this is apparently his real address that he lived 65
at at some point in life. 66
And then we've got two paragraphs from Wikipedia which briefly describes the poet. 67
And I want you to use everything you've learned so far in order to format this HTML document so that it will 68
look like the goal that I've got right here for you. 69
As you can see, this top-level, the name of our poet is going to be rendered as an h1, because 70
that is the most important thing about this particular web page. 71
And then we've got the address of the poet, which is rendered as a paragraph, 72
but notice that addresses, even though they are a single paragraph, they again need to be broken up 73
into separate lines using our break element. 74
And then finally, we've got a horizontal rule that separates the address and the name of the author 75
from the little bit of description of this author, which should sit in two separate paragraphs. 76
Now I want you to pause the video and edit the index.html so you end up with this goal.png, 77
when you preview this website instead of this jumbled block of text that we have at the moment. 78
Pause the video now and give this challenge a go. 79
All right. 80
So hopefully you've given it a go and everything worked out. 81
I'm going to run through the solution. 82
So first we said we were going to have an h1 for his name, and then we're going to have a paragraph 83
tag that encloses the address. 84
Now, in order to have that address on different lines, we're going to add our break element to the 85
end of each line. 86
And remember, our break element is a self-closing tag. 87
So we're going to create it like like so. 88
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
our address is now formatted. 90
And finally, we wanted these two paragraphs at the end to be separated. 91
So I'm going to go ahead and simply do that. 92
And now we are pretty much golden. 93
We've achieved our goal output. 94
We've got our h1, our address separated, and the only thing we need to do is to add that horizontal 95
rule between the address and the two paragraphs. 96
Let's go ahead and add the other void element that we learned about. 97
And now we've completed the challenge and you can check yourself against the solution to make sure that 98
everything that you did looks exactly the same. 99
Now, a neat trick I like to use is to simply copy the solution and go to diffchecker.com, paste in 100
the solution code, 101
and then paste your code and then go ahead and click find difference. 102
And it should highlight all the places that are different in case you've misspelled something or you've 103
done something wrong. 104
So for example, in this case, in our version, there is a space after the word Blake and the closing 105
tag, which in terms of HTML will not make any difference. 106
But had I instead maybe written the h1 incorrectly and I didn't write the h for the closing tag, then 107
you can see our output looks completely different and we're looking through all of this text. 108
We don't know why it's happened, so we go ahead and copy it and then diff it to the solution. 109
And it should highlight the fact that that is incorrect and we should now be alerted to check the difference. 110
That's one tip that I have for you today. 111
And let me just go back to our index.html fix this bug and we should now be ready to go. 112
Now in terms of do's and don'ts with void elements, sometimes you see people doing is they add a break 113
tag to add a new line instead of creating a separate paragraph element. 114
Now, this is not what you want to do because this is not very good for accessibility, which means 115
it'll make it harder for blind users with screen readers to understand the content on your website. 116
So I recommend you always create new paragraph elements when you have new paragraphs and use the break 117
element only when there is some sort of reason why you would want to separate the different lines in 118
a single paragraph, 119
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
covered in this lesson. 121
Now, the final thing to mention is that sometimes when you look at the horizontal rule element or the 122
break element, you might see it represented 123
without this final closing tag, you might see people simply write this, and this is perfectly valid 124
HTML. 125
So you could in fact have a horizontal rule that looks like this. 126
You could have a break element that looks like this instead of the one with the forward slash at the 127
end. 128
And these are both valid options. 129
You could go for this or you could go for this. As of HTML5, the latest version of HTML, 130
what it's starting to do is it's starting to ignore this forward slash at the end so it doesn't even 131
look at it. 132
It sees the first part and already knows that a break is a void element and a horizontal rule is a void 133
element, 134
so it doesn't actually need to keep reading. 135
But I recommend to write your code with this end forward slash. 136
And the reason is because when you read your code, you as the human, it will be much easier for you 137
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
confused and you can identify the void elements and the non-void elements easily and distinguish them 139
from each other. 140
So that's just a quick tip and something to alert you to when you see it written like this on the internet. 141
Both versions are valid. 142
You can pick and choose, but I recommend going with this version.