HTML `<head>` Tag:

What is the HTML `<head>` Tag?

✔ The <head> tag is an essential part of an HTML document that contains metadata and links to external resources.
✔ It does not display content directly on the webpage but helps in page setup, styling, SEO, and functionality.

1️⃣ What Goes Inside the `<head>` Tag?

The <head> section typically includes:

Title (<title>) → Sets the page title (shown in the browser tab).
Meta Tags (<meta>) → Provides metadata (charset, description, viewport, etc.).
CSS Styles (<style> or <link>) → Internal and external stylesheets.
JavaScript (<script>) → Scripts that affect the page behavior.
Favicon (<link rel="icon">) → The website's icon shown in the browser tab.

2️⃣ Example: Basic `<head>` Section

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Web Page</title>
    <meta charset="UTF-8">
    <meta name="description" content="This is an example webpage">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <h1>Welcome to My Page</h1>
</body>
</html>

✔ The <head> section contains metadata, styles, scripts, and links.

3️⃣ Common Elements Inside `<head>`

Tag	Purpose
`<title>`	Sets the webpage title (visible in the browser tab).
`<meta charset="UTF-8">`	Defines character encoding (UTF-8 is recommended).
`<meta name="description">`	Provides a short description for search engines.
`<meta name="keywords">`	Specifies keywords for SEO (not widely used now).
`<meta name="author">`	Defines the author of the webpage.
`<meta name="viewport">`	Makes the page responsive for mobile devices.
`<link rel="stylesheet">`	Links an external CSS file.
`<style>`	Contains internal CSS styles.
`<script>`	Includes JavaScript for interactivity.
`<link rel="icon">`	Specifies a favicon (browser tab icon).

4️⃣ Example: Adding a Favicon

<link rel="icon" type="image/png" href="favicon.png">

✔ This sets a custom icon for the browser tab.

5️⃣ Why is the `<head>` Important?

✅ SEO (Search Engine Optimization) → Meta tags help improve ranking.
✅ Page Styling → Links to CSS for page design.
✅ Faster Loading → Preloads essential resources.
✅ Mobile Compatibility → viewport meta tag ensures responsiveness.

HTML

HTML <head> Tag:

What is the HTML <head> Tag?

1️⃣ What Goes Inside the <head> Tag?

2️⃣ Example: Basic <head> Section

3️⃣ Common Elements Inside <head>