Head

Planted: Jan 2022

Tended: Jan 2023

Status: decay

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 and 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 and executed after the page is parsed -->
            <script src="index.js" type="module" defer></script>
        </head>
    ...