The HTML <head> tag is a critical section of an HTML document that contains metadata and links to external resources. It helps define information about the webpage, such as its title, character set, linked stylesheets, scripts, and other important metadata that assist in the proper functioning of the page. The content inside the <head> tag is not directly visible to users, but it plays a significant role in how the page is displayed and behaves.
Syntax of the <head> Tag
The <head> tag is placed between the <HTML> and <body> tags. It contains various elements that define the page's metadata.
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
In this syntax:
- <title>: Defines the title of the webpage, displayed in the browser's tab or title bar.
- <meta>: Provides metadata, such as the character set and viewport settings.
- <link>: Links external resources, such as CSS stylesheets.
- <script>: Includes external JavaScript files or inline scripts for the webpage.
Attributes of the <head> Tag
The <head> tag itself does not support any attributes, but the elements inside it (such as <meta>, <link>, <title>, and <script>) may contain attributes that provide detailed information about the webpage's metadata and external resources. Here are some common attributes used within elements inside the <head> tag:
| Element | Attribute | Description |
|---|---|---|
| <meta> | charset | Specifies the character encoding (e.g., UTF-8) for the HTML document. |
| <meta> | name,content | Provides metadata such as description, keywords, author, and viewport settings, crucial for SEO and responsive design. |
| <link> | rel,href | Links external resources such as stylesheets, fonts, or icons. |
| <title> | - | Sets the webpage title that appears in browser tabs and search engine results. |
| <script> | src,async,defer | Links external JavaScript files or defines script behavior (e.g., whether to load the script asynchronously or after the page loads). |
Examples of HTML <head> Tag
Example 1: Basic Use of the <head> Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Document</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
In this example, the <head> tag contains basic metadata, such as the character set, viewport settings for mobile responsiveness, and the title of the page.
Example 2: Linking External CSS and JavaScript Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled HTML Document</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<h1>Styled Web Page</h1>
</body>
</html>
In this example, the <head> tag includes external resources such as a CSS file for styling and a JavaScript file to enhance functionality. The defer attribute ensures the JavaScript file is loaded after the HTML document is parsed.
FAQs About HTML <head> Tag
Q1: What is the purpose of the HTML <head> tag?
A: The <head> tag contains metadata about the webpage, links to external resources (like CSS and JavaScript files), and other elements that define the structure and behavior of the webpage. It helps search engines, browsers, and users understand the page better.
Q2: Does the <head> tag affect SEO?
A: Yes, the <head> tag significantly affects SEO. Metadata like the page title (<title>) and descriptions (<meta>) improve how search engines index and rank the page.
Q3: Is the <head> tag mandatory in an HTML document?
A: Yes, it is recommended to include a <head> tag in every HTML document, as it ensures proper functioning of the webpage, including rendering, SEO, and access to external resources like stylesheets and scripts.
Q4: Can I include multiple <title> tags in the <head> section?
A: No, an HTML document can have only one <title> tag within the <head> section. Having multiple <title> tags can confuse browsers and search engines.
Q5: What is the difference between the <head> and <body> tags?
A: The <head> tag contains metadata and links to external resources, whereas the <body> tag contains the visible content of the webpage, such as text, images, and interactive elements.
