Left ArrowBack

Notes

Head

Table of Contents

The icon of the Adeptus Mechanicus. A cog with a skull at the center.
The word 'head' between brackets.

HTML Head

Last Tended: 

Status: sprout

Below is a list of elements commonly used within the HTML head element of a web page. These elements have been ordered for best performance.

/index.html

<!DOCTYPE html>
    <html lang="en">
        <head>

            <!-- Set character encoding for this document -->
            <!-- Ensures all characters within the UTF-8 space (such as emjois) are rendered correctly -->
            <meta charset="utf-8" />
            
            <!-- Use the physical width of the device & set the initial zoom level to none -->
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            
            <!-- The above 2 tags must come 1st to ensure proper document rendering -->

            <!-- Description of the document (limit to 150 characters) -->
            <!-- This content may be used as a part of search engine results -->
            <meta name="description" content="A full-stack engineer's digital garden." />
            
            <meta name="author" content="Brad Woods" />
            
            <!-- On some browsers, this sets the theme color -->
            <meta name="theme-color" content="#c15a58" />

            <!-- The document's title (displayed in a browser's tab) -->
            <title>Brad Woods' Digital Garden</title>

            <link href="styles.css" rel="stylesheet">
            
            <!-- Helps prevent duplicate content issues -->
            <link rel="canonical" href="https://garden.bradwoods.io" />

            <!-- Links to a JSON file that specifies "installation" credentials for the web applications -->
            <!-- An example of this can be found in the favicon link below -->
            <link rel="manifest" href="manifest.json">

            <!-- 'module' sets the outer most scope to the module scope (instead of the global scope) -->
            <!-- 'defer' sets the script to downloaded in parallel to the page & executed after the page is parsed -->
            <script src="index.js" type="module" defer></script>
        </head>
    ...

Additional Common Elements

A space ship's docking bay with various equipment.

Resources

Tools
META SEO inspectorA browser plugin that can identify problems within the head element

Where to Next?

A sci-fi robot taxi driver with no lower body
Notes
    
  │
  └── HTML
        
Arrow pointing down
YOU ARE HERE
        
  │
  └── Head
            
  │
  ├── Favicon
            
  │
  └── Share Web Page