Skip to main content
Practice

head Tag

An HTML document defines a web page and is divided into two parts as follows:

  1. <head> which provides information (metadata) about the webpage to search engines and browsers.

  2. <body> which contains the content to be displayed on the web page.

The details defined inside the <head> tag are not displayed on the web browser screen, but include metadata such as the title, description, keywords, and style of the web page.


Key Elements within the head Tag​

1. title Element​

This defines the title of the web page. This title is displayed on the browser's tab.

Defining Webpage Title
<head>
  <title>My First Webpage</title>
</head>

2. meta Element​

This defines information (metadata) about the webpage for search engines.

For example, you can set the character encoding of the webpage (converting characters to a form that computers can use), viewport (the visible area of the screen) settings, and page descriptions using the meta tag.

Defining Metadata
<head>
  <!-- Character Encoding -->
  <meta charset="UTF-8" />

  <!-- Page Description -->
  <meta name="description" content="Website Description" />

  <!-- Screen Width and Initial Zoom Settings -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Used to link external resources to the webpage. It is commonly used to load fonts or link stylesheets (CSS files that define the style of the webpage).

Linking External Resources
<link
  href="https://fonts.googleapis.com/css2?family=Roboto"
  rel="stylesheet"
/>

4. script Tag​

Loads JavaScript files or scripts that act as the brain of the website.

JavaScript is used to control the behavior of the page (e.g., actions when a button is clicked).

Loading JavaScript File
<head>
  <script src="script.js"></script>
</head>

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.