Coders' Guidebook

The head and body elements of an HTML file

The head element of an HTML file contains information which helps format the webpage. 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 to the fundamental properties you should look to declare in the head element of your webpages.

The head element

Similar to other elements, the head element must begin with an opening tag <head> and end with a closing tag </head>. The contents of the head element will go between the opening and closing tags:

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

</html>

The title

Every webpage should have a title. The title is the name which 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 declare 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. Declare the character set in the head element as follows:

<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. Include the following viewport instruction in the head element to ensure your webpage's content scales appropriately when viewed on different size screens:

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

Stylesheets

Stylesheets are separate documents which contain instructions on how a webpage should be styled. The head element imports the information from these stylesheets and applies it to your content. Stylesheets deserve a whole tutorial of there own so if you want to learn more about them then see this tutorial.

The body element

The main content of your webpage will be stored in the body element. The body element is positioned immediately after the head element and consists of opening <body> and closing </body> tags. There is a wide variety of content we can input into the body including text, images, videos and applications.

With the head and body elements now added, our HTML file 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 >>>