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.
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>
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'.
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:
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:
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 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 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>
x10hosting offers free and fast web hosting as well as other extras for your website such as custom email address and SQL databases. Creating a free or premium account using this link will help support this site.