1. What is HTML <head> Element?

Firstly, the HTML head is the initial element in an HTML document. While writing markup, the first element that goes in <html> element is <head>. Further, the content in the head is not visible on the screen. Also, It plays an essential role in any document and always comes before the <body> element. Moreover, the HTML head element contains links to external stylesheets and scripts, and other meta-information. The following are the tags that go into HTML head section.

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

Tutorial Contents:

  1. HTML <head> Element
  2. Meta-Data or Meta-Information
  3. Importance of <html>, <head> and <body> Elements

1.1. HTML <style> Element

When we use an on-page style on a web-page, we use style elements in HTML head to style the webpage. Following is an example of how on-page styles are added.

Example

<head>
<style>
.body{
	background-color: #fff;
	font-size: 14px;
	line-height: 1.8;
	padding: 20px;
	margin-top: 20px;
}
.h1{
	font-size: 36px;
	color: #3a3c59;
	margin-top: 20px;
	margin-bottom: 20px;
}
</style>
</head>

Try in CodeLab

1.2. HTML <link> Element

When we use an off-page style for a webpage, we use a link element to incorporate that external stylesheet on the webpage. We incorporate this link in the HTML head section to get the required results. Following is an example of how off-page styles are added.

Example

<!Doctype html>
<html>
	<head>
		<link type=”text/css” rel=”stylesheet” href=”stylesheet-name.css”>
	</head>
	<body>
		<!– The body content goes here–>
	</body>
</html>

Try in CodeLab

Learn more about CSS stylesheets in CSS Tutorial

1.3. HTML <script> Element

When we use an on-page script of javascript for a webpage, we use script elements in the HTML head section to incorporate the script on the webpage. Following is an example that will popup “hello User” on the loading of the page.

Example

<head>
<script>
	alert(‘Hello User!’);
</script>
</head>

Try in CodeLab

1.4. HTML <base> Element

The base element specifies the base URL and base target of all the URLs on a page. It means you will not have to specify the URL each time. Just set the base URL in HTML head element and then each time use the ending name of the image or link. See this in the following example.

Example

<!Doctype html>
<html>
	<head>
		<base href=”https://www.tutsinsider.com/images/” target=”_blank”>
	</head>
	<body>
		<img src=”imagename1.png” alt=”Image No 1″ />
		<img src=”imagename2.jpg” alt=”Image No 2″ />
		<img src=”imagename3.png” alt=”Image No 3″ />
	</body>
</html>

Try in CodeLab

2. What is Meta-Data or Meta-Information?

Importantly, the meta-data does not display on the screen, instead, search engines, like Google, read the meta-data and display it in search results. Also, this meta-data is useful to search engines. Further, this meta-data is related to that specific web-page only. Moreover, meta-data typically includes the meta-title, meta-charset, meta-keywords, meta-description, and other meta information.

2.1. HTML <title> Element

This element contains the title of the document and we must write this within the HTML head element.

  • This title display in the browser’s tab in the title bar
  • The page title in HTML head displays in search results
  • When we bookmark a page, the page is bookmarked in bookmarks bar with this title

The markup and usage of the title are as follows:

Example

<!Doctype html>
<html>
	<head>
		<title>HTML Head</title>
	</head>
	<body>
		<!– The body content goes here–>
	</body>
</html>

Try in CodeLab

2.2. HTML <meta> Element

This element specifies the metadata regarding the page and it must go into the HTML head section. This element declares the following information about a page.

  • It tells the browser that which character set or charset is used
  • This element also defines the description of the page
  • It defines keywords for search engine
  • Who is the author of the page? It also defines this
  • It can refresh the page within a specified interval
  • This tag also define an important property and tells the browser about the visible area for a user

You can understand all the above definitions with this comprehensive example:

Example

<head>
	<meta charset=”UTF-8″>
	<meta name=”description” content=”Code Wisely”>
	<meta name=”keywords” content=”HTML, CSS, JavaScript, Bootstrap, WordPress, PHP”>
	<meta name=”author” content=”Author-Name”>
	<meta http-equiv=”refresh” content=”180″>
	<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>

Try in CodeLab

HTML5 introduced a method in <meta> tag that gives full control of viewport to the developers. The visible area for a user is called viewport and it is different for a user on desktop than a user on a mobile phone. So viewport attribute enables the developer to present the content according to the device. see the complete list of attributes HTML attributes.
Also, you can check the presentational type HTML Attributes.

Note:

A developer must add a viewport attribute contained in meta to every page of a website. This will tell the browser to control the dimensions of the content on different screens.

  • width = device-width sets the width of the content to the width of the screen and will vary according to the device
  • initial-scale = 1.0, it is the initial zoom scale when a page is loaded on the screen

3. Removing <html>, <head> and <body>

HTML5 has developed a practice to write HTML markup without the use of <html>, <head> and <body> tags. HTML will validate this markup and no errors will occur in the document. Consider following example. It has markup with regurlar tags, try it in codelab to experience the removed <html>, <head> and <body> tags.

Example

<!Doctype html>
<html>
	<head>
		<title>HTML Head</title>
	</head>
	<body>
		<!– The body content goes here–>
	</body>
</html>

Try in CodeLab

Consider This:

At Tuts Insider.com, we do not have the practice to omit <html>, <head> and <body> tags. And we also do not recommend this, because it may produce errors in older browsers and can cause errors for XML and DOM. So keep practicing using these tags.
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us