What is the <head> Tag?
The <head> tag is a container for metadata and information about the HTML document. Metadata includes details like the document title, character set, linked resources and more. This tag is placed between the <html> and <body> tags and typically includes elements that configure how the page behaves and is displayed.
Basic Structure of an HTML Document with <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>
Key Elements Inside the <head>
1. Title (<title>)
The <title> element defines the title of the web page. This title appears in the browser tab and is crucial for SEO and user experience.
Example:
<title>Learn HTML - Complete Guide</title>
Explanation:
- The title should be descriptive and contain relevant keywords for better SEO performance.
2. Meta Tags (<meta>)
Meta tags provide additional metadata about the HTML document, such as character encoding, viewport settings and descriptions for search engines.
Common Meta Tags:
Character Encoding:
<meta charset="UTF-8">
Viewport Settings:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Description for SEO:
<meta name="description" content="A complete guide to HTML for beginners and professionals.">
Keywords for SEO:
<meta name="keywords" content="HTML, Web Development, Learn HTML">
3. Linking Stylesheets (<link>)
The <link> element connects the HTML document to external stylesheets. It enhances the appearance of the web page.
Example:
<link rel="stylesheet" href="styles.css">
Explanation:
- The rel attribute specifies the relationship (stylesheet).
- The href attribute defines the path to the CSS file.
4. Adding Scripts (<script>)
The <script> element links external JavaScript files or embeds inline JavaScript. Scripts are used to add interactivity and functionality to web pages.
Example:
<script src="script.js" defer></script>
Explanation:
- The src attribute specifies the JavaScript file’s path.
- The defer attribute ensures the script loads after the HTML content is parsed.
5. Favicon (<link rel=”icon”>)
A favicon is the small icon displayed in the browser tab next to the page title.
Example:
<link rel="icon" href="favicon.ico" type="image/x-icon">
Explanation:
- It improves user experience and brand recognition.
6. CSS and JavaScript Inline
You can add CSS and JavaScript directly within the <head>.
Inline CSS Example:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
</style>
Inline JavaScript Example:
<script>
console.log('Welcome to the webpage!');
</script>
7. Other Common Elements
Canonical Tag:
Used to prevent duplicate content issues.
<link rel="canonical" href="https://www.example.com">
Author Meta Tag:
Specifies the author of the page.
<meta name="author" content="John Doe">
Charset Meta Tag:
Ensures correct character encoding.
<meta charset="UTF-8">
Best Practices for the <head> Tag
- Organize Metadata: Place meta tags at the beginning of the <head> for better readability.
- Keep the <head> Lightweight: Avoid adding unnecessary elements that can slow down the page loading.
- Use External CSS and JS: Linking external files is preferred for maintainability and faster loading through caching.
- Optimize for SEO: Include a descriptive <title> and relevant <meta> tags to enhance search engine ranking.
- Ensure Mobile Responsiveness: Always include the viewport meta tag for a better user experience on mobile devices.
Complete Example
Here is a complete example of an HTML document using the <head> tag effectively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn everything about the HTML head tag, including meta tags, stylesheets, and scripts.">
<meta name="keywords" content="HTML, HTML Head, Meta Tags, Web Development">
<meta name="author" content="John Doe">
<title>HTML Head Tag - Complete Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="script.js" defer></script>
</head>
<body>
<h1>Welcome to the HTML Head Guide</h1>
<p>This page demonstrates the use of the HTML head tag.</p>
</body>
</html>