There are a few elements in HTML those are used to display the metadata or data about data. And the header element or <head> element is used as a container for those elements.
Below are the list of tags used inside the header element:
Let us see all the HTML tags used inside the head element in detail:
The <title> tag is used to display the title of the webpage.
<html>
<head>
<title>
Sample Title
</title>
</head>
<body>
<div id = "myID">
<img src="image1.jpg" style = "width:100%">
</div>
</body>
</html>
So, if you look at the above code the <head> element acts as a container for the <title> tag.
<head> <title> Sample Title </title> </head>
Inside the <title> tag we have the title Sample Title.
Now, in the above output the title of the HTML document is displayed(i.e. Sample Title) on the top right of the webpage.
The <link> tag is used to link present webpage with an external resource. The <link> tag is quite often used to link external stylesheets.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/mystyle.css">
</head>
<body>
<div id = "myID">
<img src="image1.jpg" style = "width:100%">
</div>
</body>
</html>
So, if you look at the above code the <head> element acts as a container for the <link> tag.
<head> <link rel="stylesheet" href="/css/mystyle.css"> </head>
Inside the <link> tag we have the rel and href attributes that links an external css file from the folder named css.
The <style> tag is used to provide CSS information for an HTML document.
<html>
<head>
<style>
.myFirstClass {
border-style: dotted;
border-width: 5px;
}
</style>
</head>
<body>
<div class = "myFirstClass">
<img src="image1.jpg" style = "width:100%">
</div>
</body>
</html>
So, if you look at the above code the <head> element acts as a container for the <style> tag.
<head>
<style>
.myFirstClass {
border-style: dotted;
border-width: 5px;
}
</style>
</head>In the <style> tag we have specified the CSS properties for the class myFirstClass.
.myFirstClass {
border-style: dotted;
border-width: 5px;
}The <meta> tag is used to specify metadata like character set, keywords, page description, viewport settings of an HTML document.
Let us see them in the below examples.
<html> <head> <meta charset="UTF-8"> <meta name="description" content="Test data for meta tags"> <meta name="keywords" content="Java, Spring, Hibernate"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <button onclick="test()"> Click Me </button> </body> </html>
So, if you look at the above code we have a set of <meta> tags defining the following metadata.
<meta charset="UTF-8">
<meta name="description" content="Test data for meta tags">
<meta name="keywords" content="Java, Spring, Hibernate">
<meta name="viewport" content="width=device-width, initial-scale=1">
The <script> tag is used to define java script for an HTML document.
<html>
<head>
<script>
function test(){
alert("Testing script tag");
}
</script>
</head>
<body>
<button onclick="test()">
Click Me
</button>
</body>
</html>
So, if you look at the above code the <head> element acts as a container for the <script> tag.
<head>
<script>
function test(){
alert("Testing script tag");
}
</script>
</head>Inside the <script> tag we have defined a function of java script called test() that displays the text Testing script tag.
<script>
function test(){
alert("Testing script tag");
}
</script>Later in the code, we have defined a button Click Me.
<button onclick="test()"> Click Me </button>
On clicking on it the test() function is called.