What is the head of a website
What belongs in the head of the HTML file?
The head of an HTML document is the upper part within theelement, which is not shown directly in the web browser when the page is being rendered. It contains additional information about the website, such as the, links to CSS files and a favicon, other metadata, such as the author of the website and a short description for search engines. This article covers all of these topics and more, to teach you how to make the most of the HTML file's head.
|Prior knowledge:||HTML basics as covered in Learn HTML.|
|Aim:||Learn what the head of the HTML document is for, the most important things that belong in it and how they affect the HTML document|
What is the HTML head?
Let's take another look at the simple HTML document we dealt with in the previous article:
The HTML header is the content in the element. Unlike the content of the element, which is displayed in the browser window, the header remains hidden in the browser. The task of the head is to contain metadata (en-US) about the document. In our example, the head is not very big:
On large websites, however, your head gets quite full. Take a look at the area in the element on your favorite websites by using the developer tools or simply by writing in the address line in front of the web address (e.g.). Our goal here is not to show all the possibilities of what to write in your head, but we are going to introduce you to the most important and useful things. Let's get started!
Add a title
We have already seen the element in action - it can be used to add a title to the web page. This can be confused with the element, which is used to give the content of the website a main heading within the element. Sometimes this main heading is also called the title. But the two elements are very different!
- The element appears on the website itself when it is loaded in the browser. This element should only appear once per page to act as the main heading for the current content.
- The element is part of the metadata and represents the title of the entire website, not just the content of a page on it.
Active learning: look at the example
- The first thing we'd like you to do is go to our GitHub repository and download a copy of the title-example.html page. To do that, you can either
- Copy the code directly from the page and paste it into a new text file in your code editor. Don't forget to save the file.
- Press the "Raw" button on the side, which will display the code in a new browser window. Now select in your browser menu File> Save Page As ... and save the file on your computer.
- Open this file in your browser. You should see:
It should be clear here where the element appears and where the element can be seen!
- You should also try opening the code in your code editor. Change the content of the elements, save the file and refresh the page in the browser. Try around a bit.
The content of the element is also used in other ways. For example, if you add the page to your bookmarks (Bookmarks> Add Bookmark or the button with the star in the address bar in Firefox), you will see that the content of the element is suggested as a name for the bookmark.
The content of the element is also used by search engines, as you will see below.
Metadata: the element
Metadata are data that describe data. HTML has an "official" way of adding meatadata to a document, the (en-US) element. Of course, the other things we discuss here could also be referred to as metadata. There are a number of different elements that can be placed in the element. We won't explain all of them here as it would get very confusing. Instead, we'll explain some of the things you will see frequently to give you an idea of what this is about.
Define the character set of a website
In the example above this line was included:
This element determines the character set used on the website - the set of characters that should be used by the browser is specified. is a universal character set that includes almost every character that is used in human writing. This means that your website can display almost all languages. So it's a good idea to put this on each of your web pages! If you do not use this, umlauts (Ä, ö) and ß will not be displayed correctly. For example, your website can use it to display both English and Japanese at the same time:
For example, if you set your character set to, the character set for the Latin alphabet, the website won't look as nice:
Active learning: experimenting with fonts
To try this out, use the simple HTML template again, which you used in the previous section about the element (title-example.html page). Change the value of in and add Japanese letters to your side. This is the paragraph we used:
Change the text in the paragraph to German text that contains umlauts. Then delete the element to see what happens. After that, paste the original tag back in and see the difference in the web browser.
Add author and description
Many elements include and attributes:
- specifies the type of meta element; what kind of information it contains.
- specifies the actual content of the meta element.
Two of these meta-elements, which it makes sense to use on your website, are presented here. You define the author and a short description of the website. Let's look at an example:
Providing an author is useful to show who wrote the website. Perhaps someone wants to contact the author with questions about the content or the code of the website. There are pages that automatically read out the author of the website in order to create a contact option for him.
A description that contains keywords that match the content of the page is a useful way of making the website appear higher up in search engines for relevant search terms. (Such methods are summarized under the term Search Engine Optimization (en-US), or SEO (en-US) for short)
Active learning: description for search engines
The description is also used by search engines on the results page. Let's take a closer look - in an exercise.
- Go to the home page of the Mozilla Developer Network.
- Take a look at the source code of the website (right / + click on the page, select View source code from the context menu or write in front of the web address in the address line).
- Find the description tag. It should look like this:
- Now search for "Mozilla Developer Network" in any search engine (we used Yahoo.) You will notice that the contents of the description tag and here appear - so it makes a lot of sense to use these two!
Note: If you search with Google, you will see some sub-pages of MDN, just below the link to the main MDN page. These are so-called sitelinks and they can be edited using Google's webmaster tools.
Note: Many elements are no longer as important as they used to be. An example is the keyword element (). This should provide keywords for search engines so that they can compile search results based on the keywords. In the meantime, this tag is being ignored by many search engines because Sprammers have filled the keyword list with hundreds of keywords, with which the search results could be manipulated.
Other types of metadata
As you browse the Internet, you will discover other types of metadata. Some functions on websites are proprietary creations (e.g. social network pages) that were written to provide certain information.
For example, there is Open Graph Data, which is a metadata protocol invented by Facebook to provide richer metadata. In the MDN source code you can find the following:
This code causes a link to MDN from Facebook, a picture and a description to be included. It will look like that:
Twitter uses very similar metadata, which have a similar effect. A specific title, a short description and an image can be displayed if a link is specified. As an an example:
Add special icons to the website
To further embellish the design of your website, you can add a reference to a special icon set in the metadata. These are then displayed in a specific context.
The favicon, which has been around for many years, is the first icon of its kind. It is 16 x 16 pixels and is used in different places. You can see favicons in front of the title of a web page in most browser tabs. If you add a page to your bookmarks, the favicon will also be used there.
You can add a favicon to your website as follows:
- Save the favicon with the extension in the same folder as your file. Most browsers would also accept and format, but with the ICO format you can be sure that older browsers also display the favicon.
- Add the following line to the section of your HTML file to create a reference to the favicon:
Here is an example of showing a favicon in a bookmarks list:
There are many other types of icons that can be added to the website these days. For example, you will find the following in the source code of the MDN homepage:
The comments explain what the different icons are for. For example, there is a high-resolution icon that is displayed when the website is saved on the home screen of an iPad.
Don't worry too much, you don't need to have all of these icons right on your website. They are more of a feature for advanced web developers and are not required to complete this course. You should only find out what these lines of code stand for if you see them in the source code of other websites.
- The element is used to include CSS files. This is included in the header of the HTML file. The element takes two attributes, one which indicates that it is a style sheet. The other attribute is, which contains the path to the CSS file as a value: