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.

Important!

There are 2 additional lines of code that aren't part of the minimal HTML but should still be included: The <meta> elements that define the document's author and viewport settings are not actually part of the minimal HTML - your page will validate just fine without them. However, it's considered standard in industry to contain these two elements.

<!DOCTYPE html>
  <html lang="en">
                    
  <head>
    <meta charset="utf-8">
    <title>a page title</title>
    <meta name="author" content="your first and last name">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
                    
  <body>
                  
  </body>
</html>

Minimal HTML plus the Author and Viewport META Elements

<meta name="author" content=""> defines the author of the document. Just put your first and last name inside the content="" quotes for your own documents.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> is part of responsive web design: it defines the behaviour of your document inside the browser viewport. You'll learn the details in a different tutorial, but basically it ensures that your page adjusts to a readable format whether it's loaded on a large screen or a small device screen.

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 contains 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.

Accessibility

WCAG 2.4 Navigable - 2.4.2 Page Titled states that a page should include a descriptive title. This helps users navigate many pages in your site/application and provides context for each page and its relationship with the rest of the pages in the site/application. Page titles are used by screen readers (for example, when a user navigates the various open browser tabs or windows to find your page) and it also assists users who have cognitive abilities. For example, a user with memory issues can check the page title to see what page they're on, a user with a learning disability can use the page title to help them understand what the current page is about or what its purpose is. Page titles are also helpful for users who have mobility issues and use audio to navigate the pages of a web site.

Technique G88 discusses how you should provide a descriptive title for each page. One of the things it mentions is that page titles should always:

Identify the subject or purpose of the page.
Make sense when read out of context (e.g. if someone is looking at a list of page titles, and one says "Form", that would make very little sense; but if instead the title was "IKEA Customer Complaint Form", that would make much more sense)
Be short.

In addition to this and some other important suggestions, they point out Technique H25, which shows you how to put your descriptive title in the <title> element of the document's <head> section.

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