02. HTML Boilerplate

Introduction

This lesson explains the standard HTML template, also known as a boilerplate template. This lays out the complete structure of an HTML document, and is necessary for any live webpage.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Identify the difference between the <head> and <body> tags.
  • Explain why the meta charset tag is necessary.

HTML Boilerplate

All HTML documents have the same basic structure that needs to be in place before anything useful can be done. This is often referred to as the boilerplate, because it is pretty standard and necessary for any website.

Did you know - when you create a new page on Neocities, the boilerplate is already included in your file!

Basic, minimal HTML structure looks like this:

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> </head> <body> </body> </html>
Code language: HTML, XML (xml)

Let’s look at the different pieces:

First, we have a DOCTYPE declaration, which tells the browser you are working with an HTML file.

Then, we have the <html> tag, which is ‘nested’ around all of the other tags (we’ll discuss nesting in a bit).

Next, we have the <head> tag. Currently, we just have two tags nested inside of here: the <title> tag, which tells the browser tab what to title your website, and the <meta> tag, which tells the browser how to interpret special characters.

The <meta> tag is important because without it, if you were to post something like an emoji – the browser wouldn’t understand how to interpret that and instead it would have a strange icon.

Finally, we have the body tag, which is where the main content on your website will go.

As mentioned earlier, Neocities makes it easy to not worry about this stuff. When you make a new file, it’s all there and you just gotta put your content in the <body> tags, but it’s still good to know.

It should also be noted that CodePen does not require this full HTML template, but live webpages do. This means you can skip adding this to CodePen (unless you just want to practice using it) because it’s not necessary.



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.