HTML The Head Element

🌐 HTML <head> Element

HTML The Head Element is a container for metadata (data about the webpage).

It does not display content directly on the page, but it is extremely important for:

  • SEO (search engines)

  • Page title & favicon

  • CSS & JavaScript linking

  • Responsiveness

  • Browser behavior

🔹 1. What Is the <head> Element?

  • Placed inside <html>

  • Comes before <body>

  • Contains information about the page, not visible content



 

🔹 2. Common Elements Inside <head>

▶️ <title> – Page Title (Mandatory)

<title>My Website</title>

✔ Shows in browser tab
✔ Used by search engines

▶️ <meta> – Metadata (Very Important)

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML step by step">

Uses:

  • Character encoding

  • Mobile responsiveness

  • SEO description

▶️ <link> – External Files (CSS, Favicon)

<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico">

✔ Links CSS & icons

▶️ <style> – Internal CSS

<style>
body {
background-color: #f5f5f5;
}
</style>

▶️ <script> – JavaScript (Optional)

<script src="script.js"></script>

✔ Usually placed at bottom of <body>
✔ Can also be used in <head> with defer

<script src="script.js" defer></script>

🔹 3. Complete Example of <head>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Head Element</title><meta name=“description” content=“Learn HTML head element”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<link rel=“icon” href=“favicon.ico”>
<link rel=“stylesheet” href=“style.css”>

<script src=“script.js” defer></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

🔹 4. Why <head> Is So Important?

✔ Improves SEO ranking
✔ Controls page behavior
✔ Loads CSS & JS
✔ Enables responsive design
✔ Defines page identity

🔹 5. <head> vs <body>

Feature <head> <body>
Visible content ❌ ✔
Metadata ✔ ❌
SEO info ✔ ❌
CSS/JS links ✔ ❌

❌ Common Mistakes

❌ Putting content text inside <head>
❌ Missing <title>
❌ Forgetting viewport meta tag
❌ Linking CSS in <body>

🧠 Key Points to Remember

  • <head> stores metadata

  • Content inside <head> is not visible

  • <title> is mandatory

  • <meta viewport> is required for mobile

  • CSS & favicon are linked here

You may also like...