The <head> element is a container for metadata (data about data) and links that provide information about the HTML document but are not displayed directly on the webpage.
✅ Basic Syntax
<head>
<title>My Awesome Website</title>
<meta charset="UTF-8">
<meta name="description" content="Learn about web development.">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
🔑 Common Elements Inside <head>
| Element | Purpose |
|---|---|
<title> | Sets the page title shown in browser tab |
<meta> | Defines metadata like charset, description, keywords, viewport, author, etc. |
<link> | Links external resources like CSS stylesheets or icons |
<script> | Links or embeds JavaScript files or code |
<style> | Embeds CSS styles directly in the document |
<base> | Sets the base URL for relative links |
🎯 Why Is <head> Important?
- SEO: Search engines read meta tags for page information.
- Browser behavior: Charset declaration ensures proper text rendering.
- Performance: Proper placement of scripts and styles improves loading.
- Usability: Title helps users identify the page in tabs and bookmarks.
⚠️ Notes
- The
<head>tag must be placed inside the<html>element, before the<body>. - Content inside
<head>is not visible on the webpage itself but affects how the page behaves and appears in browsers.
✅ Summary
| Feature | <head> Tag |
|---|---|
| Purpose | Contains metadata and resource links |
| Displayed content? | ❌ No, not directly shown |
| Location | Inside <html>, before <body> |
| Common children | <title>, <meta>, <link>, <script>, <style> |