WebCodeFun

Beginner's HTML Course

Introduction to the <head> element in HTML

In this tutorial, we are going to build on our opening header section for our website and explore the <head> element in more detail. We will add a title, description and our first metadata.

YouTube Video

Written Guide

Contents

Introduction

As we discussed in the previous tutorial in our beginner's HTML course, our <head> element will contain all of the things we want for the page, that isn’t the content we will be displaying for our visitors within the actual web page. The <head> element will include links to our CSS (which we will use in our next beginner's CSS course to make the page a lot more pretty to look at), what language the page is written in, our title, our description, and much more.

Remember, anything you write within the head element is not expected to appear on the web page for viewers! All the content for the website user will be in our body.

Let’s not blow our minds too soon with what we can put in the <head> element though. We will start with the basics.

Add a title to the <head> element

If we open our web page in the browser, we can see that in the browser tab our page is called index.html. This is what our page file is called, but we can change this to whatever we want by using the title element. Back in our code editor then, and the <title> tags are what we need to use here. You can see that these follow the same opening and closing tag format that we learned in the previous tutorial in our beginner's HTML course.

<!DOCTYPE html>
<html>
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title>
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header>
</body>
</html>

Note our title is not the same thing as our page heading in the body. Whilst they could be the same text, what we put in our <title> tag will not appear on the page like the heading did. What it will do, is produce a title for our page in the tab of our browser. If we go to the browser and hit refresh, we can see that our title has now appeared in the tab at the top.

The title is also used when a user bookmarks the page. If you go and bookmark the page, you will see the title appearing. The title will also be used by search engines in the search results. The title can have a bearing on where your web page appears in the search results. This field of knowledge is called Search Engine Optimisation, or SEO for short. We’ll explore SEO in another course.

Add a description to the <head> element

The text underneath the title is usually the description for the page, but in reality, Google can and does choose different content to display here depending on what the search term was. Let’s write a description for our page next.

To do this, we will need to add our first meta element. Whilst the title is considered metadata, HTML also has an official meta tag that is used for all sorts of other metadata. Let’s add our description meta tag so we can see what we mean with an example.

We will add a meta tag, and inside we will give it a name attribute and a content attribute. Most meta tags follow this format. The name attribute specifies the type of meta element that it is. The content attribute then contains the information. There are lots of pre-set meta names, and description is one of them. Don’t worry, after building a few web pages you’ll start to memorise the most common ones, and the rest can easily be looked up.

The content of our description for my pizza sauce recipe will reads like this: HTML5 beginner’s course – tutorial series creating a pizza sauce recipe web page.

<!DOCTYPE html>
<html>
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page.">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header>
</body>
</html>

Notice how the tag doesn’t follow our other tags in having an opening and closing tag? Certain tags are self-closing and they do not need to be closed. As we will never add content outside of the attributes, we do not need to worry about closing it, as it will never wrap text content to form an element. These are also known as empty elements, or void elements.

Add character encoding to the <head> element

Next, we will use the meta element to specify the document’s character encoding. utf-8 is a universal character set that includes every character from all human languages. This means that the page will be able to handle displaying any language.

Whilst we are only using English language today, it's a good idea to set this on every web page you create, so that you do not ever run into any language character problems. To do this we will use the meta tag and add the charset “utf-8”, like so.

<!DOCTYPE html>
<html>
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header>
</body>
</html>

Notice how we haven’t followed the name/content attribute format? There are certain meta elements that have their own format. This is one of them. Luckily there are not many, and we soon get used to using them to the main ones.

Add language to the <html> element

Finally, we will add our language to the page. This isn’t strictly in the head element as it is actually written in the opening html tag. But this seems an apt time to add it. We type in lang=“en-GB”.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header>
</body>
</html>

This tells our browser and any bots or software scanning our HTML that the page is written in British English. Of course, you should change this to your national language if you are writing in a different one. American English is “en-US” for example.

It may seem unnecessary, but it is important to do this, as standard, on each page you create. It will help search engines to categorise your page more efficiently, and for those using screen readers, it will ensure your page is read correctly.

Useful resources

Need help?

If anything is unclear, please do get in touch by contacting me. In the next tutorial of this beginner’s course, we’ll learn how to add an image to a web page. This will give us an opportunity to explore attributes in more detail. Thanks for reading.

Back to top