Skip to main content
Practice

head Tag

An HTML document defining a web page is divided into 2 main sections:

  • <head>: Provides information (metadata) to search engines and browsers about the webpage.

  • <body>: Defines the content to be displayed on the webpage.

The <head> section includes metadata such as the page title, description, keywords, and styles.


Key Elements within the head Tag​

Various types of information can be included within the head tag, but the following elements are commonly used:


title Element​

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

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

meta Element​

Defines metadata (information about the webpage) that is shown to search engines.

For example, the <meta> tag can set the character encoding (converting characters to a format usable by computers), viewport settings (the visible area of the webpage), and the page description.

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

  <!-- Page description -->
  <meta name="description" content="Description of the website" />

  <!-- Initial width and zoom settings -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Used to connect the webpage to external resources.

It is commonly used to load fonts or link to a stylesheet (a CSS file that defines the style of the webpage).

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

script Tag​

Brings in the JavaScript files or code which acts as the brain of the website.

JavaScript controls the behavior of the page (e.g., actions performed 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.