HTML I CSS · INF.03 · MODUŁ 01

Struktura dokumentu HTML

Każda strona zaczyna się od szkieletu. Poznasz elementy, które muszą być na miejscu, zanim napiszesz pierwszą linię treści.

Wprowadzenie

HTML (HyperText Markup Language) opisuje strukturę dokumentu. Nie jest językiem programowania — nie liczy ani nie podejmuje decyzji. Znacznikami mówisz przeglądarce, co jest nagłówkiem, akapitem, listą czy linkiem.

Przeglądarka pobiera plik HTML, czyta znaczniki i buduje z nich drzewo elementów. Dopiero na tej podstawie rysuje stronę. Dlatego ten sam kod może wyglądać trochę inaczej w Chrome i w Firefoksie, ale struktura treści pozostaje ta sama.

Każdy dokument ma stały szkielet: deklarację typu dokumentu, element <html>, sekcję <head> z informacjami o stronie oraz <body> z treścią widoczną w oknie przeglądarki.

W <head> znajdziesz kodowanie znaków, ustawienia ekranu i tytuł karty. W <body> — nagłówki, akapity, listy i wszystko, co czyta użytkownik. Komentarz <!-- ... --> może leżeć w dowolnym miejscu, ale przeglądarka go nie wyświetla.

Najważniejsza własność

Najważniejsza własność dokumentu HTML to poprawna struktura: jeden element <html>, w nim jedna sekcja <head> i jedno <body>. Przeglądarka potrafi naprawić wiele błędów, ale nie zastąpi brakujących informacji.

Deklaracja <!doctype html> uruchamia tryb standardów. Bez niej przeglądarka może przejść w tryb zgodności i inaczej liczyć wymiary elementów. Atrybut lang="pl" informuje czytniki ekranu i wyszukiwarki, w jakim języku jest treść.

Elementy <meta> przekazują informacje, których nie widać na stronie. charset="utf-8" zapewnia poprawne polskie znaki, a viewport mówi telefonowi, jak dopasować szerokość strony do ekranu. Tytuł z <title> pojawia się na karcie przeglądarki i w wynikach wyszukiwania.

<html lang="pl">
  <head>...</head>
  <body>...</body>
</html>

<!doctype html>
<html 
      — wybierz —
      lang
      charset
      title
    ="pl">
<head>
  <meta 
      — wybierz —
      lang
      charset
      name
    ="utf-8">
  <title>Moja strona</title>
</head>
<body>
  <h1>Witaj</h1>
</body>
</html>

Przykłady

Przykład 1 — minimalna strona

Zbuduj dokument, który ma tylko wymagany szkielet i jedną treść. Zwróć uwagę na kolejność elementów w sekcji head.

HTML

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Moja pierwsza strona</title>
</head>
<body>
  <h1>Witaj na mojej stronie</h1>
  <p>To jest pierwszy akapit. Przeglądarka pokazuje tylko treść z body.</p>
</body>
</html>

podgląd w przeglądarce

1. Deklaracja <!doctype html> mówi, że to dokument HTML5.
2. Element <html lang="pl"> obejmuje całość i wskazuje język polski.
3. W <head> są metadane: kodowanie i tytuł. W <body> — treść.
4. Przeglądarka dorysowuje domyślne marginesy wokół nagłówka i akapitu.

Wynik: poprawny, kompletny dokument HTML5. Tytuł pojawia się na karcie, a treść w oknie przeglądarki.

Przykład 2 — hierarchia nagłówków h1–h6

Ułóż nagłówki od najważniejszego do najmniej ważnego. Poziom musi wynikać z układu treści, a nie z rozmiaru czcionki.

HTML

<h1>Kurs HTML i CSS</h1>
<h2>Moduł 1 — struktura dokumentu</h2>
<h3>Doctype i język</h3>
<h3>Elementy w head</h3>
<h2>Moduł 2 — tekst i listy</h2>
<h3>Formatowanie tekstu</h3>
<h4>Ważne fragmenty</h4>
<h5>Przykład</h5>
<h6>Przypis</h6>

podgląd w przeglądarce

1. Na stronie jest jedno <h1> — główny temat dokumentu.
2. <h2> dzieli dokument na moduły, a <h3> na podsekcje.
3. Poziomy schodzą stopniowo: nie przeskakuj z <h2> do <h4> bez <h3>.
4. Rozmiar czcionki to efekt uboczny. O hierarchii decyduje sens treści.

Wynik: czytelna struktura dokumentu. Przeglądarka pokazuje coraz mniejsze nagłówki, a czytnik ekranu może po nich nawigować.

Przykład 3 — meta viewport na desktopie i telefonie

Ta sama strona ma tak samo wyglądać na szerokim ekranie i na telefonie. Odpowiada za to jedna linia w sekcji head. Na zrzutach powiększono tekst i zwężono kartę desktopową, żeby oba widoki były czytelne obok siebie.

HTML

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wycieczka w góry</title>
</head>
<body>
  <h1>Wycieczka w góry</h1>
  <p>
    W sobotę wyruszamy szlakiem na Wielką Sowę.
    Zabierz wygodne buty, wodę i kurtkę przeciwdeszczową.
  </p>
  <p>Zbiórka o 7:30 przy dworcu PKP. Powrót planujemy na 18:00.</p>
  <p>Trasa ma 12 km i jest oznaczona kolorem czerwonym.</p>
</body>
</html>

podgląd w przeglądarce

podgląd w przeglądarce

1. width=device-width ustawia szerokość układu równą szerokości ekranu.
2. initial-scale=1 zaczyna od skali 1:1, bez automatycznego pomniejszania.
3. Bez tej deklaracji telefon przyjmuje około 980 px szerokości i oddala stronę, żeby zmieściła się na ekranie.
4. Na desktopie deklaracja zwykle nic nie zmienia — dlatego oba zrzuty mają tę samą treść.

Wynik: na telefonie tekst zajmuje całą szerokość ekranu i jest czytelny bez powiększania.

Spróbuj samodzielnie

1. Napisz minimalny dokument HTML5 z tytułem „Moja strona” i jednym nagłówkiem <h1> „Cześć”. Ustaw język polski.

   Pokaż rozwiązanie

   Zacznij od deklaracji typu dokumentu, potem otwórz <html lang="pl">. W <head> umieść kodowanie i tytuł, a w <body> nagłówek.

   HTML

   <!doctype html>
   <html lang="pl">
   <head>
     <meta charset="utf-8">
     <title>Moja strona</title>
   </head>
   <body>
     <h1>Cześć</h1>
   </body>
   </html>

2. Uczeń napisał dokument, w którym brakuje dwóch ważnych elementów. Wskaż braki i popraw kod.

   HTML — kod z brakami

   <html lang="pl">
   <head>
     <title>Moja strona</title>
   </head>
   <body>
     <h1>Witaj</h1>
     <p>To jest mój pierwszy dokument.</p>
   </body>
   </html>

   Pokaż rozwiązanie

   Brakuje deklaracji <!doctype html> na początku oraz <meta charset="utf-8"> w sekcji head. Bez kodowania polskie znaki mogą wyświetlić się niepoprawnie.

   HTML — kod poprawny

   <!doctype html>
   <html lang="pl">
   <head>
     <meta charset="utf-8">
     <title>Moja strona</title>
   </head>
   <body>
     <h1>Witaj</h1>
     <p>To jest mój pierwszy dokument.</p>
   </body>
   </html>

3. Strona na telefonie jest pomniejszona, a tekst zajmuje tylko środkową część ekranu. W dokumencie są już poprawny charset i tytuł. Co dodać i gdzie?

   Pokaż rozwiązanie

   Do sekcji <head> dodaj linię viewport. Dzięki niej telefon nie przyjmuje domyślnej szerokości około 980 px, tylko dopasowuje układ do rzeczywistego ekranu.

   HTML

   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Moja strona</title>
   </head>

4. W dokumencie są nagłówki: <h1>Oferta</h1>, <h1>Kontakt</h1> i <h4>Cennik</h4>. Popraw hierarchię, zachowując sens treści.

   Pokaż rozwiązanie

   Strona powinna mieć jedno <h1> jako główny temat. Działy strony ustaw jako <h2>, a podtematy jako <h3> — bez przeskakiwania poziomów.

   HTML

   <h1>Oferta</h1>
   <h2>Cennik</h2>
   <h2>Kontakt</h2>

   „Cennik” i „Kontakt” są działami tej samej strony, więc mają ten sam poziom <h2>. Żaden nagłówek nie przeskakuje z <h1> od razu do <h4>.

Podsumowanie. Dokument HTML zaczyna się od deklaracji doctype, ma jeden element <html> z językiem, sekcję <head> z kodowaniem, viewportem i tytułem oraz <body> z treścią. Nagłówki tworzą hierarchię, a przeglądarka dodaje domyślne marginesy. Komentarze pomagają w kodzie, ale nie są widoczne na stronie.