Information on how a webpage should be formatted is defined in the head element of an 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 some of the fundamental components you should incorporate into the head element of your webpages.
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 will go between the opening and closing tags:
<!DOCTYPE html> <html lang="en-GB"> <head> <!-- The contents of the head element will go here --> </head> </html>
Every webpage should have a title. The title is the name that 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 define 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. To define the character, add the following line of code to the head element:
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 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 content of your webpage 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>
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.