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.