If you have followed along in our previous tutorials you learned how to make your first HTML5 webpage from a plain text editor and you learned the basics of how to write HTML5 tags. If this is your first time making a website from scratch I suggest you go back through those two lessons first before continuing with this one.
In this lesson we will be covering a very important tag called the head tag. We will cover what the head tag is, what goes in it and where to place.
What is the Head tag?
To help us understand how to use the head tag we need to cover what it is. Its important not to confuse the head tag with the header or heading tag as they are quite different. The head tag, like many other HTML tags, has an opening and closing tag like so:
The head tag by default is not displayed by the browser and is meant to be hidden. So if we cant see the head tag then why is it so important?
To start with the head tag is where you will place other very important tags like the title tag and other meta tags. More on meta tags later but for now we will take a closer look at the title tag
The title tag is what will display the title of your webpage in the browser. The title tag is not what you might expect, the title is displayed above the address bar in your browser as shown in the screen shots below. The title tag is the only element placed in the head that is visible to the viewer by default. All other tags placed in the head are automatically hidden.
Title Tag in Chrome browser Title tag in Edge browser
The title tag is only one of many tags that can be placed in the HTML5 head. A few others would be
- Link – Used to link cascading style sheets to the page
- Style – Adds cascading styles directly into the document
- Meta – Machine readable information about data on the page
- Base – Specifies the base URL for other anchor tags on the page
If you are unsure what those tags are just make a mental note and move on. We will be covering these tags in more detail later in our more advanced tutorial.
Where to place the HTML 5 head tag
Take a look at the very basic structure of a HTML5 document or webpage, you start off by declaring a document type then you have the html tag immediately followed by the opening and closing head tag, then your body tag and so on. Your source code should look similar to this:
<!DOCTYPE html> <html> <head> <title>This is the title of your web page</title> </head> <body> The content of your web page will go here between the opening and closing body tags.... </body> </html>
Now that you have an understanding of the head element we will move onto the next section. We will continue to add tags inside of the head when they are needed.