Podstawy HTML – powtórka

Powtórka: jak wygląda dokument HTML? 🧩

Każda strona HTML ma podobną strukturę:

Przykład

<!DOCTYPE html>
<html>
  <head>
    <title>Tytuł strony</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Witaj!</h1>
    <p>To jest przykładowa strona.</p>
    <img src="obrazek.jpg" alt="Obrazek" width="200">
    <ul>
      <li>Pierwszy punkt</li>
      <li>Drugi punkt</li>
    </ul>
  </body>
</html>

<!DOCTYPE html> – deklaracja wersji HTML
<html> – główny kontener
<head> – metadane, tytuł, style, skrypty
- <meta charset="UTF-8"> – kodowanie znaków (polskie litery!)
- <meta name="viewport" ...> – responsywność na telefonach
- <link rel="stylesheet" ...> – podpięcie CSS
<body> – widoczna treść strony
- <h1> – nagłówek
- <p> – paragraf
- <img> – obrazek
- <ul>, <li> – lista

Najważniejsze sekcje dokumentu

<head> – tu umieszczasz tytuł, style, skrypty, metadane
<body> – tu jest cała treść dla użytkownika
<footer> – stopka strony (opcjonalnie)
<header> – nagłówek strony (opcjonalnie)
<main> – główna zawartość (HTML5)
<section> – sekcja tematyczna
<nav> – nawigacja

Częste błędy i dobre praktyki

Brak zamknięcia tagów
Literówki w nazwach znaczników
Brak deklaracji <!DOCTYPE html>
Brak kodowania znaków (<meta charset="UTF-8">)
Zagnieżdżanie elementów w złej kolejności
Używanie nieprawidłowych znaczników

Dobre praktyki:

Zawsze zamykaj tagi
Używaj wcięć dla czytelności
Komentuj kod ()
Używaj polskich znaków dzięki UTF-8
Testuj stronę w różnych przeglądarkach

Praktyczne przykłady

Przykład

<!-- Minimalny szablon HTML -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Przykład</title>
  </head>
  <body>
    <h1>To jest nagłówek</h1>
    <p>To jest paragraf.</p>
  </body>
</html>

FAQ

Czy <head> jest obowiązkowy? Nie, ale zalecany – zawiera metadane, tytuł, style.

Czy <body> jest obowiązkowy? Tak, tam trafia cała widoczna treść.

Co jeśli zapomnę <!DOCTYPE>? Przeglądarka spróbuje zgadnąć, ale mogą pojawić się błędy.

Czy muszę zamykać wszystkie tagi? Tak, to dobra praktyka i ułatwia czytelność.