All HTML documents have the same basic structure or boilerplate that needs to be in place before anything useful can be done. In this lesson, we will explore the different parts of this boilerplate and see how it all fits together.
To demonstrate HTML boilerplate we first need an HTML file to work with.
Create a new folder on your computer and name it
html-boilerplate. Within that folder create a new file and name it
You’re probably already familiar with a lot of different types of files. For example; doc, pdf, and image files types.
To let the computer know we want to create an HTML file, we need to append the filename with the
.html extension as we have done when creating the
Another thing worth noting is we named our HTML file
index. We should always name the HTML file that will contain the homepage of our websites
index.html. This is because web servers will, by default look for an index.html page when users land on our websites, and not having one will cause big problems.
Every HTML page starts with a doctype declaration, the doctype’s purpose is to inform the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5 and the doctype for that version is simply
The doctype for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
However, we probably won’t ever want to be using an older version of HTML and will always want to use
index.html file created earlier in your text editor and add
<!DOCTYPE html> to the very first line.
After we declare the doctype, we need to provide an
<html> element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
Back in the
index.html lets add the
<html> element by typing out its opening and closing tags like so:
<!DOCTYPE html> <html> </html>
<head> element is where we put important meta-information about our webpages and stuff required for our webpages to render correctly in the browser. Whatever is included within the head element will not be displayed to the user.
One element we should always include in the head of an HTML document is the title element:
<title>My First Webpage</title>
The title element is used to give webpages a human readable title which is displayed in the browser tab our webpage is in.
If we didn’t include a title element, the webpage’s title would default to its file name. In our case that would be
index.html which isn’t very meaningful for users and will make it very difficult to find our webpage if the user has many browser tabs open.
Another important element we should always have in the head element is the meta tag for the charset encoding of the webpage:
Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
There are many more elements that can go within the head of an HTML document. However, for now, it’s only crucial to know about the two elements we have covered here. But, we will introduce more elements that go into the head as and when we need them throughout the rest of the curriculum.
Back in our
index.html, let’s add a head element with a title and a charset meta element within it. The head element goes within the HTML element and should always be the first element under the opening
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> </head> </html>
The final element needed to complete the HTML boilerplate is the
<body> element. This is where all the content that will be displayed to users will go. The text, images, lists, links, and so on.
To complete the boilerplate, add a body element to the
index.html file. The body element also goes within the HTML element and is always below the head element like so:
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> </head> <body> </body> </html>
The HTML boilerplate in the
index.html file is complete at this point, but how do you view it in the browser? There are a couple of different options:
Using one of the methods above, open up the index.html file we have been working on. You’ll notice the screen is blank. This is because we don’t have anything in our body to display.
Back in the
index.html file lets add a heading (more on these later) to the body and save the file:
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> </head> <body> <h1>Hello World!</h1> </body> </html>
Now if you refresh the page in the browser, you should see the changes take effect, and a heading “Hello World!” will be displayed.
VSCode has a built-in shortcut you can use for generating all the boilerplate in one go. To trigger the shortcut, delete everything in the
index.html file and just enter
! on the first line. This will bring up a couple of options. Press the enter key to choose the first one, and voila, you should have all the boilerplate populated for you.
But it’s still good to know how to write the boilerplate yourself in case you find yourself using a text editor like notepad (heaven forbid) which doesn’t have this shortcut. Try not to use the shortcut in your first few HTML projects to build some muscle memory with how to write the boilerplate code.
index.htmlfile and try writing out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.