HTML The Head Element

HTML The 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)

Shows in browser tab
Used by search engines

<meta> – Metadata (Very Important)

Uses:

Character encoding
Mobile responsiveness
SEO description

<link> – External Files (CSS, Favicon)

Links CSS & icons

<style> – Internal CSS

<script> – JavaScript (Optional)

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

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>

<!DOCTYPE html>

<head>

<title>HTML Head Element</title><meta name="description" content="Learn HTML head element">

</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	No	Yes
Metadata	Yes	No
SEO info	Yes	No
CSS/JS links	Yes	No

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

HTML The Head Element