Elements that are used in head section of HTML page

Last Updated : 15 Oct, 2020

The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.

The HTML <head> element is a container for the following elements:

<title>, <link>, <meta>, <base>, <style>, <script>, … etc.

<title> element: The <title> element defines the title of the webpage. The title must be in text and we will be able to see the title in the page tabs of the browser.

Why it is used:

The page title is used by the search engine to decide the order while listing pages in the search result. So, using meaningful and accurate title helps you to rank better by the SEO.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>HTML Head Tag </title> 
</head> 
  
<body> 
    <p>GeeksforGeeks is a portal for geeks.</p> 
    <hr> 
</body> 
  
</html> 

Output:

<link> element: The <link> tag is most often used to link an external CSS file. It defines the relationship between current document and external resources.

<!DOCTYPE html> 
  
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="mystyle.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <p>It is a portal for geeks.</p> 
</body> 
  
</html> 

Output:

<meta> element: The <meta> element is used to specify the Character set, Page description, Keywords, Author of the document and Viewport settings.
The meta data will not be displayed but are used by browsers on how to display content or reload page and by search engine, and other web services.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>meta tag examples</title> 
        <meta name = "keywords" 
            content = "Meta Tags, Metadata"/> 
    </head> 
          
    <body> 
        <p>Hello GeeksforGeeks!</p> 
    </body> 
</html>                     

Output:

Hello GeeksforGeeks!

<base> element:

The <base> element is used to specify the base URL or target for relative URLs.

There can only be only one <base> element in a document.

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- Declaring the BASE URL -->
    <base href= 
"https://media.geeksforgeeks.org/wp-content/uploads/" 
        target="_blank"> 
</head> 
  
<body> 
    <img src="1-95.jpg" width="400" height="250"> 
</body> 
  
</html> 

Output:

<style> element: The <style> element is used to make internal CSS within our HTML webpage. We can modify text and view of our web page using various properties and its values. Some of the properties include background-color, text align etc.

<!DOCTYPE html> 
  
<html> 
  
<head> 
    <style> 
        body { 
            background: skyblue; 
        } 
          
        h1 { 
            color: red; 
        } 
          
        p { 
            color: blue; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <p>It is a portal for geeks.</p> 
</body> 
  
</html> 

Output:

<script> element: The <script> element is used to define within the HTML webpage.

For example the following JavaScript code writes “GeeksforGeeks” into an HTML element with id=”demo”.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>script tag</title> 
        <style> 
            body { 
                text-align:center; 
            } 
            h1 { 
                color:green; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2><script> Tag</h2> 
        <p id="Geeks"></p> 
        <script> 
            document.getElementById("Geeks").innerHTML =  
                                 "Hello GeeksforGeeks!"; 
        </script>  
    </body> 
</html>                     