Coders' Guidebook
Tutorials Dictionary

The head and body elements of an HTML file

Details on how a webpage should be formatted are defined in the head element of the webpage's HTML document. In the head element, you can find instructions on how the webpage should be styled, listed by search engines, displayed in social media links and much more! This tutorial will introduce the fundamental components you should incorporate into the head element of your webpages.

The head element

Similar to other elements, the head element begins with an opening tag <head> and ends with a closing tag </head>. The contents of the head element sit between the opening and closing tags:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <!-- The contents of the head element will go here -->
</head>

</html>

The title

Every webpage should have a title. The title is displayed in the tab when a webpage is loaded by a web browser. For example, the title of this webpage is 'The head and body elements of an HTML file | Coders' Guidebook'.

head-and-body-elements.png

Titles should be brief but still provide a good description of what the webpage is about. For example, your title may include keywords such as 'Home', 'About' or 'Contact'. Once you have decided on a title, you can define it in the head element like this:

<title>Home</title>

The character set

The character set defines the letters, numbers and punctuation that your webpage will use. Almost all webpages use the character set 'UTF-8' because it covers almost all the characters and symbols you would ever find on a computer keyboard. To define the character set, add the following line of code to the head element:

<meta charset="utf-8">

The viewport

The viewport determines how much content is visible to the user. For example, a laptop will invariably have a larger viewport than a smartphone. The following viewport configuration is usually sufficient and will help ensure your webpage's content scales appropriately on different size screens:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Stylesheets

Stylesheets are separate documents that contain instructions on how webpages should be styled. The head element imports the information from these stylesheets and applies it to the content defined in the HTML document. Detailed instructions on how to design stylesheets and integrate them with your website are covered in the next tutorial.

The body element

Content that will be visible to the user is defined in the body element of the HTML document. The body element is positioned immediately after the head element and consists of opening <body> and closing </body> tags. The types of content you can input into the body include text, images, videos and interactive applications and will be covered in greater depth in upcoming tutorials.

At this point, your HTML file complete with head and body elements should look like this:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

<<< Previous

Next >>>