HTML Head Elements – Usage, Attributes and Examples
Free Web development courses with real-time projects Start Now!!
Welcome to DataFlair HTML Head Tutorial. In this article, we will learn what are HTML head elements, its attributes and examples.
HTML Head Elements
The information related to the HTML document is defined in the head section or the <head> element of the document. It was mandatory to use <head> element up till HTML4, but this rule has been omitted in HTML5. The information contained by the <head> element is not displayed by the browser on the web-page. It includes machine-readable information such as style sheets, scripts, title of the document, etc.
In modern web development, the head section of a web page contains essential meta-information that is vital for SEO analysis, accessibility, and performance. Thus by including a proper and accurate metadata, the developers of the websites can enhance their web pages’ status in search engines, guarantee the website accessibility by users, and increase the efficiency of the internet sites’ work through proper link to the external resources.
Furthermore, elements placed within the head can aid in defining how the document must be displayed in various browsers and on different gadgets.
Syntax-
<html> <head>...</head> <html>
Example-
<!DOCTYPE HTML> <html> <head> <meta content="Example" name="description"> <title>DataFlair</title> </head> <body> <p>Welcome to DataFlair</p> </body> </html>
Output-
The elements contained within the <head> element are-
1. HTML <title>
The <title> element resides in the <head> tag and defines the name of the web page. It appears as the name of the tab. The title is displayed during search results.
Code-
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <h1>Welcome to DataFlair</h1> <img src="DataFlair.png" height="200px" width="200px"> </body> </html>
Output-
2. HTML <style>
The <style> tag contains the CSS files or the implicit CSS attributes, used for styling and manipulating the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
h1{
color: blue;
background-color: red;
}
</style>
</head>
<body>
<h1>Welcome to DataFlair</h1>
<img src="DataFlair.png" height="200px" width="200px">
</body>
</html>
Output-
3. HTML <link>
This tag links the current document with other web pages or external style sheets.
<!DOCTYPE html> <html> <head> <title>DataFlair</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Welcome to DataFlair</h1> <img src="DataFlair.png" height="200px" width="200px"> </body> </html>
Output-
4. HTML <meta>
The <meta> tag contains additional information related to the document such as page description, keywords, author, character set, etc. The web browsers use the metadata to display content, and keywords are used by search engines and other web-services.
Meta tags are exceptionally essential for passing vital information to the web crawlers and browsers about the key elements of an HTML document, including character set used in the current document to ensure proper displaying of the text. They also have the function of social media integration by supplying information such as Open Graph tags that determine the manner in which URLs appear on social media sites.
- Character Set
<meta charset=”UTF-8″> - Description of the web-page
<meta name=”description” content=”E-learning”> - Keywords
<meta name=”keywords” content=”HTML, CSS,JavaScript”> - Author
<meta name=”author” content=”DataFlair”> - Refresh document every 20 seconds
<meta http-equiv=”refresh” content=”20″>
For example,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="E-Learning"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="DataFlair"> </head> <body> <p>Welcome to DataFlair.</p> </body> </html>
Setting viewport using <meta> tag
The way a web-page is displayed on a smaller and larger device would vary as per the device’s size. The meta viewport element gives the browser the necessary instructions on how to set the dimensions and scaling of the web-page.
Syntax-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width=device-width sets the width of the web-page as per the size of the device. The initial-scale=1.0 sets the initial zoom of the web-page when it is first loaded.
<script>
The <script> tag contains the important client-side script files used to perform dynamic tasks on the HTML element.
<!DOCTYPE html>
<html>
<head>
<title>External Script</title>
<script>
function myFunction() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "myFunction();" name = "okay" value = "Click"> </input>
</body>
</html>
Output-
5. HTML <base>
All the links on a web page will be rendered to a default web page whose URL is specified in the <base> element.
Code-
<!DOCTYPE html> <html> <head> <title>Page Title</title> <base href="images/" target="_blank"> </head> <body> <img src="rainy.gif"> <p>Because of the base URL, the browser looks for the image "rainy.gif" at "images/html5.gif"</p> <p><a href=https://data-flair.training/>DataFlair</a></p> <p>The link above opens in a new window because the base target is set to "_blank".</p> </body> </html>
Output-
6. <noscript>
This tag is used to generate an alternate text if the script is not supported by the user or has been disabled. For example,
Code-
<html>
<body>
<h1>JavaScript</h1>
<p>JavaScript to change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click</button>
<p id="demo">Initially</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
<noscript>
Your browser does not support JavaScript
</noscript>
</body>
</html>
Attributes of HTML <head> Element
| Attribute | Value | Description |
| profile | URL | Used to specify the URL of the meta-data. Deprecated in HTML5. |
| media | media_query | Used to specify the device/media, the media resource is optimized for. |
| type | text/css | Used to specify the type of file within the <style> element. |
Summary
In this article, we’ve discussed the <head> element of HTML5. HTML <head> element contains the additional information related to the HTML document. This information is not displayed by the browsers but gives it the necessary instructions required for rendering the web-page.
The <head> element is the container for various other elements such as <title>, <style>, <script>, <link>, <meta> and <base>.
You give me 15 seconds I promise you best tutorials
Please share your happy experience on Google
Great job sir…!