HTML Head


May 2, 2022, Learn eTutorial
1212

In this HTML tutorial, you will learn all about the Head Tag in HTML. We will also discuss the elements included in the head tag in HTML.

What is the use of the Head tag in HTML?

The <head> element serves as a container for all head elements, which give additional information about the document (metadata) or a link to external resources that are necessary for the page to show or act appropriately in a web browser. The head elements explain the page's features such as title, offer meta information such as character set, and tell the browser where to look for style sheets or scripts that allow you to expand the HTML document in very dynamic and interactive ways. The <title>, <base>, <link>, <style>, <meta>, <script>, and <noscript> elements are all HTML elements that can be used inside the <head> element.

<title> Element in HTML

The <title> element specifies the document's title. To generate a valid document, the title element is necessary for all HTML/XHTML pages. In a document, just one title element is allowed, and it must be put within the <head> element. The title element may only include plain text and entities; no other markup tags are allowed. The document's title might be utilized for a variety of purposes. Consider the following scenario:

  • To make a title appear in the browser title bar and taskbar.
  • When a page is bookmarked or put to favorites, it needs a title.
  • In search engine results, a title for the page is displayed.

<!DOCTYPE html>
<html>
<head>
    <title> demo </title>
</head>
<body>
    <p>Welcome to learnetutorials.com </p> 
</body>
</html>
 

<base> Element in HTML

The HTML <base> element is used to provide a beginning point for all relative links in the document. For example, you may set the base URL once at the top of your page, and all future relative links will utilize that URL as a starting point.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demo</title>
    <base href="https://www.learnetutorials.com/">
</head>
<body>
    <p><a href="html-learnetutorials/html-head.php">HTML Head</a></p>
</body>
</html>
 

<link> Element in HTML

The <link> element establishes a connection between the current document and other files or resources. Links to external style sheets are a typical application of the link element.


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Welcome to learnetutorials.com </p> 
</body>
</html>
 

<style> Element in HTML

An HTML document's embedded style information is defined via the <style> element. The <style> element's style rules define how HTML elements appear in a browser.


<!DOCTYPE html>
<html>
<head>
    <title>Embedding Style Sheets</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: green; }
    </style>
</head>
<body>
    <p>Welcome to learnetutorials.com </p> 
</body>
</html>
 

<meta> Element in HTML

The HTML document's metadata is provided via the <meta> element. A collection of data called metadata explains and provides information about other data.


<!DOCTYPE html>
<html>
<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">     <meta name="author" c Smith">
</head>
<body>
    <p>Welcome to learnetutorials.com </p> 
</body>
</html>
 

<script> Element in HTML

The HTML <script> element is used to apply client-side JavaScript to the current page or to include an external JavaScript file.


<!DOCTYPE html>
<html>
<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">     <meta name="author" c Smith">
</head>
<body>
    <p>Welcome to learnetutorials.com </p> 
</body>
</html>