The HTML Boilerplate
Introduction
Here is an HTML Boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
</body>
</html>This might look daunting at first, but as you’ll see, the boilerplate is a really simple piece of code.
Whenever you open or create a new HTML file, there is always going to be some “starter” text that you will have to write inside your HTML document. This is called the boilerplate which is what we are going to be learning. In this lesson, we will explore all the different parts of the boilerplate and how they are used in our HTML file.
Overview
By the end of this lesson, you should be able to:
- Learn how to make and open an html document
- Understand what the boilerplate is
- Understand what a DOCTYPE element is
- Understand the HTML, Head, and Body elements
- Be able to write a boilerplate in an HTML document
- Be able to view your code live on the web!
Creating a HTML file
Before starting today’s lesson, open up the coding folder you created in the code editors lesson and add a file in there named index.html If you already have that file in your folder, then no need to create another one. This is the folder where we will be practicing/writing all of our code.
<!DOCTYPE html>
When creating an HTML document, the <!DOCTYPE> declaration is the first line of code that should be included at the beginning of the document. This element informs the browser about the version of HTML the page is written in.
<!DOCTYPE html>Open the index.html file we created previously and add in a DOCTYPE declaration. Throughout the lesson, we’ll continue to build onto our boilerplate.
The <HTML> Tag
The next part of our boilerplate are the <html> tags. The <html></html> tags are used to enclose the entire contents of an HTML document, and they serve as a container for all other HTML elements.
All other HTML elements, such as headings, paragraphs, links, images, and forms, are placed between the opening and closing <html></html> tags. These elements provide structure and content to the document and define how it should be displayed in a web browser.
<!DOCTYPE html>
<html>
-- Content of our website --
</html>Go ahead and add the <html> opening and closing tag to our index.html file.
The "lang" attribute
The lang attribute in HTML tells us which language the content of an element is in. This helps tools like screen readers to understand the content.
To use the lang attribute correctly, we need to give it a value that is a language code like en for English, es for Spanish, or fr for French. By setting the lang attribute correctly, we can make our HTML content easier to understand for people who use assistive technologies.
Here is how we add the lang attribute to our HTML file:
<!DOCTYPE html>
<html lang="en">
-- Website Content --
</html>Go ahead and add the lang attribute to your index.html file.
Note:
It’s important to always surround attributes with quotes. For example,
"en"is the correct way to specify a value for an attribute, whileenwithout quotes is incorrect.
<head> Tag
The next Element that we have is the <head> element. The <head> tag in HTML contains essential information about the document, such as its title, styles, scripts, meta information, and other data. This helps web browsers render the document correctly. The head <head> usually contains a title element, as well as other elements like styles, scripts, and links. We will be learning about a few of these elements later in the lesson!
<!DOCTYPE html>
<html lang="en">
<head>
-- Header Content --
</head>
</html>As you can see, the <head> element will go inside of the HTML element. All of our tags and content always go inside the HTML element. Add the head element to your index.html file.
Meta Attribute
The <meta charset> attribute in HTML is used to specify the character encoding for the document. The character encoding defines which characters are used when the document is displayed in the browser. It is important to include the meta charset attribute in the head element of an HTML document to ensure that the document is displayed correctly. Add a meta attribute to yourindex.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
</html>As you can see, the <head> element will go inside of the HTML element. All of our tags and content always go inside the HTML element. Add the head element to your <indx.html> file.
<title> tag
Have you ever wondered how to change the text on top of a tab? We can edit that using the <title> tag. The <title> tag in HTML sets the title of the web page and is used by search engines and as the tab name in web browsers. It should be placed in the head element of the document and kept under 60 characters. Here is how we add it to our HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
</html>Add a <title> tag to your index.html file.
<body> Tag
In our HTML document, the <body> tag is used to define the content of a web page, including text, images, links, and other media. It can also contain scripts that are used to add interactive elements or manipulate the content. Basically, any sort of content that we choose to add whether its text or images, must go inside of the <body> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
-- Body Content --
</body>
</html>Add a <body> tag to your index.html file. Note that the <body> tag should be by itself. It should not be inside of the <head> tags .
And that’s it! What you just learned was the very basic HTML boilerplate syntax. In the next few lessons, we will learn how to add a variety of content to our website like headers, links, images, lists, and much more!
Practice
- Let’s practice writing the HTML boilerplate. As you start writing more HTML, this will become nothing more than second nature, but for now, it’s good for us to practice it.
- Start by writing everything you remember from this lesson. Once you are done, come back and check and see if you are missing anything. If you are, go back and add it to your boilerplate. Now, delete everything and try writing from pure memory once again.
Find an issue/typo/error with our content? Please report it here