HTML <head> Tag – Metadata & Page Configuration
📌 Introduction
The <head> tag is a container for metadata about your webpage.
It does not display content on the page, but it provides important information to the browser.
Everything inside <head> helps control:
- Page title
- Encoding
- Responsiveness
- Styles and scripts
🧱 Basic Syntax
<head>
<!-- Metadata goes here -->
</head>
💡 Example
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<link rel="stylesheet" href="style.css" />
</head>
🔍 Explanation of Common Elements
1. <meta charset="UTF-8">
Defines the character encoding.
✔ Supports all languages and symbols ✔ Always include this
2. <meta name="viewport">
Controls how your page looks on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
✔ Makes your website responsive ✔ Essential for modern web design
3. <title>
Defines the title shown in the browser tab.
<title>My Website</title>
✔ Important for SEO ✔ Helps users identify your page
4. <link>
Used to connect external resources like CSS.
<link rel="stylesheet" href="style.css" />
✔ Loads styles from another file
5. <style>
Used to write internal CSS.
<style>
body {
background-color: black;
}
</style>
6. <script>
Used to add JavaScript.
<script src="app.js"></script>
🖥️ Important Note
👉 Content inside <head> is NOT visible on the page.
It only affects how the page behaves.
🎯 Common Use Cases
- Setting page title
- Making the site mobile-friendly
- Linking CSS files
- Adding scripts
- SEO optimization
⚠️ Tips & Best Practices
Always include:
<meta charset="UTF-8"><meta name="viewport"><title>
Keep
<head>clean and organizedPlace CSS links before scripts
Avoid putting visible content inside
<head>
🧪 Mini Exercise
Create a page with:
- A custom title
- A linked CSS file (
style.css) - A viewport meta tag
Then:
- Change the background color using the CSS file