The HTML <head> tag is one of the very first tags you should get accustomed to when learning HTML. This is where your web-building journey starts, as the <head> tag houses other vital tags.

What is the HTML <head> Element?

The <head> element comes immediately after the HTML tag and is said to be the container for metadata. This is where the information about the page you are building is displayed.

When we say “metadata,” we refer to things like

. Title
. Document title
. Styles
. Scripts
. Link

Character sets, and other meta information.

Let’s look at some of these head tag elements and their functions.

What is the HTML <title> Element?

The title tag is where you define the label or name of your website. Let’s say it is where you let people visiting your website know what your site is doing.

It is a text-only section, and since this is where you define your document title, contents appear in the browser’s title bar or the pages tab. 

If you are building a website that will solve problems for the masses, consider search engine optimization (SEO) protocols.

SEO practice is crucial for websites if they want to stand a chance of getting ranked by Google or appearing on search engine result pages. Even though there are other requirements, you shouldn’t ignore the title tag if you want to pass the SEO test. It is the first factor a search engine evaluates because it provides information about a website.

A title tag will:

Pass the page title to the toolbar

Provide the page title and displays it for search engines

An illustration of the title tag within the head tag.

<!DOCTYPE html>

<html>
    <!-- This is where the head opening tag is placed. -->
<!-- the head tag opens here -->
<head>
    <!-- this is where your page title comes in -->
  <title> Give your page a top title, and it must relate to the services you are offering</title>
  <!-- always close a tag after opening -->

</head>
<!-- The head tag closes here -->

<body>


</body>
</html>

What is the HTML <style> Element?

The <style> element is used to style your current HTML project. You can use this to give your tags new font size, color, padding, and other effects that can change their appearance on the browser.

Example:

<!DOCTYPE html>
<html>
  <!-- head tag opens here -->
<head>
  <title>FanielTech HTML Tutorial</title>
 
  <!-- The style element will change the appeal of any element you style -->
  <!-- We use style when we don't want to create an external CSS file, especially when the styling is short -->
  <style>
    body {background-color: rgba(3, 3, 3, 0.993);}
    h1 {color: rgb(255, 153, 0);}
    p {color: rgb(0, 225, 255);}
  </style>
</head>  
  <!-- head tag closes here -->
 
<body>
 
<h1>This is a Heading</h1>
<p>We are learning HTML and CSS</p>
 
</body>
</html>

What is the HTML <link> Element?

The link element is an important tag and will be what you need to import other files into another project file. We use this tag to make the code we write in another file run or have an effect on the file where we reference it using the link tag. You employ it when you want to link to a third-party style sheet. 

You will need to create a new file with .css, then use a link to reference it from the main project file. Example is shown below.

<!DOCTYPE html>
<html>
  <!-- head tag opens here -->
<head>
  <title>FanielTech HTML Tutorial</title>
 
  <!-- the link is like a path you follow to access what is in the external style sheet page -->
  <!-- this will import what we have in the mystyle page to work just like the <style> .... </style> →
 
<!-- this is how you reference to a CSS file when you start using external css -->
 
  <link rel="stylesheet" href="myStyle.css">
 
</head>  
  <!-- head tag closes here -->
 
<body>
<!-- the body tag opens here and it embeds other -->
 
<h1>This is a Heading</h1>
<h1>This is a LINK in the Head tag example </h1>
<p>We are learning HTML and CSS...</p>
 
</body>
</html>

What is the HTML <meta> Element?

The <meta> element is used by the browser, search engines, and other web components to specify how to load content for a particular keyword. We use it to specify the page description, character set, viewport setting, keywords, author, etc.

Example:

<!DOCTYPE html>
<html>
  <!-- head tag opens here -->
<head>
  <title>FanielTech HTML Tutorial</title>
 
<!-- this code uses meta to define what and how the browser displays what we have in this file -->
  <meta charset="UTF-8">
  <meta name="description" content="HTML tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="NITROLEX">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
</head>  
  <!-- head tag closes here -->
 
<body>
 
<h1>This is a Heading</h1>
<h1>This is a LINK in the Head tag example </h1>
<p>We are learning HTML and CSS...</p>
 
</body>
</html>

What is the HTML <script> Element?

When it is time to get JavaScript involved, the script is what we use to write JavaScript codes in our HTML file.

Example:

<!DOCTYPE html>
<html>
  <!-- head tag opens here -->
<head>
  <title>FanielTech HTML Tutorial</title>
<!-- the code in the script Tag is a JavaScript
Code to dynamically display elements -->
  <script>
    function myScript_example() {
      document.getElementById("dm1").innerHTML = "Hello JavaScript!";
    }
    </script>
 
 
</head>  
  <!-- head tag closes here -->
 
<body>
 
<h1>This is a Heading</h1>
<h1>This is a LINK in the Head tag example </h1>
<p>We are learning HTML and CSS...</p>
 
<!-- this code outputs the code from the JavaScript Function -->
<h1 id="dm1"> Script example</h1>
 
<!-- on button click what is in the display changes to what the code in myScript_example function embeds -->
 
<button type="button" onclick="myScript_example()">click to see</button>
 
</body>
</html>

Conclusion

In this article, we learned about the head tag and the other elements you can include in the head section.

Categorized in:

HTML