HTML: struktura dokumentu

<!DOCTYPE html> ← deklaracja typu dokumentu
<html lang="en"> ← deklaracja języka dokumentu
  ↑
  element główny, root element
  <head> ← element metadanych dokumentu
    <meta charset="UTF-8"> ← deklaracja kodowania znaków
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> ← deklaracja viewportu
    <title>Document</title> ← tytuł dokumentu (widoczny m.in. na pasku przeglądarki)
  </head>
  <body>
<!-- treść dokumentu -->
  </body>
</html>

Metadane - <head>

<head>
  <meta charset="UTF-8" />
  <title>Page title</title>
  <link rel="stylesheet" href="style.css" />
  <script src="assets/script.js" defer></script>
  <meta name="description" content="This is a SEO description" />
</head>

Treść dokumentu - <body>

<body>
  <header>
    <!-- zawartość nagłówka strony -->
  </header>
  <main>
    <!-- główna zawartość strony -->
    <article>
      <!-- artykuł na stronie -->
    </article>
  </main>
  <footer>
    <!-- stopka strony -->
  </footer>
</body>

Rodzaje elementów - blokowe vs liniowe

<main>Główna treść dokumentu</main>
<article>Artykuł</article>
<dialog>Okno dialogowe</dialog>
<p>Akapit</p>
<textarea name="myMessage" id="myMessage" cols="30" rows="10">Obszar tekstowy</textarea>
<div>Element ozdobny</div>

<!-- vs -->

<a href="#">Link</a>
<span>Fragment tekstu</span>
<strong>Fragment ważnego zaznaczonego tekstu</strong>
<img src="<URL>" alt="" /> <!-- obrazek -->
<input type="email" /> <!-- pole do wpisania adresu email -->