Tutorials Tonight's Logo

HTML HEAD ELEMENT


In this tutorial, we will learn about the HTML head element and types of element that lies inside it.

HTML head element

HTML head element is one of the most important elements of HTML document, it contains the part of the document which is not directly visible on the window.

The HTML head is the contents of <head> element.

The head section contains information such as metadata (data about the HTML document, such as keyword, description, author), CSS style, links to 'favicon', script etc. Unlike the body element, the head element contains data which is not visible on the screen.

tags inside html head

head element of HTML document

The head element basically composed of these 6 different types of HTML elements:

  1. <title>
  2. <meta>
  3. <base>
  4. <link>
  5. <style>
  6. <script>


1. HTML title element

The title element (<title>) defines the title of the document.

The title element is required in all HTML documents to produce a valid document. The title of a webpage is shown in the title bar or page's tab.

webpage title

Only 1 title element should be placed in an HTML document and must be placed in the head of the document. The title element should only contain text element, tags within the title are ignored and treated as simple text.

<title>Title of webpage</title>

It is the content of the title tag that is shown as the heading of the specific search result in the search engine. It has a significant role in search engine optimization (SEO).

<!DOCTYPE html>
<html>

<head>
  <title>Title of webpage</title>
</head>

<body>
  <p>Learning HTML title element.</p>
</body>

</html>
▶ Run the code

2. HTML meta elements

The <meta> elements are used to provide metadata about the web page.

Metadata is a set of data that describes and gives information about the webpage. The data of meta tags are not visible on the web page but are machine parsable.

The type of data provided by metadata could be Keywords, author, page description, last modified and other metadata.

<head>
  <meta charset="UTF-8">
  <meta name="author" content="Jean gray">
  <meta name="keyword" content="HTML, Meta element, Head element">
  <meta name="description" content="summery of webpage">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Learn about meta tag in detail in next chapter.


The <link> element is used to define relationship between current HTML document and external resource.

The most common external resource added using <link> tag is CSS stylesheets. Other than stylesheet it is also used to add a “favicon" icon.

To add stylesheet href attribute is used inside link tag to provide URL of the stylesheet and rel attribute is used to specify the relation between the documents.

<!DOCTYPE html>
<html>
<head>
  <title>Webpage title</title>
  <link rel="stylesheet" href="external.css">
</head>
<body>
  <h2>The webpage is linked with external stylesheet.</h2>
  <p>This is gray and has 20px padding.</p>
</body>
</html>
▶ Run the code

4. HTML base tag

The HTML base element defines a base URL to be used for all relative URLs in a document.

Means, you set a base URL in the head section of the document all the relative URLs will start at that point, e.g if you add base URL to https://www.tutorialstonight.com then any relative URL like html/html-head.php will become https://www.tutorialstonight.com/html/html-head.php regardless of URL of the current webpage.

An HTML document can have one and only one base tag and must be inside the head.

See in the example below.

<!DOCTYPE html>
<html>

<head>
  <title>Webpage title</title>
  <base href="https://www.tutorialstonight.com">
</head>

<body>
  <p>The link using https://www.tutorialstonight.com as base address.</p>
  <p>Open <a href="codebook.php">CodeBook</a>.</p>
</body>

</html>
▶ Run the code

Note: The HTML <base> element must come before any resource that use base URL.


5. HTML style element

The style element is one of the most important tags of HTML documents. It is used to define internal CSS properties for a web page in the head section.

The CSS properties are defined as the usual way inside <style> element.

You can add more than one style element inside the head section.

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      color: red;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <h2>Learning about style tag.</h2>
  <p>This is paragraph.</p>
</body>

</html>
▶ Run the code

Note: It is recomended to put your CSS styles in external stylesheet and link it to the document using <link> element.


6. HTML script tag

The <script> element is used to add javascript code or any external javascript file to the current document.

JavaScript code executable code which makes webpages interactive.

It can be anywhere both in the head section or in the body section of the HTML document.

To link external script file src attribute is used which accepts URL of the script file.

<!DOCTYPE html>
<html>
<head>
  <title>Webpage title - script element</title>
  <script>
    function welcome() {
      alert("Welcome to TutorialsTonight");
    }
    welcome();
  </script>
  <script src="external-script.js"><\/script>
</head>
<body>
  <h2>Learning about script element.</h2>
  <button onClick="greet()">Click me</button>
  <p id="id1"></p>
</body>
</html>
▶ Run the code

You will learn more about scripts in JavaScript tutorial.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.