Struktura dokumentu HTML5

Standard, semantyka, praktyka — INF.03
<!DOCTYPE html>
<html>
<head>
<body>
<header>
<nav>
<main>
<section>
<footer>

Deklaracja DOCTYPE

Pierwsza linia dokumentu <!DOCTYPE html> — ustawia tryb HTML5 i poprawne wyświetlanie w przeglądarce.

Element <html>

Początek i koniec całej strony; atrybut lang ustawia język (np. pl).

Sekcja <head>

Meta informacje dla przeglądarki, SEO, stylów i skryptów.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tytuł strony</title>
  <link rel="stylesheet" href="style.css">
</head>

Sekcja <body>

Tu jest cała widoczna treść strony — teksty, obrazy, sekcje, nagłówki, stopka.

  • <header> — nagłówek strony lub sekcji
  • <nav> — menu nawigacyjne
  • <main> — główny blok treści (po 1 na stronie)
  • <section> — logiczny fragment treści
  • <footer> — stopka z informacjami

Kompletny szkielet HTML5

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Struktura HTML5</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>Nagłówek, logo, menu</header>
  <nav>Menu nawigacyjne</nav>
  <main>
    <section>
      <h2>Sekcja główna</h2>
      <p>Treść strony w sekcji.</p>
    </section>
  </main>
  <footer>Copyright © 2025</footer>
</body>
</html>

Ćwiczenia praktyczne

Ćwiczenie 1 — Zbuduj własny szkielet HTML5
Wstaw poprawnie każdy kluczowy element: <!DOCTYPE html>, <html>, <head>, <body>, <header>, <main>, <section>, <footer>.
Ćwiczenie 2 — Rozpoznaj semantykę 
<main>
  <section>
    <article>
      <h2>Tytuł</h2>
      <p>Treść artykułu</p>
    </article>
  </section>
</main>

main — główny kontent
section — blok tematyczny
article — samodzielna jednostka (np. news)
h2, p — nagłówek i tekst

Quiz Sprawdź wiedzę

<nav>
<main>
logiczny blok tematyczny
stopka strony
W sekcji <head>
W sekcji <body>

Checklista Kompetencje po module

Materiały: INF.03 — Struktura HTML · Opracowanie: Tomasz Puchała © 2025