Prev Next

HTML Head

The <head> section of an HTML document contains meta-information about the page, such as the title, character encoding, stylesheets, scripts, and SEO-relevant meta tags. While head elements are not displayed directly, they influence how the page is rendered and discovered by search engines.

Key Topics

Basic Head Structure

Example: A minimal head section with a title and charset.

<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>

Meta Tags

Example: Adding meta tags for responsiveness and descriptions.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page.">

Head Example

This example shows a more complete head section. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <meta name="description" content="This is a sample webpage.">
    <title>My Sample Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Explanation: The head includes meta tags, a title, and a stylesheet link. This information influences the document's appearance, SEO, and adaptability to different screen sizes.

Key Takeaways

  • Use the <head> section to store metadata and references for the page.
  • Meta tags improve SEO, responsiveness, and accessibility.
  • Titles, descriptions, and links to CSS/JS files belong in the head.
  • The head does not display content but greatly influences how the page is seen and indexed.
  • Keep the head organized and minimal for best performance and clarity.
Prev Next