HTML Tutorial



HTML HEAD TAG


HTML <head> Tag

The <head> tag in HTML is a container for metadata (data about data). The information inside the <head> tag is not visible to the user but provides essential details about the webpage. Elements like the title of the webpage, links to stylesheets, and metadata such as the character set are placed inside the <head> tag.


Basic Structure of the <head> Tag

The <head> tag is placed inside the <html> tag, above the <body> tag. It is a container that houses various elements like <title>, <meta>, <link>, and <script>.

Syntax

<html>
  <head>
    <title>Your Webpage Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    
  </body>
</html>

Key Elements Inside the <head> Tag

Inside the <head> tag, you can include the following elements:

  • <title>: Specifies the title of the webpage that appears in the browser's title bar or tab.
  • <meta>: Provides metadata about the webpage, such as character encoding, author information, or viewport settings for responsive design.
  • <link>: Links external resources like stylesheets or icons to the webpage.
  • <script>: Links or contains JavaScript for interactivity or functionality of the webpage.

1. <title> Tag

The <title> tag defines the title of your webpage. This title is displayed in the browser's title bar or tab when the page is loaded.

Syntax

<title>Your Webpage Title</title>

Example

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

2. <meta> Tag

The <meta> tag provides metadata about your webpage. For example, you can specify the character encoding or define the author of the webpage. It is also used to make the page more mobile-friendly by setting the viewport.

Syntax

<meta charset="UTF-8">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1">

Example

<head>
  <meta charset="UTF-8">
  <meta name="author" content="John Doe">
</head>

3. <link> Tag

The <link> tag is used to link external resources like stylesheets, icons, or fonts. The most common use is linking to an external CSS stylesheet to style your webpage.

Syntax

<link rel="stylesheet" href="styles.css">

Example

<head>
  <link rel="stylesheet" href="styles.css">
</head>

4. <script> Tag

The <script> tag is used to include JavaScript code within the HTML document. This can be used for adding interactivity or dynamic content to your webpage.

Syntax

<script src="script.js"></script>

Example

<head>
  <script src="script.js"></script>
</head>

Conclusion

The <head> tag is an essential part of every HTML document. It contains metadata about the webpage and links to resources like stylesheets, scripts, and other external files. By understanding the <head> tag and its components, you can better manage the resources and functionality of your webpage.


🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review