HTML Head

🧠 What is the HTML Head?

The HTML <head> section contains metadata about the document. This information is not displayed on the page but is used by browsers, search engines, and other services.

<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
    <meta name="description" content="Page description">
</head>

What the Head Contains:

Page title (shown in browser tab)
Character encoding information
Links to CSS and JavaScript files
Meta tags for SEO and social media

Essential Head Elements

📝

Title

Sets the page title

<title>My Website</title>

🔤

Meta Charset

Defines character encoding

<meta charset="UTF-8">

📱

Viewport

Controls mobile display

<meta name="viewport" content="width=device-width">

🎨

CSS Links

Links to stylesheets

<link rel="stylesheet" href="style.css">

🔹 Complete Head Example

Here's a complete HTML head section with all essential elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Character encoding -->
    <meta charset="UTF-8">
    
    <!-- Viewport for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Page title -->
    <title>My Amazing Website</title>
    
    <!-- Meta description for SEO -->
    <meta name="description" content="Learn HTML with easy tutorials">
    
    <!-- CSS stylesheet -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">
</head>

Result:

           Browser Tab: "My Amazing Website"
           
           Search Result: "Learn HTML with easy tutorials"
           
           Mobile-friendly: ✓
           
           Styled with CSS: ✓

🔹 Meta Tags for SEO

Meta tags provide information to search engines and social media:

<!-- SEO Meta Tags -->
<meta name="description" content="Learn HTML basics with simple examples">
<meta name="keywords" content="HTML, tutorial, web development">
<meta name="author" content="Your Name">

<!-- Social Media Meta Tags -->
<meta property="og:title" content="HTML Tutorial">
<meta property="og:description" content="Easy HTML learning">
<meta property="og:image" content="thumbnail.jpg">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML Tutorial">

Benefits:

SEO: Better search engine rankings
Social Sharing: Rich previews on social media
Accessibility: Screen reader information
Mobile: Proper mobile display

🔹 External Resources in Head

Link to external CSS, JavaScript, and other resources:

<head>
    <!-- External CSS -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter">
    <link rel="stylesheet" href="css/main.css">
    
    <!-- External JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/app.js"></script>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <!-- Preload important resources -->
    <link rel="preload" href="hero-image.jpg" as="image">
</head>

Resource Types:

CSS: Stylesheets and fonts

JavaScript: Scripts and libraries

Icons: Favicons and app icons

Preload: Critical resources