Now that we've seen how HTML elements and tags work, it's time to explore the bigger picture, what's 1
called the HTML Boilerplate. 2
And this will allow us to understand the structure of our HTML files just like how there is structure 3
to letters that you would write. 4
For example, there's the section where you have your address and then you probably would include a 5
Dear so and so, and then you have the body of your letter and finally you would write something like, 6
"Yours sincerely" and then your name and signature. 7
Similarly, there is a structure to our HTML files and it looks something like this. 8
And this is called a Boilerplate. 9
It's what you usually start off with when you create any new HTML file. 10
And we're going to go through it line by line so that we understand it. 11
At the top of every HTML file, there should be a "Doctype declaration." 12
And that's what this tag does. 13
It tells the browser which version of HTML the file was written in. 14
Now the latest version of HTML is HTML5 and the Doctype declaration looks like this with an angle bracket (<), 15
an exclamation mark(!), DOCTYPE in all caps and then html. 16
And this line tells any browser that's reading our HTML file that we have written our code in HTML Version 17
5. 18
The next part that we've got is the actual "html". 19
Now, this is going to be the "root" of the document. 20
It means that everything else, every other element, no matter if it's an h1 or an image or a link, 21
it's all going to go inside the opening and closing tags of the html element. And this attribute where 22
it says "lang," this is the language of the text content in that element. 23
So for example, if you're writing a website that is going to be targeted at English speakers, then 24
you're going to set your lang to English, 25
"en". 26
Now this isn't very important for the users who can see your website, 27
it's more important for the users who can't, because there are various screen readers and assistive technologies 28
that will look at this language attribute so that when they read out the website, they can pronounce 29
the words correctly. 30
"Opens profile photo. Follow @yu_angela. 31
Button." 32
Now, with the HTML element, we're starting to see the beginnings of a hamburger. 33
There's a bun at the top and there's a bun at the bottom. 34
For those of you guys who have been my longterm friends, you know how much I love food analogies, 35
but this is a great one because when we have an html element, usually there is the opening and the 36
closing and everything that belongs in it is sandwiched inside. 37
Now the next part of the HTML boilerplate is the "head element". 38
And this is an area where important information about our website is placed that is not going to be 39
displayed to the user. 40
It includes things that will help the website render in the browser correctly, but it doesn't include 41
any sort of content like text or images or anything that the user will see. 42
So one of the things that you should always have in the Head Section is a "meta" tag for the character 43
set encoding of the web page, and in this case, it's set as "UTF-8". 44
What this does is it ensures that the characters that you're using on your website gets displayed correctly. 45
So, for example, in certain character sets, it won't allow emojis to render, in other character sets 46
they won't have certain symbols like multiplication and division symbols, 47
and that's what this "meta" tag takes care of. 48
Usually by convention in our HTML boilerplate, we will simply just include this tag as is using the 49
"UTF-8" character set, which is one of the most common. 50
So you don't even have to think about it. 51
Now another thing that you should have in your Head Section is the "title" of your website, and that 52
title is usually what gets displayed up here in the tab bar. 53
And in fact, if you right-click on any website in Chrome, you can click to "View Page Source" and you 54
can see we've got our DOCTYPE, we've got our html element, inside it, we've got our head, our character 55
set. 56
And then if we scroll a little bit more, you can see we've got our title here. 57
And in between the opening and closing tags of the title, it tells you what title should be displayed 58
up here. 59
So in our case here, the title will simply say, "My Website." 60
Now, there's a lot more things that can go into the head element, as you've seen when we looked at 61
the Google home page, 62
but for now, these two are the most important things that will always go into your HTML files 63
and it's important to know. 64
We'll cover other tags as we come across them. 65
Now, the next sandwich inside the sandwich, if you will, are two slices of tomatoes. 66
No, just kidding. 67
It's actually the "body element." 68
Just like a person, 69
after the head element comes the "body" element. 70
Inside the body element is where we're going to be spending the majority of our time creating and writing 71
our website. 72
This is where all of the content of the website goes. 73
So the text, the titles, the images, the links, everything that you can do with HTML, 74
creating content and structure goes in between the opening and the closing tags of the body element. 75
So somewhere inside here. 76
Now what can go in here? 77
Well, we've seen already how an h1 works so we can put in a heading, we can add images, we can add 78
lots of things, 79
and this is essentially where the meat of our website is going to live. 80
Once our burger collapses down, you can see that this is what a typical website's HTML code is made 81
up of. 82
So no matter what you add into your body, you can vary it up, 83
but by default, most websites will start off with a boilerplate that looks like this. 84
When you're starting out, I often recommend students to type this out when they're creating new websites 85
and in fact you can have a go doing this now by going into VS Code, typing out these elements and creating 86
your website entirely from scratch. 87
Now, we're beginning to see this idea of nesting in an HTML document, and this is going to be a concept 88
that's going to become super important as we learn more and more programming, 89
but it's simple to understand if we come back to this analogy of the hamburger. 90
So we have our HTML element which has the opening and closing tags here, and it is exactly like our 91
hamburger bun. 92
So this is our top bun and this is our bottom bun, and sandwiched 93
in between is everything that goes inside the HTML element. 94
Now, if we take a look at our body element, then you can see here we've got the opening body tag, 95
which will represent with a slice of tomato and the closing body tag, 96
and in between those two slices of tomato is the content for our website. 97
Now, you'll notice that some of the HTML tags, even though they have an opening and closing tag, they're 98
not on different lines. 99
And that's because if we can fit it on one line and we can see the beginning and the end very easily, 100
then we don't actually need to create several lines, 101
but nonetheless, it still got a beginning and an end. 102
Now the important thing for us when we're writing code and we've got all of this sandwiching going on 103
that we indent our code properly so that you can see that this clearly lines up with the opening tag 104
here. 105
So they are clearly sandwiching something in between. 106
And then we have two spaces and we've got the next indentation level here. 107
So this one lines up with the closing tag and through this kind of indentation you can quite easily 108
visualize that this Head Section is clearly embedded inside the html section. 109
So just like our lettuce is inside our hamburger, by indenting our code properly, we'll be able to 110
keep our code tidy and we'll be able to see at a glance exactly what our code looks like. 111
Now, finally, because we're using VS Code, I want to tell you about a shortcut, 112
that means you don't have to type out this boilerplate every single time. 113
Once you've typed it out once or twice and you know exactly how this boilerplate looks, you can save 114
a lot of time by simply typing exclamation mark (!), 115
hitting Enter on the first selection and then it will automatically insert all of that code for you, 116
saving you a lot of time, especially when you're creating many HTML documents. 117
Now, the important thing here, though, is this only works if you have created a dot HTML (.html) website. 118
So notice that when you create a new file inside VS Code, if you name it and save it as something something 119
dot html, then this trick will work. 120
If you save it with another extension, then it won't. 121
There's a couple of things here that we haven't seen before, 122
a couple of more "meta tags" and there's a lot of other meta tags, 123
but here we've got one line here which says, http-equiv="X-UA-Compatible" content="IE-edge". 124
This basically just keeps our code compatible with Internet Explorer. 125
And in fact, I normally don't write this line anymore because Internet Explorer has been deprecated, 126
and is no longer in use. 127
So if you want to keep your code clean, you can actually delete this from your VS Code autogenerated 128
boilerplate. 129
Now the next one tells you the "viewport," and it defines how the website should be displayed relative 130
to the screen that it's being rendered on. 131
And this line of code just tells the browser how to display your website when it first opens. 132
So now that we've learned all about HTML boilerplates, it's time to build your own boilerplate, or 133
in this case, build your own burger. 134
As you've noticed, there are endless numbers of HTML elements and we're going to be creating our own HTML 135
elements, 136
but the important thing here I want you to understand is how nesting works in HTML and how you can keep 137
your code tidy by using good indentation and keeping good programming practices. 138
If we're building our own imaginary burger, let's imagine the world's best burger, 139
you can have it vegan, you can have it vegetarian, you can have bacon, you can have whatever it is 140
your heart desires, but you have to write it in HTML code. 141
Let's begin by creating a bun. 142
So I've got a bun element that I've created which has an opening and a closing tag, and I've added 143
an attribute. 144
You can add as many of these attributes as you like. 145
And remember, we add attributes by giving it a name, and then after an equal sign, we give it a value. 146
Now the next part is for you to invent. 147
So head over to VS Code and build your own burger, adding in whatever elements you want. 148
Add tomatoes, add ham, but make sure that you're keeping the indentation correct and that you're working 149
with this idea of opening and closing tags. 150
But you can be as creative as you like, and be sure to share your code for your burger in the Q&A section. 151
And if you want some inspiration, 152
this is one that I made earlier, but I want you to practice making your own and doing it your way. 153
Have a go at that and once you're done, head over to the next lesson.