HTML Head Elements – Usage, Attributes and Examples

Welcome to DataFlair HTML Head Tutorial. In this article, we will learn what are HTML head elements, its attributes and examples.

HTML Head

Keeping you updated with latest technology trends, Join DataFlair on Telegram

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.

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-

html head elements

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-

html title tag

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-

html style tag

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-

html link tag

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.

  • 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-

html setting viewport

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-

html base tag

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

AttributeValueDescription
profileURLUsed to specify the URL of the meta-data. Deprecated in HTML5.
mediamedia_queryUsed to specify the device/media, the media resource is optimized for.
typetext/cssUsed 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>.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.