HTML Head Tag - Scientech Easy

The head element in HTML is a container that contains metadata (data about data) about the HTML document. It is placed between an opening <html> tag and before the opening <body> tag.

A basic structure of an HTML document is as:

<!DOCTYPE html>
<html>
<!--Opening head tag-->
<head>
    <!-- Metadata goes here -->
</head> <!--Closing head tag-->
<body>
    <!-- Visible content goes here -->
</body>
</html>

Metadata contains the information about the HTML document that is not displayed directly on the web page itself. However, it is crucial for the web browsers and search engines. The head section plays a crucial role while creating a webpage.

List of Tags inside HTML Head Tag

The <head> tag of an HTML document contains meta-information about the webpage, like title, character set, styles, links, scripts and other meta-information. A list of tags used inside <head> section of an HTML document is as:

<title>
<style>
<meta>
<link>
<script>
<base>

HTML <title> Element in Head Section

The <title> element defines the title of an HTML document or webpage, which appears in the browser’s title bar or in the page’s title. It must be text-only as well as should be concise and specific to the content of the document.

The recommended length for a title element is around 65 to 70 characters, including spaces. Most search engines, like Google, display approximately 60 to 70 characters of a title tag in their search results.

The <title> element must be placed between <head> section of an HTML document. An HTML document can only have one title element.

The <title> tag plays a significant role in HTML for several reasons, including usability, search engine optimization (SEO), and overall user experience. Here are some key points of why the <title> tag is important:

The <title> element defines a title in the browser tab.
It provides a title for the web page when it is added to the bookmark.
It displays a title for the web page in search engine results.
The title of a webpage is a critical element for search engine optimization. Search engines use the title of a page to understand the content and context of the page.
Search engine algorithms use the page title to decide the order of ranking when listing pages in search results. Therefore, try to make the title as accurate and meaningful as possible!

An example of a simple HTML document is as:

Example 1:

<!DOCTYPE html>
<html>
<head>
     <title>A Meaningful Title of Page</title>
</head>
<body>
     The visible content of the document goes here.
</body>
</html>

HTML <style> Element

The <style> element is used to define CSS (Cascading Style Sheets) directly within an HTML document. It determines how HTML elements will display on the web page. The <style> element is placed inside the <head> section to define styles for a single HTML webpage. If you want to apply CSS rules for more than one page, you should use separate CSS file.

Here’s an example of how to add the <style> element in the head section to style a HTML page:

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>Styling an HTML Webpage</title>
<style>
    body {background-color: red;}
    h1 { color: white;}
    p {color: white;}
</style>
</head>
<body>
    <h1>This is a Heading!</h1>
    <p>This is a paragraph!</p>
</body>
</html>

HTML <link> Element

The <link> element in HTML establishes the linking between the current document and an external resource. It is mainly used to link an external resource, such as a CSS file (or external style sheet) to an HTML webpage. However, we can also use it for other purposes like linking to a favicon or preloading assets.

The <link> element goes inside the <head> section of the HTML document. It contains two main attributes which are “rel” and “href”. The rel attribute indicates that this is a style sheet, and href gives the path to that external file.

Here’s an example that shows how to link a CSS style sheet to a current web page using the <link> element:

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>Linking an External Style Sheet</title>
    <!--Link element-->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My First Webpage</h1>
    <p>This page is styled using an external CSS file linked through the HTML <link> element.</p>
</body>
</html>

In this example, the line <link rel=”stylesheet” href=”styles.css”> within the <head> section links an external CSS file named styles.css to the current HTML document. The rel attribute specifies the relationship between the HTML document and the linked file. Here, it indicates that the linked resource is a style sheet. The href attribute specifies the path to the CSS file.

HTML <meta> Element

The <meta> element in HTML is used to specify metadata about an HTML document. This element is typically used to specify the character set, page description, keywords, author of the document, last modified, and viewport setting. The metadata is not visible on the page, but web browsers, search engines, and other web services use it better.

Let’s see some common use of meta element:

(1) To define a character set used:

<meta charset="UTF-8">

The charset attribute in the <meta> element specifies the character encoding used by an HTML document. In this example, we have set it to “UTF-8”, meaning that it is capable of encoding all possible characters and symbols from virtually every language in the world.

(2) To setting viewport for responsive design:

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

We can use <meta> tag to control over the layout of page on the mobile browsers. By setting viewport properties, we can give instructions to browsers on how to control the page’s dimensions and scaling.

A viewport is the user’s visible area of a webpage that varies from device to device. It appears smaller on a mobile phone than on a computer screen. You should include the above <meta> element in all your web pages to make them responsive.

In the above meta viewport syntax,

The width=device-width part sets the width of the page to match the screen-width of the device (which will vary depending on the device). This setting is essential for responsive web design because it ensures that the layout of the page will adjust dynamically to fit on the screen size of different devices.
The initial-scale=1.0 part of the content sets the initial zoom level when the page is first loaded by the browser.

(3) To define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

This meta tag defines a set of keywords relevant to the webpage. However, it is not as influential as in the past for SEO.

(4) To define a description of your webpage:

<meta name="description" content="Free HTML tutorials">

This meta tag provides a brief description of the page, which search engines can use as a snippet in search results.

(5) To define the author of a webpage:

<meta name="author" content="John Smith">

This meta tag defines the name of the author of the webpage who wrote the page content. It is useful to automatically extract information of the author by some content management systems.

(6) To refresh the document every 30 seconds:

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

This meta tag specifies a time interval for the browser to refresh the page automatically.

Here is an example of an HTML document with all the above meta tags:

Example 4:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Free Web Tutorials</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free online web tutorials for beginners">
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <meta name="author" content="John Smith">
</head>
<body>
     <p>All the meta information goes inside the head section of an HTML document.</p>
</body>
</html>

An output of this HTML code will display on the browser:

Output:
      All the meta information goes inside the head section of an HTML document.

In this example, the HTML document includes several meta tags in the head section that define the character set, responsive design settings, and information relevant to search engines such as page description and author. This metadata helps in the proper rendering and optimization of the webpage for both users and search engines.

HTML <script> Element in Head Section

The <script> element in HTML is used to embed client-side script, such as JavaScript, within an HTML document. The basic usage of <script> element in HTML is as:

(1) Embedding JavaScript Directly in HTML Head Section:

You can embed or add JavaScript code directly within a <script> tag, which is placed typically either in the <head> or before the closing </body> tag, depending on when you want the script to run.

Example 5:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!--Placing JavaScript code directly in head section-->
    <script>
       function fun() {
           document.getElementById("p").style.color="red";
       }
    </script>
</head>
<body>
     <p id="p">Click the below button to change the color!</p>
     <button type="button" onclick="fun()">Click me</button>
</body>
</html>

(2) Referencing External JavaScript Files:

Instead of embedding JavaScript directly, you can also add an external JavaScript file to the HTML document using <script> element. This is beneficial when you want to reuse the script across multiple pages as well as improving page load times by allowing browsers to cache these scripts.

Example 6:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!--Placing external JavaScript file in HTML head section-->
    <script src="path_to_javascript.js"></script>
</head>
<body>
</body>
</html>

Here, the script located on the specified path will execute when the page loads. The src attribute specifies the URL of an external JS file.

HTML <base> Element

The <base> element specifies the base URL and/or target to use all relative URLs contained within an HTML document. This means that any relative link, image source, or script reference will use this base URL as a foundation to create a full URL.

The <base> element must be placed inside the <head> section of the HTML document. It must have either an href or a target attribute present, or both. There can be only one <base> element in a document.

Here’s an example of how to use the <base> element to specify a default URL and a default target for all links on a webpage:

Example 7:

<!DOCTYPE html>
<html>
<head>
    <title>Webpage with Base Element</title>
    <!--Adding base element in HTML head section-->
    <base href="https://www.scientecheasy.com/" target="_blank">
</head>
<body>
    <!-- This link will open in a new tab and point to https://www.scientecheasy.com/about.html -->
    <a href="about.html">About Us</a>
  
    <!-- This image will load from https://www.scientecheasy.com/images/logo.png -->
    <img src="images/logo.png" alt="Scientecheasy Logo">
</body>
</html>

Let’s take an example in which we will include all the commonly used HTML tags inside the head section of an HTML document.

Example 8:

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Title of the webpage displayed on the browser tab -->
   <title>My First Webpage</title>

   <!-- Specifies the character encoding for the HTML document -->
   <meta charset="UTF-8">

   <!-- Meta description that summarizes the content of the page -->
   <meta name="description" content="Free online web tutorial">

   <!-- Responsive viewport meta tag to ensure the page scales correctly on different devices -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Link to an external CSS stylesheet -->
   <link rel="stylesheet" href="styles.css">

   <!-- Adding a favicon to the webpage -->
   <link rel="icon" href="favicon.ico" type="image/x-icon">

   <!--Linking external script file -->
   <script src="script.js"></script>
</head>
<body>
     <h1>Welcome to My First Webpage</h1>
     <p>This is a simple HTML document.</p>
</body>
</html>

The output will display on the browser:

Output:
      Welcome to My First Webpage
      This is a simple HTML document.

HTML head Elements

Here is a table summarizing the common HTML tags used inside the <head> section of an HTML document:

Tag	Description	Example
<head>	Defines meta information about document	<head> . . . </head>
<title>	Defines a title of a document, visible in browser tabs and important for SEO	<title>Page Title</title>
<style>	Used for adding CSS styles directly within the HTML document.	<style>body { background-color: #f0f0f0; }</style>
<link>	Defines the relationship between a document and an external resource like CSS files.	<link rel=”stylesheet” href=”styles.css”>
<meta>	Defines metadata about an HTML document.	<meta charset=”UTF-8″>
<script>	Defines a client-side script code in the document.	<script src=”scripts.js”></script>
<base>	Specifies the base URL and/or target for all relative URLs in the document.	<base href=”https://www.scientecheasy.com/” target=”_blank”>