The first part of any HTML document is the header. With it, you can provide useful information about your page, or add styles and scripts. In This HTML Header tutorial, we will see what a header is and how to use it.
While understanding the HTML header is not rocket science, you may want to know just a little bit of HTML before that. Our tutorial on the basics of HTML covers that, so be sure to read it before reading this.
HTML Header Tutorial
The Head Tag
The header, or more correctly head, is a section in our HTML document. Indeed, it is the very first section of the document. We define this section simply with the <head></head> tags. However, that tag alone is just an empty container: we need to fill it with some meaningful stuff.
Before we start coding, take a moment to understand what is the purpose of this head. It initiates your HTML document, providing information about it. For example, it can include:
- Document title
- Information for search engines (such as the brief description that appears on Google search)
- Reference to external styles (CSS documents)
- Scripts to add some dynamicity (however, the modern approach is to put them at the end of the document, not in the header).
- Additional information about special configurations, such as AMP to make your website faster
We can pack all these options – and more – inside our head tag. So, the first thing we want to do is to create this head tag. If you come from our previous tutorial, we already have this in place:
<!DOCTYPE html>
<html>
<head>
<title>Bakery Store</title>
</head>
<body>
<h1>Bakery store</h1>
<h2>Who we are</h2>
<p>This isn't just another average bakery store.</p>
<h2>Our products</h2>
<p>We make the <b>finest</b> bakery products in town</p>
<h3>Bread</h3>
<img src="/assets/baguette.jpg" alt="A baguette"/>
<p>Check out our awesome loafs</p>
<h3>Burger buns</h3>
<p>Yes, we make <i>burger buns</i> as well</p>
</body>
</html>
Now, we won’t care about anything in the <body> for today. We will focus on <head> only.
Give your page a title
We already have in place a <title> tag. As we know, this gives a title to your page. It is what will appear on the tab name of your browser. Besides that, it will also appear as the title in the search results of a search engine.
Not much to explain here, you can just put some text as a title. However, we have one remark: keep it short, but not too short. That’s because the space where it will be displayed is limited, both in the browser and on search engines. Even more, search engines don’t like too long titles and will penalize you. Much better to stay around 6-7 words, maybe up to 10.
We already have a title in place from our previous tutorial, so we don’t need to do anything here.
<title>Bakery Store</title>
HTML Header is About Style
As we will see in this section of this HTML Header Tutorial, we can use the header to define many styling settings. Most commonly, however, we will just reference an external file dedicated to style.
Viewport
Now, this may sound counter-intuitive at first, but it is something we really need to do. The viewport is the portion of the page we want to show on the screen.
Pause for a second and imagine a sheet of paper. It has a definite size, and you can only write within that size. Instead, our “virtual piece of paper”, which is the HTML document, is potentially unlimited. It can be as large and as long as you want. Still, the screen where we see the document has a definite size. If you are on a smartphone, it will be somewhat like 5-6 inches. Instead, you will typically have 13-17 inches for a laptop.
Imagine that screen as a lens you can move around over the infinite piece of paper. That’s what the viewport is. And, we need to put in our HTML header what size we want our viewport to be. Obviously, we want the viewport to be large exactly as our device screen. The thing is, no browser (when converting the HTML to visual content) will assume so. We need to tell that explicitly. If we don’t, when we apply styles we will mess something up.
So, just place this code in your head. Even if you didn’t understand viewports completely, just do it. This exact same code should appear in all of your HTML documents.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Note that we set the initial scale to 1, telling we are not trying to zoom anything in or out.
Furthermore, by defining the viewport, Google will understand your page is going to be optimized for mobile devices. That’s because, most likely, it will be.
Style
Inside our head, we can put a <style></style> tag, and write some CSS code into that. In case you aren’t familiar with it, CSS code applies a style to our HTML: colors, layouts, fonts, and more. However, it’s not really a good practice to write our CSS inside our HTML document, so we don’t normally do that.
In case you are curious, you can try with the following code that will make all your text red.
<style>* { color: red; }</style>
However, we are not going to do it as part of this HTML Header Tutorial. Just know you have this possibility, but that best practices advise you against that.
Reference an External Style Sheet
Instead of defining our style inside the HTML document, we can use a reference, a link. With this, we basically tell “Hey, go read this other file and take the style from there”. We can do that with the self-closing <link/> tag. With this, we need to specify two things:
- The URL or path of the document we are linking
- The type of link we are making. In this case, we are linking a CSS document, so the link type should be
stylesheet.
We provide the URL with the href attribute (just like the <a></a> tag), and the type with the rel attribute.
So, create in your project root a new folder named css, and then put in it a file named style.css. For now, you can leave this file empty, we are not going to see how CSS works as part of this HTML Header Tutorial.
Then, in your HTML header, you can use the following code.
<link rel="stylesheet" href="css/style.css"/>
You could also use this technique to include a font. In the following example, we include Roboto Regular from Google Fonts.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
However, just know you can include a font directly inside a CSS document so that you don’t need to modify the header. We will see that later as part of our Full Stack Development Course.
The favicon
The favicon is the small tiny icon you see on the browser tab. We are not going to use one as part of this HTML header tutorial, but just know you can set it in the header. How? First, you need to have a small squared image (you want to keep it small to ensure it loads fast). Then, you can include it with the following code.
<link rel="icon" href="/assets/favicon.ico" />
Just know the format must be .ico. You could create a PNG and then use a converter online (just Google for “png to ico online”). Yet, modern browsers will also support png or gif, but you need to add the type, like so.
<link rel="icon" href="/assets/favicon.png" type="image/png" />
Obviously, if your format is GIF, use image/gif as type.
Icon’s ubiquity
You may want to provide tons of icons for different devices, or even for different screen sizes. This is particularly important if you are creating a Progressive Web App. We won’t talk much about PWAs just yet but know they are dynamic websites created in a way that you can install them on a smartphone, much like an app. This means they need an app icon and depending on the size of the smartphone the size of the icon will be different.
So, provide multiple icons, each specifying the sizes, like so.
<link rel="icon" type="image/png" href="/assets/icon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/assets/icon-32x32.png" sizes="32x32">
Remember that Apple devices don’t like icon links, they want rel="apple-touch-icon" instead. So do that as well (keep normal icons for other devices).
Still, all of that is pointless until we will create a PWA. This will happen at a later stage in our Full Stack Development Course, and for sure not in this HTML Header Tutorial.
Scripts (Javascript)
Javascript is the language that animates the web. Without it, each web page would be static. You could just load it as is, and whenever you navigate to a new one, you’d have to load it again.
Fortunately, these days are over, and the web is much more responsive now. We do that we Javascript, but we need to include it in our HTML. Just like style, we have two options.
Inline Scripts
We can simply use the <script></script> tags and start writing some javascript in them. However, just like CSS, we don’t do that. We want our scripts to be in a different document.
External Scripts
Unlike CSS, here we don’t use the link tag. Instead, we still use the script tag, but we provide a source with the src attribute.
So, if you haven’t already, create a new folder in the project root, name it js, and then put in it script.js. For now, leave this file empty. Then, in our HTML we can use the following code.
<script src="js/script.js"></script>
Remember, however, that today’s best practice is to put such code at the end of the body. In this way, we first ensure that the page is loaded, and we load the script last, improving overall performance.
Meta Information
We can finish our HTML Header Tutorial by covering meta information. Metadata, or meta, is data about the data. Here we are talking about information that search engines use to better understand your page, but also some “service information” that you really need to provide.
Charset
Charset stands for Characters Set, and it indicates the list of characters you want to use on your page. It is important because the browser needs to know that to interpret the text inside HTML correctly. If you want to use Arabic, Russian, Chinese, or Korean the browser needs to load special characters. So, you need to provide the charset at the beginning of the header.
You do that with the following code. As charset attribute, specify the name of the charset you want. UTF-8 is a universal charset that will work for virtually all languages using the Latin alphabet. This will not only cover English but also languages with accents such as Spanish or French.
<meta charset="utf-8">
So, just put this piece of code in your header.
Description
Simply enough, this is the short text that will appear in the search results on Google when a link to your page is displayed. Try to use it to describe your page honestly. And, as a rule, don’t go beyond 140 characters, because search engines won’t show the full text.
<meta name="description" content="Text to appear on Google Search">
Your meta description will look something like this on Google. Note that the date is obtained from other fields, and not from the meta description.
Rich Snippets
Sometimes, we want search engines to show something more than just a description. In fact, if the description is just a snippet, we want to go beyond that. We want to enrich our snippet with more information, for example, date, author, an image, or more. If our website is about recipes, we want to tell Google the recipe.
We can do that by using rich snippets. These are nothing more than simple <script></script> tags, containing some JSON code. Google will read that JSON that, and use it to display some of our content directly on the search page. That’s even without the user entering our website!
Wait, but I want the user to enter on my website… Well, yes and no. Google will reward sites using rich snippets, so you will be always on top of the search, and some of the users will enter your website. Much better than being on page 1454 of Google Search, isn’t it?
The following rich snippet can be used to describe an organization. It provides a name for the company, website, and contact – in this case of a customer service number.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "http://www.bakery.example.com",
"name": "Bakery Store",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-401-555-1234",
"contactType": "Customer service"
}
}
</script>
You can read more about rich snippets on the official Google documentation.
Wrap It Up
In conclusion, in this HTML Header Tutorial, we saw how to prepare our HTML header to describe our page. We learned about icons, titles, references to scripts and styles, and snippets.
You can check out on GitHub alessandromaggio/full-stack-course, or see the code for this very tutorial on this GitHub commit.
