Home / HTML / Head

HTML Head

What is the Head Section?

The HTML <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. The head section contains information about the document that is not displayed on the page but is essential for browsers and search engines.

Basic Head Structure

Here's the basic structure of the head section:

Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Page Content</h1>
</body>
</html>

Elements in the Head Section

Common elements that can appear in the <head> section:

1. Title Element

The <title> element is required and defines the page title shown in the browser tab:

Example
<head>
    <title>My Web Page</title>
</head>

2. Meta Charset

The charset meta tag specifies the character encoding. UTF-8 is the recommended encoding:

Example
<head>
    <meta charset="UTF-8">
</head>

3. Viewport Meta Tag

The viewport meta tag controls how the page is displayed on mobile devices:

Example
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

4. Meta Description

The description meta tag provides a summary of the page content for search engines:

Example
<head>
    <meta name="description" content="Learn HTML with our comprehensive tutorial guide.">
</head>

5. Meta Keywords

The keywords meta tag (deprecated) was used for SEO, but is no longer used by major search engines:

Example - Deprecated (Don't Use)
<!-- Deprecated - Don't use -->
<meta name="keywords" content="HTML, CSS, JavaScript">

6. Meta Author

The author meta tag specifies the author of the document:

Example
<head>
    <meta name="author" content="John Doe">
</head>

7. Link Element

The <link> element links to external resources like CSS files, favicons, etc.:

Example
<head>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>

8. Style Element

The <style> element contains internal CSS:

Example
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

9. Script Element

The <script> element contains or references JavaScript:

Example
<head>
    <script src="script.js"></script>
    <script>
        console.log('Script in head');
    </script>
</head>

10. Base Element

The <base> element specifies the base URL for all relative URLs in the document:

Example
<head>
    <base href="https://example.com/">
</head>
<body>
    <img src="images/logo.png"> <!-- Resolves to https://example.com/images/logo.png -->
</body>

Complete Head Example

Here's a complete example of a well-structured head section:

Example
<!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>HTML Tutorial - Learn Web Development</title>
    
    <!-- Meta description for SEO -->
    <meta name="description" content="Learn HTML with our comprehensive tutorial guide covering all HTML fundamentals.">
    
    <!-- Meta author -->
    <meta name="author" content="The World of Computing According to Dave">
    
    <!-- External CSS -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/tutorial.css">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    
    <!-- Internal CSS (optional) -->
    <style>
        /* Internal styles here */
    </style>
</head>
<body>
    <h1>Page Content</h1>
</body>
</html>

Head Element Order

While order isn't strictly required, here's a recommended order for head elements:

  1. Charset meta tag
  2. Viewport meta tag
  3. Title element
  4. Meta description
  5. Other meta tags
  6. Link elements (CSS, favicon, etc.)
  7. Style element (if needed)
  8. Script elements (if needed in head)

Best Practices

← File Paths Computer Code →