Lesson Overview

In this lesson, you'll learn what the minimal required code is to create a basic web document. Note that the minimal HTML is not just about creating a web page: it's also about creating a valid, well-formed page, which is something we'll look at in a later lesson.

Prerequisites

It's important that you understand basic HTML Syntax before doing this lesson.

Minimal HTML Document Structure

In order to remain valid, an HTML document must contain a certain set of elements. These elements are called the minimal HTML. All documents must contain the minimal HTML or they are not valid, well-formed documents (more on what valid/well-formed means later).

The Minimal HTML is currently:

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

  <head>
    <meta charset="utf-8">
    <title>a page title</title>
  </head>

  <body>

  </body>
</html>

If your document is missing any of the elements or attributes shown above, it is considered invalid and/or mal-formed.

Summary of Minimal Elements

To learn more about each of the tags used here, read the following from W3Schools and MDN. W3Schools is a great site for basic tutorials, and MDN (Mozilla Developers' Network) contains the "official" documentation for elements and attributes:

<!-- --> (comments)
Comments were discussed in the HTML Syntax tutorial and you can find more information at W3Schools' HTML Comments
<!doctype html> or <!DOCTYPE html>
The doctype element defines the version of HTML being used.
Doctype tells an HTML validator what version of HTML the page should be validated against.
The value "html" is used to refer to the current standard version of HTML.
MDN: DOCTYPE Element
W3Schools:DOCTYPE Element
<html lang="en">
The html element ontains the entire HTML document, the parent element of all other document elements.
MDN: HTML Element
W3Schools: HTML Element
The lang="en" attribute inside the HTML element indicates that the document's primary language is in English. This tells screen readers what kind of pronounciation to use when reading the document.
The lang attribute can be used in other elements, and helps screen readers know what accent to apply to the content of the element. You can read more at MDN: lang attribute
<head>
The <head> element contains data about the document.
The contents of the document head are not visible to the user in the browser viewport (the area inside the browser window that display's the page contents).
MDN: HEAD Element
W3Schools: HEAD Element
<title>
<title> defines the document's title. This appears in the bookmark list when the page is bookmarked, in the browser window or browser tab when the page is being viewed in the browser, and a few other places.
Don't confuse the <title> element with the title attribute, which is covered in a later lesson.
<meta>
The META element defines data about the document data. For example, it can be used to define the author of the document, a summary description of the document, and many other things.
The META element's name attribute defines the name of the piece of data you're defining e.g. name="author" to indicate that you're going to define the author of the document.
The META element's content attribute defines the value of the data item defined with the name attribute.
MDN: Metadata in HTML and META Element
W3Schools: META Element
<meta charset="utf-8">
A special <meta> element with the charset attribute defines the character encoding used for the document.
MDN: HTML Encoding
W3Schools: HTML Encoding
<body>
The &body> element contains all the elements and text content that makes up the visible part of the document.
MDN: BODY Element
W3Schools: BODY Element

Other elements can be added to the minimal HTML as appropriate, but this is the minimal code that you are required to have in your document for it to be considered valid.