Metadata

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>YOUR TITLE HERE</title>
        <meta name="author" content="YOUR NAME HERE">
        <meta name="description" content="YOUR DESCRIPTION HERE">
        <meta name="keywords" content="YOUR COMMA-SEPARATED KEYWORDS HERE">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        YOUR CONTENT HERE
    </body>
</html>

The above code should be your new template when creating a web page. Let's break down what each part of this template means.

<!DOCTYPE html>

This is a web browser directive that indicates the version of HTML that the current document is using. As of the present time of this writing, the most up-to-date major version of HTML is HTML5 and it's DOCTYPE declaration appears as shown above. Older HTML versions have different DOCTYPE declaration signatures. <!DOCTYPE html> should always be the first line of every HTML file that you make.

<html lang="en">

Recall that the entire document lies within the html element. It is recommended that the lang attribute, which specifies the language of the HTML document's content, be explicitly set. For example: use en for English, es for español, and fr for français. Visit the HTML Language Code Reference at w3schools for more language codes.

<meta charset="UTF-8">

The character encoding of the HTML document is set by specifying the value of the charset attribute within a meta element in the document head. For humans, this value should always be UTF-8. It is perhaps unnecessary to include this line since web browsers are required to use UTF-8 by default, but not all web browsers follow the standard conventions.

<title>YOUR TITLE HERE</title>

In the document head, the content of the title element specifies the title of the document as it would appear in a web browser tab, bookmark, or history entry.

<meta name="author" content="YOUR NAME HERE">
<meta name="description" content="YOUR DESCRIPTION HERE">
<meta name="keywords" content="YOUR COMMA-SEPARATED KEYWORDS HERE">

These elements specify the author, description, and keywords of the document respectively. The description of the document would most likely show up in a web browser bookmark or history entry. The keywords are specified using a comma-separated list of keywords that relate to the document's content; this can help search engines catalog your web page if they so choose not to ignore this historically abused element.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This line should always be present. These are instructions for controlling the viewport: the currently visible area of the web page. width=device-width ensures that CSS code that queries the width of the page will get the width of the device or window. Without this functionality CSS code will be unable to tailor the layout of the web page to different screen or window sizes. initial-scale=1.0 will set the initial zoom level of the page to 1.0, meaning that the page is initially neither zoomed in nor zoomed out.

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

Links your CSS code contained in the file styles.css to the HTML document. Styling rules in that CSS file will be applied to customize the appearance of your web page. You may add more lines like this to import the effects of multiple CSS files.