logo

HTML Head

head contains the meta information of a web page that other machines or search engines use to index a page i.e. to know what is in the page. The following tags are used as children of head element.

  • title (the title of page)
  • meta (the metadata)
  • link (external resources)
  • base (default URL)

head tag is written immediately after the <html> tag and before the <body> tag.

<title> element

title element present in the head tag specifies the page title. The title can be seen in the tab bar of the page.

Example

<head>
 <title>page title</title>
</head>

Try </>

The title can be seen in the tab bar.

<meta> element

meta element defines metadata of the page. metadata is very important in search engine optimization. Borwsers use this data to bring the pages in search results.

meta related attributes

It specifies that which character encoding is used by the document.

charset

<head>
<meta charset="UTF-8"/>
</head>

name-content

It consists of name and value attributes in the meta element.

<head>
<meta name="keywords" content="page related tags or keywords separated by comma"/>
</head>

These keywords tell the browsers that what kind of data is on the web page.

<head>
<meta name="description" content="Here the description related to the page is written"/>
</head>

This is a brief description or summary of the web page.

<head>
<meta name="author" content="the name of the author of website"/>
</head>

This specifies the name of the author of a website.

<head>
<meta name="application" content="application name is present" />
</head>

It specifies the name of the application.

<link> element

link element links the current document the external resources such as CSS stylesheet, script file, and favicon.

In the following example, link tag imports the external CSS stylesheet. test.css is a stylesheet that is designing the block of element.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="files/test.css" />
</head>
<body>
 <article class="design">
 <p> The paragraph is being designed by css stylesheet. CSS stylesheet is being imported using link element. CSS properties are present in the stylesheet. </p>
 </article>
</body>
</html>
Try </>

The test.css file contains the following code.

.style {
width:80%;
background-color:lightgreen;
height:200px;
}

A favicon represents the identity of a website. This favicon can be seen in the tab bar. To add an icon, the value of rel attributes is 'icon'.

Example

<link rel="icon" href="files/logo.png" sizes="32x32"/>

Try </>

<base> element

It specifies the default link address for all of the links present in the document. See example to understand.

Example

<base href="http://www.codingb.com" target="_blank"/>

Try </>

href represents the address of the linked resource.

The data in the head tag is not visible directly on the web page.

Was this article helpful?