HTML Head
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 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> ...
