HTML head element lies between <html> tag and <body> tag. Basically this tag contains the metadata(data about data) about html page.

The content of HTML head element is not shown on browser side but it plays an important role while designing a webpage. HTML Head element basically defines the title, layout, style, links and other metadata about html document.

HTML Head Element Tags:

Following are the html tags used within HTML head element:

Tag	Description
Title	It defines title of document.
meta	Defines metadata about Html document.
link	Defines link between document and external source
base	Defines default address for all links within document
script	Defines a client side script
style	Defines style for html elements

Head tags

Title Element

HTML <title> element defines the title of html document. Basically this title is shown in browser tab when webpage is loaded on browser , it displays the title in result of SEO(Search Engine Optimization) , also it provides the title of page when the page is added to favorites.

So the title of page should be meaningful and in textual form.

<!DOCTYPE html>
<html>

<head>
<title>Tutorials Art</title>
</head>

<body>
<p>Welcome to tutorials art</p>
</body>

</html>

Style Element

HTML style element is used to define the internal style information for a single HTML document.

<head>
<style>
body
{
background-color: Blue
}
#para{
      width:70%;
      text-align: center;
      height: 105px;
      background-color: #28a745;
	  }
</style>
</head>

body { background-color: Blue } #para{ width:70%; text-align: center; height: 105px; background-color: #28a745; }

Internal CSS Example

Welcome to tutorials art

Link Element

HTML link element is used to link the external files with current document. Mostly <link> tag is used to link external CSS..

<head>
<link rel="stylesheet" href="styles.css">
</head>

External CSS Example

Welcome to tutorials art

Meta Element

HTML <meta> tag is used to contain metadata about html document like page description author and many more, it is not shown on webpage but it is used by browser, search engines and other web services to rank the webpage.

<head>  
<meta charset="UTF-8">  
<meta name="description" content="HTML tutorials">  
<meta name="keywords" content="HTML,CSS,php">  
<meta name="author" content="Herry">  
</head>

Setting Viewport Using <meta>

The viewport(visible area to user) varies from device to device so <meta> viewport specifies that how dimensions and scaling of page can be managed.

Syntax

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

By adding the above code in head section the page dimensions and sailing can be managed.

Width=device-width is used to set the width of page with respect to device width.
initial-scale=1.0 is used to set the initial zoom level of page when it is first loaded by browser.

By adding the above code in head section the page dimensions and sailing can be managed.

Script Element:

The script element is used to define a client side java scripts.

 <script>
  function changetext() {
    document.getElementById("text").innerHTML = "after text using javascript!";
  }
  </script>

Base Element

Html base element is also an HTML head element , it provides the base URL for all relative paths in the page. There should be only one base element in the whole document.

So lets see an example in which the common URL will be written in base href attribute and other relative url will be written in that specific element.

<head>
  <base href="https://www.tutorialsart.com/" >
</head>

base element

Click on below link to visit the site

tutorials art

Note that the browser will attach the base url in start of both relative url and than the result will be shown