What is the Header?

Introduction to the `<head>` Tag

The <head> tag is a section of an HTML document that contains metadata and links to resources. It does not display content directly on the webpage but plays a crucial role in providing information and functionality.

Common Elements Inside the `<head>` Tag

List of Key Elements:
- <title>: Sets the title of the webpage, shown in the browser tab and search engine results.
- <meta>: Provides metadata such as the character set (<meta charset="UTF-8">), viewport settings for responsive design, and description for search engines.
- <link>: Links to external resources like CSS stylesheets and JS files.
- <style>: Contains internal CSS styles.
- <script>: Includes or links to JavaScript files.
- <noscript>: Provides alternative content for users with JavaScript disabled.
Example of a typical <head> section:
```
<head>
    <title>My Web Page</title>
    <meta charset="UTF-8">
    <meta name="description" content="A brief description of my webpage">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <style>
    /* This is where you would put page specific CSS. */
    body{
    text-align: center;
    }
    </style>
    <script src="script.js"></script>
</head>
```

Explanation of Important Element

<meta>

<meta charset="UTF-8">
<meta name="description" content="A brief description of my webpage">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link>

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

<style>

<style>
    body { font-family: Arial, sans-serif; }
</style>

<script>
```
<script src="script.js"></script>
```

The Role of Metadata

Metadata and SEO: <meta> tags like description, keywords, and author, impact search engine optimization and the page's visibility in search results.

<meta name="description" content="A detailed description of my webpage">
<meta name="keywords" content="HTML, CSS, JavaScript, tutorial">
<meta name="author" content="Your Name">

More info about Metadata can be found in the META tab, including information about how to make your website have a discord embed.

Sample Document Layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Understanding the &lt;head&gt; Tag</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body { font-family: Arial, sans-serif; }
    </style>
    <script src="script.js"></script>
</head>
<body>
    <h1>Welcome to the HTML Tutorial</h1>
    <p>This page helps you understand the <code>&lt;head&gt;</code> tag in HTML.</p>
</body>
</html>

PreviousCreating a new page Nextmeta

Last updated 1 year ago

hashtagIntroduction to the <head> Tag

hashtagCommon Elements Inside the <head> Tag

hashtagExplanation of Important Element

hashtagThe Role of Metadata

hashtagSample Document Layout:

Introduction to the `<head>` Tag

Common Elements Inside the `<head>` Tag

Explanation of Important Element

The Role of Metadata

Sample Document Layout: