The HTML Head element acts as a container for metadata. Metadata can also be understood as data about data or data about the HTML document that is not displayed. <head> tag is placed between the <html> and <body> tag. The <head> tag is a container for tags like <title>, <style>, <meta>, <link>, <script>, and <base> and is thus used to specify the document title, character set, styles, scripts, and other meta information.
HTML <title> Element:
The title of the document is required in all HTML documents and is thus defined by the HTML <title> element. This element thus serves the purpose of specifying the title in the browser tab, providing a title for the page when it is added to favorites, and displaying a title for the page in search engine results.
Example:
<!DOCTYPE html> <html> <head> <title>Title Example</title> </head> <body> <p>Hello World!!</p> </body> </html>
Explanation:
In the above example, we added a page title under the <head> tag.
HTML <style> Element:
To define CSS properties for a single HTML page, thus to style an HTML page, the HTML <style> element is used.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
body {background-color: crimson;}
h1 {color: white;}
</style>
</head>
<body>
<h1>Hello World!!</h1>
</body>
</html>
Explanation:
In the above example, we added a page title and a <style> element under the <head> tag.
HTML <link> Element:
To link external style sheets to a web page, the HTML <link> element is used.
Example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World!!</h1> <p>How are you?</p> </body> </html>
style.css:
h1 {
background-color: crimson;
color: white;
}
p {
color: crimson;
font-size: 25px;
font-style: italic;
}
Explanation:
In the above example, we added a page title and a <link> element under the <head> tag.
HTML <meta> Element:
To specify the document title, character set, page description, keywords, author, and other meta information, the HTML <meta> element is used.
Syntax: To specify the character set used:
<meta charset=”UTF-8″>
Syntax: To specify page description:
<meta name=”description” content=”Page description”>
Syntax: To specify keywords for search engines:
<meta name=”keywords” content=”kyeword1, kyeword2, kyeword3, kyeword4″>
Syntax: To specify the author of a page:
<meta name=”author” content=”xyz”>
Syntax: To refresh a document every 30 seconds:
<meta http-equiv=”refresh” content=”30″>
Example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="HTML Examples"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="Codes Java"> </head> <body> <p>Hello World!!</p> </body> </html>
Explanation:
In the above example, we added an <meta> element under the <head> tag.
Set the Viewport:
To take control over the viewport using <meta> tag, the HTML viewport method is used. The area of a webpage that is visible to the user is called Viewport. The viewport can change from device to device. It can appear smaller on mobile phones than on computer screens.
Syntax:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Parameters:
<meta> viewport: Used to specify how to control the page’s dimensions and scaling.
width=device-width: It is used to set the width of the page according to the screen width of the respective device.
initial-scale=1.0: To set the initial zoom level for the page.
Example: Web page without the viewport <meta> tag:
<!DOCTYPE html> <html> <body> <p><b>Check this example on a phone or a tablet.</b></p> <img src="img.jpg" alt="sky" width="400" height="300"> <p> Lorem ipsum dolor sit amet..... mazim placerat facer possim assum. </p> </body> </html>
Explanation:
In the above example, we have displayed the view of the page on a phone or a tablet when we don’t use the HTML Viewport method.
Example: Web page with the viewport <meta> tag:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<p><b>Check this example on a phone or a tablet.</b></p>
<img src="img.jpg" alt="sky" width="400" height="300">
<p>
Lorem ipsum dolor sit amet..... mazim placerat
facer possim assum.
</p>
</body>
</html>
Explanation:
In the above example, we have displayed the view of the page on a phone or tablet when we use the HTML Viewport method.
HTML <script> Element:
To specify a client-side script or JavaScript, the <script> element is used in HTML.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jsexample.js"></script>
</head>
<body>
<form onsubmit="fun()">
<label>Name:</label><br>
<input type="text" name="name" id="111"><br><br>
<label>City:</label><br>
<input type="text" name="city"><br><br>
<input type="submit">
</form>
</body>
</html>
jsexample.js:
function fun() {
var x = document.getElementById("111").value;
alert("Welcome"+" "+x+ "!!");
}
Explanation:
In the above example, we used an external javascript to display a pop-up message on form submission.
HTML <base> Element:
To specify the base URL and base target for all relative URLs in a page, the HTML <base> element is used.
Example:
<!DOCTYPE html> <html> <head> <base href="https://www.w3schools.blog/wp-content/uploads/2014/08/" target="_blank"> </head> <body> <p>Looking for the image "java-plateform-independant-1.jpg" at "https://www.w3schools.blog/wp-content/uploads/2014/08/java-plateform-independant-1.jpg"</p> <img src="java-plateform-independant-1.jpg" style="width:400px"> <p>The below link will open in a new window since the base target is "_blank".</p> <p><a href="https://www.w3schools.blog">w3schools</a></p> </body> </html>
Explanation:
In the above example, we are using the <base> element inside the <head> tag to search for an image at the specified location.
Omitting <html>, <head> and <body> elements:
The use of <html>, <body>, and <head> tags can be excluded in HTML 5. It is however recommended to use these tags while writing HTML codes. The <head> tag can be eliminated if not required. But omitting the <html> and <body> tags can result in a crash of the DOM or XML software. It can also produce errors in older browsers like older versions of Internet Explorer.
Example:
<!DOCTYPE html> <title>Example</title> <h1>Hello World!!</h1> <p>How are you?</p>
Explanation:
In the above example, we have omitted the <html>, <body>, and <head> tags. There is no effect of eliminating these tags on the output.