When you look at an HTML document, most of the visible content lives inside the <body> tag. But before the <body>, there’s another crucial section—the <head> tag.
What is the <head> Tag?
The <head> tag is a container for metadata (data about the webpage) that is not displayed directly on the page but is essential for browsers and search engines. It is placed between the <html> opening tag and the <body> tag.
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here -->
<title>Page Title</title>
</head>
<body>
<!-- Visible content goes here -->
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/codersship.com\/wp-admin\/admin-ajax.php","nonce":"e132c657d2","url":"https:\/\/codersship.com\/html\/html-tag-and-its-purpose","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg","width_threshold":1600,"height_threshold":700,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://codersship.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>
Purpose of the <head> Tag
The <head> section includes important information that helps with:
✔ Defining the page title (shown in browser tabs)
✔ Linking CSS & JavaScript files
✔ Setting character encoding (supports multiple languages)
✔ Controlling viewport behavior (for mobile responsiveness)
✔ Providing SEO metadata (for search engines)
Key Elements Inside the <head> Tag
1. <title> Tag
Defines the title of the webpage (appears in browser tabs & search results).
Example:
<title>My Awesome Website</title>
2. <meta> Tags
Provide metadata such as:
Character encoding (supports special characters):
<meta charset="UTF-8">
- Viewport settings (for mobile-friendly design):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
SEO descriptions & keywords:
<meta name="description" content="Learn about HTML head tags">
<meta name="keywords" content="HTML, head tag, web development">
3. <link> Tag
Connects external resources like CSS files and favicons.
Example (linking a stylesheet):
<link rel="stylesheet" href="styles.css">
- Example (adding a favicon):
<link rel="icon" href="favicon.ico">
4. <style> Tag
Embeds CSS directly in the HTML (instead of an external file).
Example:
<style>
body { font-family: Arial; }
</style>
5. <script> Tag
Embeds or links JavaScript files.
Can be placed in
<head>or before the closing</body>(best for performance).Example:
<script src="script.js"></script>
Common Mistakes with the <head> Tag
❌ Missing charset declaration → Can cause encoding issues.
❌ No viewport meta tag → Breaks mobile responsiveness.
❌ Incorrect <title> usage → Hurts SEO and user experience.
❌ Loading heavy scripts in <head> → Slows down page rendering.
Best Practices for Using <head>
✔ Always include <title> (helps with SEO & usability).
✔ Declare charset="UTF-8" first (prevents rendering issues).
✔ Use <meta name="viewport"> (for mobile-friendly design).
✔ Load critical CSS in <head> (faster page rendering).
✔ Place non-critical JavaScript before </body> (better performance).
Why Is the <head> Tag Important?
✅ Affects SEO (search engines read metadata).
✅ Controls page rendering (encoding, viewport, styles).
✅ Links external resources (CSS, JS, fonts, icons).
✅ Improves user experience (proper titles, mobile optimization).
Final Thoughts
The <head> tag may not be visible to users, but it plays a critical role in how browsers and search engines interpret your webpage. By properly setting up metadata, styles, and scripts, you ensure better performance, SEO, and usability.
Next Steps:
Experiment with different
<meta>tags.Learn how search engines use
<head>metadata.Optimize your
<head>for faster loading.
