Aby zacząć dokument HTML, należy przestrzegać ściśle określonej struktury, która pozwala przeglądarce prawidłowo zinterpretować zawartość strony. Każdy dokument HTML powinien zaczynać się od deklaracji typu dokumentu, a następnie zawierać zagnieżdżone elementy opisujące zarówno metadane, jak i widoczną treść strony.
Podstawowa struktura dokumentu HTML
Typowy dokument HTML składa się z następujących części:
- Deklaracja typu dokumentu
Na samym początku konieczne jest umieszczenie deklaracji:
<!DOCTYPE html>Informuje ona przeglądarkę, że mamy do czynienia z dokumentem w najnowszej wersji HTML (HTML5).
- Element
<html>
Obejmuje całą zawartość dokumentu:
<html lang="pl"> ... </html>Atrybut lang="pl" określa język dokumentu (tutaj: polski).
- Sekcja
<head>Obejmuje metadane, takie jak tytuł strony, kodowanie znaków, odnośniki do stylów czy skryptów:
<head>
<meta charset="UTF-8">
<title>Przykładowa Strona</title>
<meta name="description" content="Pierwszy przykładowy dokument HTML">
<link rel="stylesheet" href="style.css">
</head>
<meta charset="UTF-8">– ustala kodowanie znaków, zazwyczaj UTF-8;<title>– wyświetla nazwę strony w pasku przeglądarki;<meta name="description">– opis strony, przydatny dla wyszukiwarek internetowych;<link rel="stylesheet">– umożliwia dodanie zewnętrznych arkuszy stylów.
- Sekcja
<body>Zawiera główną, widoczną dla użytkownika treść strony:
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest pierwszy dokument HTML, który właśnie utworzyłeś.</p>
</body>
Elementy w tej sekcji wyświetlane są użytkownikowi w przeglądarce.
Przykład kompletnego dokumentu HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pierwsza Strona HTML</title>
<meta name="description" content="To przykład prostego dokumentu HTML do nauki.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Moja Pierwsza Strona</h1>
<p>Witaj w świecie HTML. To jest pierwszy akapit na mojej stronie internetowej.</p>
<ul>
<li>Pierwszy punkt listy</li>
<li>Drugi punkt listy</li>
<li>Trzeci punkt listy</li>
</ul>
<img src="obrazek.jpg" alt="Opis obrazka">
</body>
</html>
Cechy charakterystyczne elementów HTML
- Każdy element otwieramy tagiem, na przykład
<p>, i zamykamy tagiem z ukośnikiem, na przykład</p>; - Elementy mogą być zagnieżdżone jeden w drugim, tworząc strukturę hierarchiczną;
- Odpowiednie użycie tagów zapewnia poprawność dokumentu oraz czytelność kodu.
Wybrane zastosowania poszczególnych sekcji
- W
<head>umieszczasz również skrypty JavaScript (<script src="...">), faviconę (<link rel="icon">) czy ogólne dane dla przeglądarek i wyszukiwarek; - W
<body>, oprócz tekstu, mogą się znaleźć tabele, formularze kontaktowe, osadzone multimedia, elementy nawigacji oraz wszelkie inne treści, z którymi ma styczność użytkownik.
Najczęstsze błędy na początku pracy z HTML
- Pominięcie deklaracji
<!DOCTYPE html>, co może prowadzić do nieprzewidywalnego działania przeglądarki; - Brak zamknięcia tagów lub ich niepoprawne zagnieżdżanie;
- Umieszczanie treści bezpośrednio poza sekcjami
<head>i<body>.
Przydatne wskazówki dla początkujących
- Warto korzystać z edytora kodu, który podkreśla składnię HTML, np. Visual Studio Code lub Sublime Text;
- Testowanie swojej strony w różnych przeglądarkach wyeliminuje ewentualne różnice w wyświetlaniu;
- Dobrą praktyką jest dbanie o czytelną strukturę kodu i wcięcia ułatwiające orientację w zagnieżdżeniach elementów.
Przykładowa rozbudowana struktura strony
Gdy poznasz podstawy, możesz wprowadzać do dokumentu dodatkowe sekcje, np. nawigację, stopki, artykuły:
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Artykuł na stronie</h1>
<p>Zawartość artykułu...</p>
</article>
</main>
<footer>
<p>Copyright © 2025 Twoje Imię</p>
</footer>
</body>
Stosując powyższe zasady i przykłady, możesz już w pełni samodzielnie przygotować swój pierwszy poprawny dokument HTML, stanowiący fundament każdej nowoczesnej strony internetowej.
