HTML head Tag: A Comprehensive Guide
What is the HTML head Tag?
The <head>
tag in HTML contains metadata and links that are not directly displayed on the webpage but are essential for functionality, performance, and SEO. It is placed inside the <html>
tag and precedes the <body>
tag.
Purpose of the Tag
The <head>
section:
- Provides metadata (e.g., page title, description).
- Links to stylesheets, scripts, and other resources.
- Defines the character set and viewport for responsive design.
Basic Syntax 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>My HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
</body>
</html>
Key Elements Inside <head>
1. Title Tag
Defines the title shown in the browser tab or search engine results.
<title>My First Webpage</title>
2. Meta Tags
Provide metadata about the document.
Character Set:
<meta charset="UTF-8">
- Viewport for Responsive Design:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Description for SEO:
<meta name="description" content="Learn HTML with examples and tips.">
- Author Information:
<meta name="author" content="Your Name">
3. Link to Stylesheets
Connect external CSS files to style the webpage.
<link rel="stylesheet" href="styles.css">
4. Favicon
Specify an icon for the browser tab.
<link rel="icon" href="favicon.ico">
5. Script Tags
Include JavaScript files or inline scripts.
<script src="script.js"></script>
Advanced Example
<!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="A comprehensive guide to HTML head tag.">
<meta name="author" content="John Doe">
<title>HTML Head Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script src="main.js" defer></script>
</head>
<body>
<h1>Welcome to My Guide</h1>
<p>This is an example of using the head tag in HTML.</p>
</body>
</html>
Best Practices for Using Head Tag
Optimize for SEO
Optimize for SEO: Use relevant meta tags like description
and keywords
.
Load External Resources Efficiently
Load External Resources Efficiently: Use defer
or async
attributes for scripts to avoid blocking rendering.
Set Viewport for Mobile Devices:
Set Viewport for Mobile Devices: Always include the viewport meta tag for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Use a Favicon:
Use a Favicon: Add a recognizable favicon for branding.
Keep head Clean:
Keep <head>
Clean: Avoid inline styles or scripts; prefer external files.
HTML Head
Quiz-summary
0 of 5 questions completed
Questions:
- 1
- 2
- 3
- 4
- 5
Information
Quiz: Test Your Knowledge of the <head>
Tag
You have already completed the quiz before. Hence you can not start it again.
Quiz is loading...
You must sign in or sign up to start the quiz.
You have to finish following quiz, to start this quiz:
Results
0 of 5 questions answered correctly
Your time:
Time has elapsed
You have reached 0 of 0 points, (0)
Categories
- Not categorized 0%
- 1
- 2
- 3
- 4
- 5
- Answered
- Review
- Question 1 of 5
1. Question
What does the
tag contain?CorrectIncorrect - Question 2 of 5
2. Question
Which tag sets the title of the webpage?
CorrectIncorrect - Question 3 of 5
3. Question
What is the purpose of the viewport meta tag?
CorrectIncorrect - Question 4 of 5
4. Question
Which attribute is used to load scripts after the page is rendered?
CorrectIncorrect - Question 5 of 5
5. Question
What is the correct syntax to link an external stylesheet?
CorrectIncorrect