What is the <head> Element?
The <head> element contains metadata — information about the webpage that is not displayed directly to users but is essential for browsers, search engines, and external services.
Key Functions:
- Defines the page title (shown in browser tab and search results)
- Contains meta tags for SEO, responsiveness, and social sharing
- Links external resources like CSS, fonts, and favicons
- Loads JavaScript files and defines page-level scripts
- Sets character encoding and language
Important: Everything in <head> is invisible to users but critical for how your page works and appears in search engines and social media.
The <title> Tag
The title is one of the most important elements for SEO and user experience.
<title>HTML Tutorial - Learn Web Development</title>Best Practices:
- Keep it 50-60 characters - Longer titles get cut off in search results
- Put important keywords first - "HTML Tutorial" not "Learn About HTML Tutorial"
- Be descriptive - Tell users exactly what the page is about
- Make it unique - Every page should have a different title
- Include brand name - "Product Name | Company Name"
Favicon
The small icon shown in the browser tab:
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="apple-icon.png">Tip: Use a 32x32px PNG or ICO file for best compatibility.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Essential Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<title>HTML Tutorial - Learn Web Development | WebDev Academy</title>
<meta name="description" content="Learn HTML with our comprehensive guide. Perfect for beginners with examples and exercises.">
<meta name="keywords" content="HTML, tutorial, web development, beginners">
<meta name="author" content="Aman Raj">
<!-- Social Media Meta Tags -->
<meta property="og:title" content="HTML Tutorial - Learn Web Development">
<meta property="og:description" content="Learn HTML from scratch with practical examples">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/html-tutorial">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
<!-- Internal CSS -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
</style>
<!-- JavaScript -->
<script>
console.log("Page loaded successfully!");
</script>
</head>
<body>
<h1>HTML Head Demo</h1>
<p>Check the browser tab title, and inspect the page metadata.</p>
</body>
</html>What Each Part Does:
<meta charset>→ Enables international characters<meta viewport>→ Makes page mobile-responsive<title>→ Sets browser tab title and search result title<meta description>→ Improves SEO and search result snippet<meta property="og:*">→ Controls social media preview<link rel="icon">→ Adds favicon to browser tab<link rel="stylesheet">→ Loads external CSS<style>→ Defines internal CSS<script>→ Adds JavaScript functionality
Performance Meta Tags
Preloading Resources
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">Tells the browser to load important resources early.
DNS Prefetch
<link rel="dns-prefetch" href="https://fonts.googleapis.com">Speeds up loading of external resources.
Quick Quiz
Q1. Which tag defines the title shown in the browser tab?
Q2. Which meta tag is essential for mobile responsiveness?
Q3. What is the ideal length for a meta description?
Q4. Which meta tag controls how pages appear when shared on Facebook?
Practice Tasks
- Create a complete HTML head section with:
- Title:
My Portfolio | Web Developer - Meta description about your skills (150 characters)
- Meta author with your name
- Viewport meta tag for mobile
- Open Graph tags for social sharing
- Title:
- Add a favicon: Create or download a 32x32px icon and link it in the head
- Performance optimization: Add preload tags for a CSS file and a web font
- Test SEO: Use a browser extension or online tool to check your meta tags
Lesson Summary
Key Takeaways:
- The
<head>element contains invisible but crucial page metadata - Essential tags: title, charset, viewport, description
- SEO impact: Title and description appear in search results
- Social sharing: Open Graph and Twitter Cards control preview appearance
- Performance: Preload and DNS prefetch improve page speed
- Best practice: Every page needs unique, descriptive metadata
Proper head configuration improves SEO, user experience, and social media presence. Never skip the metadata!
Social Media Meta Tags
Control how your page looks when shared on social platforms:
Open Graph (Facebook, LinkedIn)
Twitter Cards