HTML Head Elements | Learn HTML

The HTML head section contains all the necessary information about a web page. This section is defined with HTML <head> tag. HTML head section plays important role in SEO (Search Engine Optimization) and website ranking.

In this tutorial, you will learn all the elements that are used in the HTML head section and how you can use them properly.


The HTML <head> Element

The <head> element is the container for metadata like title, character set, style, link, script etc. This element has an opening and closing tag.

The HTML head section starts with <head> tag and ends with </head> tag.

Web browsers don’t display that information declared in this section. Meta information is only visible in the code and works behind the scene for SEO.

These are the following tags used to describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.


The HTML <title> Element

The <title> element is used to define the title of an HTML document. Page title shows up in the browser tab.

This element has great impact on search ranking and displays the title in the search engine results.

Note: you should use keywords related to your web page in the title.

<!DOCTYPE html>
<html>

<head>
  <title>This is the page title example</title>
</head>

<body>
  <p>Hello World!!!</p>
</body>

</html>

The output shows in a web browser:

Hello World!!!


The HTML <meta> Element

The HTML <meta> tag provides metadata about the HTML document.

Browsers do not display metadata in the webpage. It specifies additional information about a document in a variety of ways.

The HTML <meta> element is used to define character set of the document, page description, keywords, author, and other metadata.

Add the character set for your web page:

<meta charset="UTF-8">

Add the description of your web page:

<meta name="description" content="Complete Web development tutorials">

Add the author name in your web page:

<meta name="author" content="Ashfaq Robin">

Add keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript, PHP, WordPress">

Refresh your web page every 30 seconds:

<meta http-equiv="refresh" content="30">

Specify the last update of your web page:

<meta name = "revised" content = "last updated time or date">

Example:

<!DOCTYPE html>
<html>
<head>
  <title>This is page title</title>
  <meta charset="UTF-8">
  <meta name="description" content="Complete Web development tutorials">
  <meta name="keywords" content="HTML,CSS,JavaScript,Php,Wordpress">
  <meta name="author" content="Ashfaq Robin">
</head>
<body>

  <p>All meta information goes inside the head tag.</p>

</body>
</html>

The output shows in a web browser:

All meta information goes inside the head tag.

Learn more about meta tags, in our tutorial – HTML Meta


The HTML <style> Element

HTML <style> element basically describes how a document will be presented in a web browser.

You can define CSS styles using this element inside <head> tag.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    .para{
       background-color: #aaaaaa;
       padding: 15px;
    }
  </style>
</head>  
<body>

<p class="para">This is a paragraph.</p>
  
</body>
</html>

The output shows in a web browser:

This is a paragraph.

Learn more about HTML style, in out tutorial – HTML Style


The HTML <link> Element

The <link> element is use to add external CSS files to an HTML document.

This element contains 3 other attributes i.e. rel attribute with the value “stylesheet”, type attribute with the value “text/css”, and href attribute with the file path.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" type = "text/css" href="style.css">
</head>  
<body>

  <p class="para">This is a paragraph.</p>
  
</body>
</html>

The output shows in a web browser:

This is a paragraph.

In this example, style.css is the external CSS file that contains all the style properties.

Learn more about inserting CSS properties, in our tutorial – HTML CSS


The HTML <script> Element

The <script> element is used to define javascript code inside an HTML document.

You can insert javascript code in two different ways: 1. Internal and 2. External.

You can write your script code directly inside your HTML document using <script> element. This is internal process.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
    function myFunction() { 
       document.getElementById("demo").innerHTML = "This is new text!!";
    }
  </script>
</head>  
<body>

<p>click the button below to change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Here</button>

<p id="demo">This text will change with new text.</p>
  
</body>
</html>

The output shows in a web browser:

click the button below to change the content of an HTML element:



This text will change with new text.

You can also insert external javascript files to your HTML document.

To add a JS file in a document, you need to use <script> tag with src attribute to define the file path.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script src = "script.js"></script>
</head>  
<body>

  <p>Click the button below to display an alert box.</p>

  <button onclick="anotherFunction()">Click it</button>
  
</body>
</html>

The output shows in a web browser:

Click the button below to display an alert box.

In this example, script.js file contains all the javascript codes.

Learn more about inserting JavaScript, in our tutorial – HTML JavaScript


The HTML <base> Element

The <base> element is used to specify the base URL and target for all relative links in the web page.

That means, you will set the base URL once at the top of your document, then all the relative links in the document will use that base URL as a starting point.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <base href="https://worldtechis.com/images/" target="_blank">
</head>
<body>

<img src="html5.gif">
<p>As we have defined a base URL, the browser will look for the image "html5.gif" at "https://worldtechis.com/images/html5.gif"</p>

</body>
</html>

The output shows in a web browser:

As we have defined a base URL, the browser will look for the image “html5.gif” at “https://worldtechis.com/images/html5.gif”


Setting the HTML Viewport

New feature has introduced in HTML5 to let designers take control over the viewport, through the <meta> tag.

The viewport is the visible area of a web page. It’s size is different for different devices.

The size will be smaller on a mobile phone than on a computer screen.

You have to include the following code in the <head> section of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This code will control web page width to adept with the device screen. If device screen is large, page width will be large. However, if device screen is small, page width will be small too.

The width=device-width part sets the width of the page to follow the screen-width of the device (which is different depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page first loads by the browser.


HTML head Elements

Tag Description
<head> Specifies information about the document
<title> Specifies the title of an HTML document
<meta> Specifies metadata about an HTML document
<style> Specifies style information for an HTML document
<link> Specifies stylesheets and an external resource
<script> Specifies a client-side javascript files
<base> Specifies a default address or target for all links on a page