As a beginner coder, you may be wondering what the head tag is and what to include in it. In this blog post, we’ll go over the basics of the head tag and show you how to use it in your own HTML code. We’ll also discuss some of the things you can include in the head tag, such as meta data, scripts, and stylesheets. So if you’re curious about the head tag and want to learn more, keep reading!
As a newbie coder, the word metadata can sound scary, but it’s not that bad. Metadata can be very important as it tells your browser, a social media platform, or a search engine all about your web page, which in turn tells other people about your web page.
Data about data is a common description of metadata. To put it another way, if your webpage’s HTML is data, metadata is extra information used to describe various aspects of that HTML. For example, the Doctype declaration tells the browser what version of HTML the document is written in.
In this article, I will go through what tags can be inserted into the <head> tag to make your site more user-friendly to machines, which will help your search optimisation.
The <head> tag is a basic element of an HTML Document and should be used correctly. At a minimum, the <title> must be nested in the <head> tag, but other useful metadata should be nested here too such as meta tags.
If you are unsure about the <head> tag and where to use it, I suggest you read my article on the Basic HTML Document Structure.
What is the head tag in HTML
The <head> tag is one of the most important tags in HTML. It’s used to set up your document and includes information like the title, metatags, and links to external resources. Anything you want to appear in the browser window headings or title bar should go in the head tag.
The <head> tag is also where you include your document’s scripts and stylesheets. Scripts are bits of code that run on the page, often written in javascript, while stylesheets are written in CSS and used to control the appearance of your content.
You can include as many scripts and stylesheets as you want in the head tag, but they will all load before the page content. This can make your pages load slowly, so it’s important only to include what you need.
The <head> tag is also a good place to include the document’s author and copyright information, this information isn’t required, but it’s a good idea to include it if you want to.
Now that you know the theory of the <head> tag, it is time to get a bit more technical.
The <head> element separates <html> and <body> tags and can be considered for metadata.
Metadata is the information about the HTML document and is not shown when the HTML document renders in the browser.
Other very specific tags can be included in the <head> tags, such as the <title> tag (see below), character sets, viewport settings, styles, and scripts.
How to use the head tag in HTML and what to include
As mentioned above, very specific tags can and should be included in your HTML document’s head tag.
This article is not intended to be an exhaustive list but rather a beginner-friendly guide to what should be included and why including the following tags should be standard on every HTML document, with a brief explanation on each tags with coding examples.
The Title Tag
Have you ever wondered what the title tag in HTML is for?
The <title> tag is one of the most important tags in HTML. It’s used to specify the title of a website or web page. The title of the document is defined by the <title> tag. Title tags are the only required meta tags that need to be included in your <head> tag, and every HTML document needs to have a title tag, all the subsequent tags are optional.
Title tags are text-only tags vital for search engine optimisation (SEO) and help search engines understand what your website or web page is about.
Good <title> tags normally contain flowing text that is longer and more descriptive, but less than 60 characters.
Your <head> tag should now look like this:
<!DOCTYPE html>
<head>
<title>How to use the head tag in HTML and what to include</title>
</head>
<body>
</body>
</html>
The Style Tag
The style tag in HTML is used to add style to an HTML document. The style tag can be used to add CSS styles to an HTML document, or to add HTML attributes to an element.
While you can include a <style> tag in your <head> tag this is not advised. Ideally, all styling should be done in a separate CSS file. This is one of the reasons why I suggest that as a new coder, you may want to Learn Two programming languages at the once, namely HTML and CSS.
If you are on the fence about why you shouldn’t do it in your HTML document, this article “Is inline CSS bad“ may offer some insight.
The link Tag
The <link> establishes the connection between the current HTML document and the resource it refers to.
The most practical example of this is to connect your CSS style sheet. Using the <link> tab to connect to your CSS style sheet is how you get your styling into your HTML document without doing it inline. Here is an example of the <link> tag being used to connect a CSS document that is in the same folder as the HTML file.
<!DOCTYPE html>
<head>
<title>How to use the head tag in HTML and what to include</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
The above code connects the current HTML document to the styles.css file.
The <link> tag has various attributes that can be added to it, but the href and rel attributes are the two you will use most as a beginner
The href attribute identifies the location of the linked resource.
The rel attribute identifies the relationship between the current document and the linked resource.
So in the above code, the href tells the browser that the file is in the same folder and named “styles.css”, while the rel attribute tells the browser that “styles.css” is a stylesheet.
The Meta Tag
As mentioned previously, metadata is data about data and will not be visible on your webpage, but machines (browser and search engines) can see and read it.
Meta tag attributes can be broken down into two types, namely descriptive and technical.
Descriptive attributes
Descriptive attributes provide additional information about your web page’s content and include attributes such as description, keywords, and author details.
Below is an example of descriptive attributes used in the <meta> tag:
<head>
<meta name="description" content="How to use the head tag in HTML and what to include">
<meta name="keywords" content="HTML, Head tag, Learn HTML">
<meta name="author" content="World Of Dev">
</head>
Technical attributes
Technical attributes provide information on how the browser should read the content of the document or give special functionalities within the document such as the viewport and the character set attributes as can be seen below:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The more technical meta tags above can seem intimidating, but they are not that bad. The charset HTML attribute defines how many characters you have available to you in your document. The number of bytes needed to store a characters binary code is limited, and the setting “UTF-8” basically allows you to use a more comprehensive character set.
If talking about bytes and binary code seem a bit daunting, I recommend that you take this free course to better understand this concept CS50’s Understanding Technology Course.
Finally, the viewport attribute allows you to control how your content is displayed. With the dawn of smartphones, web pages can be viewed on various screen sizes. The viewport setting allows you to state that the content will be displayed across the device’s width that is viewing it. The following attribute is instructing the browser to do just that content=”width=device-width, initial-scale=1.0″. the browser is being told to display the content across the device’s width in a 1:1 ratio.
Standard head tag code
Below is the complete code that takes into account all of the above and should be helpful to you to set up a new HTML document quickly. Just remember to replace with your appropriate words and link names where required.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>How to use the head tag in HTML and what to include</title>
<link href="styles.css" rel="stylesheet"/>
<!--Descriptive Attributes-->
<meta name="description" content="How to use the head tag in HTML and what to include">
<meta name="keywords" content="HTML, Head tag, Learn HTML">
<meta name="author" content="World Of Dev">
<!--Technical Attributes-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
I have specifically excluded the <script> tag that can also be added to an HTML document to bring in a javascript file similar to CSS. I, unfortunately, haven’t learnt Javascript on my coding journey, so I don’t feel comfortable including it but I will do my best to update this article when I get to that point.
Conclusion:
So, what have we learned about the <head> tag in HTML? The head tag is a container for all of the information that you want to include about your page, such as the <title> and <meta> tags. You can also use it to include scripts or style sheets. By using the correct code, you can ensure that this information is properly included on your page.
If you have never encountered metadata before and are new to coding, no one will blame you for feeling intimidated. Understanding these concepts will yield countless benefits in your coding journey, and your future self will be grateful you took the time to build a solid foundation.
Click Here to signup for our Discord – we can’t wait to meet you!
