How to use the Head tag in HTML and what to include
Tags: html, devjournal, beginners, codenewbie
Published: 2022-03-10 08:28:55

As a beginner 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](https://worldofdev.info/basic-html-document-structure/) 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**.](https://worldofdev.info/basic-html-document-structure/)

**Table Of Contents**

1. [What is the head tag in HTML](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/#what-is-the-head-tag-in-html)
2. [How to use the head tag in HTML and what to include](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/#how-to-use-the-head-tag-in-html-and-what-to-include)
   - The Title Tag
   - The Style Tag
3. [The link Tag](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/#the-link-tag)
   - The Meta Tag
      - Descriptive attributes
      - Technical attributes
4. [Standard head tag code](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/#standard-head-tag-code)
5. [Conclusion:](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/#conclusion)

## **What is the head tag in HTML**

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.

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.

Title tags are text-only tags vital for search engine optimisation (SEO). The <title> tag is also the only tag that HAS to be included in your HTML document, all the subsequent tags are optional.

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:
![Code example of title tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyl9h1li6qboh519w45c.png)
 
To read the rest of this article on **[how to use the <head> tag and what to include](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/)**, **[Click Here](https://worldofdev.info/how-to-use-the-head-tag-in-html-and-what-to-include/)**