File structure

Required HTML tags

An HTML document must consist of at least these four tags:

<!DOCTYPE html> – tells the browser that this is an HTML document.
<html lang="en"> … </html> – inform the browser of the begining and end of the document as well as its main language.
<head> … </head> – contains all the information not displayed on the page. This includes the title, meta tags, and links to CSS and JS files.
<body> … </body> – contains the visible content.

Here is an example of a minimal HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- announces the character encoding -->
    <meta charset="utf-8" />
    <!-- informs the browser of the viewport size -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- title of the page (displayed in the browser tab) -->
    <title>Page title</title>
    …
  </head>
  <body>
    …
  </body>
</html>

Advanced: creating a template

You can create this template by writing ! in a new file, Visual Code Studio will autocomplete it for you.

Terminology of HTML tags

Almost every HTML tag consists of an opening tag, in which the attributes are specified, and a closing tag. The opening tag is written in the form of <tag>, and the closing tag is written in the form of </tag>. The opening tag is followed by the content of the tag, and the closing tag is followed by a slash /.

<p>
  Magna ipsum ad excepteur officia veniam duis sit do dolor magna exercitation tempor.
</p>

Attributes are specified in the opening tag, and are separated by spaces. The attribute name is written in the form of attribute-name, and the attribute value, if any, is specified in the form of ="attribute-value".

<a href="folder/index.html" crossorigin>Link</a>

Some HTML tags are self-closing, which means that the closing tag is not required. For example, the <img/> tag is self-closing, because it does not require a closing tag. The following code is an example of an image tag that is self-closing:

<img src="assets/images/placeholder.jpg" alt="Grey placeholder rectangle" />

The closing tag is not required because the image tag is self-closing.

We relate HTML tags by their relationship to each other: ancestor, parent, sibling, child, descendant. The ancestors of an element are the elements that contain it. The parent of an element is the element that contains it. The siblings of an element are the elements that share the same parent. The children of an element are the elements that are contained within it. The descendants of an element are the elements that are contained within it, and its descendants. For example:

<div> <!----------- ancestor -->
  <ul> <!---------- parent & ancestor -->
    <li> <!-------- tag used as reference -->
      <p></p> <!--- child & descendant -->
      <p></p> <!--- child & descendant -->
      <p> <!------- child & descendant -->
        <img/> <!-- descendant -->
      </p>
    </li>
    <li></li> <!--- sibling -->
    <li></li> <!--- sibling -->
  </ul>
</div>