/    /  HTML Head

HTML Head

 

The HTML <head> element is used as a container for metadata or data about data. It can be  used between <html> tag and <body> tag.

 

The head of an HTML document is a part whose content is not displayed in the browser (website) on page loading. It just contains metadata about the HTML document (file) which provides data about the HTML document.

 

List of tags used in metadata:

 

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

 

HTML <title> Element:

 

The <title> element define the title of the document. It is used in all HTML/XHTML documents. The <title> element must be placed between the <head> element, and one document can only have one title element.

The contents of a page title are important for search engine optimization (SEO).

 

What does <title> element do?

 

  • It defines a title in the browser tab.
  • It provides a title for the page when it is added to favorites.
  • Title for the page in search engine results.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
 <title>This Page Title</title>
</head>
<body>
<p>The body's content is displayed in the browser window.</p>
<p>enter content here only ,,,,,,,,,,.</p>
</body>
</html>

 

OUTPUT:

 

HTML Head

 

HTML <style> Element:

 

The <style> attribute is used to define style information for a single HTML page.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
 <title>This is Page Title</title>
 <style>
  body {background-color: pink;}
  h1 {color: red;}   
  p {color: blue;}
 </style>
</head> 
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

OUTPUT:

 

HTML Head

 

 

HTML <link> Element:

 

The <link> attribute provides the relationship between the current document and an external resource. There are two main attributes which are “rel” and “href”.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
      <title>This is title</title>
      <link rel="stylesheet" href="src/style.css">
 </head>
 <body>
   <h2>Web-page with external CSS</h2>
   <p>This is looking a cool page</p>
 </body>
</html>

 

 OUTPUT:

 

HTML Head

 

HTML <meta> Element:

 

The HTML <meta> element is used to provide the character set, page description, keywords, authors, and other metadata on the webpage.

Metadata is used by browsers, search engines(SEO), and other web services to rank your webpage better.

 

To define a character set:

 

<meta charset="UTF-8">

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
</head>
<body>
<p>Written in English language<span style="color: blue"> name is.......</span></p>
</body>
</html>

 

OUTPUT:

 

HTML Head

 

To define a description of your webpage:

 

Define the character set used: 

 

<meta charset="UTF-8">

 

Define keywords for search engines:

 

<meta name="keywords" content="HTML, CSS, JavaScript">

 

Define a description of your web page:

 

<meta name="description" content="Free Web tutorials">

 

Define the author of a page:

 

<meta name="author" content="John Doe">

 

Refresh document every 30 seconds:

 

<meta http-equiv="refresh" content="30">

 

Setting the viewport to make your website look good on all devices:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Setting The Viewport:

 

The viewport is the user’s visible area of a web page or website. Various devices – it will be smaller on a mobile phone than on a computer screen.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

The HTML <script> Element:

 

The HTML script element is used to apply client-side JavaScript for the same page or to add an external JavaScript file to the current page.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
 <title>Page Title</title>
 <script>
 function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
 </script>
</head>
<body>

<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

 

OUTPUT:

 

HTML Head

 

The HTML <base> Element:

 

The HTML <base> element is used to specify the base URL and base target for all relative URLs in a page.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
 <base href="https://www.i2tutorials.com/" target="_blank">
</head>
<body>
<h1>The base element</h1>
<p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window.</p>
</body>
</html>

 

OUTPUT: