Welcome back! You’ve now learned to build structured, accessible, and interactive pages. But there’s a part of every HTML document that’s crucial for SEO, social sharing, and browser behavior — the <head> section.
Let’s explore how to master it!
🧠 What is the <head> Section?
The <head> element contains metadata about your webpage. Metadata is data about data — it doesn’t display on the page itself but helps browsers and search engines understand your content.
🔖 Common Elements in the <head>
1️⃣ Page Title
<title>My Awesome Website</title>
This text appears in the browser tab and is used by search engines as the clickable headline in search results.
2️⃣ Meta Description
<meta name="description" content="Learn HTML step by step with easy tutorials and practical examples.">
Helps search engines understand your page and display a description in search results.
3️⃣ Character Set
<meta charset="UTF-8">
Specifies the character encoding. UTF-8 supports most characters and is the most commonly used.
4️⃣ Viewport for Responsive Design
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Makes your page look good on all devices, especially mobile.
5️⃣ Favicon
<link rel="icon" href="favicon.ico" type="image/x-icon">
The small icon that appears in the browser tab.
6️⃣ Open Graph Tags (For Social Sharing)
<meta property="og:title" content="My Awesome Website">
<meta property="og:description" content="Learn HTML easily with our step-by-step guides.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
These make your pages look good when shared on social media (Facebook, LinkedIn, etc.).
7️⃣ Link to CSS or Fonts
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
✨ Example: Full <head> Section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn HTML Basics</title>
<meta name="description" content="Beginner-friendly HTML tutorials and examples.">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta property="og:title" content="Learn HTML Basics">
<meta property="og:description" content="Beginner-friendly HTML tutorials and examples.">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com">
<link rel="stylesheet" href="styles.css">
</head>
💡 Tips for a Great <head>
✅ Always include a clear and descriptive <title>.
✅ Write a short and compelling <meta name="description">.
✅ Add a viewport tag for mobile friendliness.
✅ Include a favicon for branding.
✅ Use Open Graph tags if your site will be shared on social media.
✅ Keep your <head> clean and organized.
✅ Summary
- The
<head>section helps browsers and search engines understand your page. - Use meta tags for SEO, accessibility, and better social sharing.
- Include titles, descriptions, favicons, and CSS/JS links in your
<head>.
🚀 What’s Next?
In the next blog, we’ll talk about best practices and tips for writing clean, maintainable HTML code. You’ll learn about indentation, comments, accessibility, and performance tips — the final step before building full websites confidently!
Stay tuned — you’re almost ready to become a real web pro! 💻💪