The Structure of an HTML Document

HTML (HyperText Markup Language) is the language that describes the content and meaning of a web page: this is a heading, this is a paragraph, this is a link. Appearance (colors, layout) comes later with CSS, and interactions with JavaScript.

Tags, elements and attributes

An HTML element is generally written with an opening tag, content and a closing tag:

<!-- opening tag, content, closing tag -->
<p>Hello everyone</p>

<!-- an attribute refines the element: name="value" -->
<a href="contact.html">Contact us</a>

Some elements are empty: they have neither content nor a closing tag, for example <meta>, <img>, <br> or <input>.

Elements nest like Russian dolls: you always close first what you opened last.

<p>A word <strong>important</strong> here.</p>   <!-- correct -->
<p>A word <strong>important</p></strong>        <!-- incorrect -->

The minimal skeleton

Here is the basis of every modern page:

<!DOCTYPE html>                 <!-- the browser's standards mode -->
<html lang="fr">                <!-- main language of the page -->
  <head>
    <meta charset="UTF-8">      <!-- encoding: accents display correctly -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first site</title>  <!-- text of the tab and of search engines -->
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my first page.</p>
  </body>
</html>

Line by line:

• <!DOCTYPE html> is not a tag but a declaration: it tells the browser to use standards mode.
• <html lang="fr"> is the root of the document. The lang attribute helps screen readers pick the right pronunciation and search engines classify the page.
• <head> groups the metadata, invisible in the page: encoding, mobile display setting (viewport), tab title, and later the links to CSS stylesheets.
• <body> contains everything the user sees.

The document tree

The browser turns this text into a tree (the DOM): html has two children, head and body, which themselves have children. Keeping this picture in mind will help you a lot with CSS and JavaScript.

Good habits

• Indent your code: each level of nesting is shifted by two spaces.
• Write tags and attributes in lowercase and put quotes around values.
• Add comments with <!-- ... -->; they are not displayed.
• Save the file as UTF-8 with the .html extension, then open it in your browser.

HTML is forgiving: an error does not crash the page, the browser guesses. That is handy, but it hides errors. Get into the habit of writing clean code from the start.