HTML

Getting started

HTML stands for HyperText Markup Language it is the structure of web pages. You can create a very basic HTML5 structure using the emmet plugin html:5 or simply ! which gives this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Your content added here -->
</body>
</html>

To learn more about emmet check out this great cheat sheet

When HTML5 was released it introduced a number of semantic elements including <header>, <footer>, <article>, <aside> and others.

  <main>
    <section>
        <header>My section heading</header>
        <p>This is a great article about HTML.</p>
        <footer>Copyright 2020 by The Author<footer>
    </section>
  </main>

Nav elements generally appear at top or left of a site, but can be used elsewhere e.g. to contains links in a footer element although this isn't strictly necessary. Pages can quite often contain multiple nav elements - one for main site navigation and another for intra-page navigation. If doing this it is a good idea to use aria-labelledby attribute for those using screen readers.

Article is used for a self-contained content not related to the page e.g. a news site would have multiple article elements. Note each of these elements should contain a heading tag as a child element.

Aside is used for content indirectly related to the main content of the page usually a sidebar or some sort of call out box.

Section element is a standalone section within a page (usually containing a heading) which as MDN states:

which doesn't have a more specific semantic element to represent it

It should not be used as a generic container for content this is what divs are used for. A general rule of thumb is if it appears in a document outline it should be in its own section.

div - this is for content that doesn't fit in any of the other examples