Logo

PiskorowskiJakub.pl

Wszystkie kursy Podstawy tworzenia stron HTML - Podstawowa struktura dokumentu

HTML - Podstawowa struktura dokumentu

Opis: Zostanie omówiona podstawowa struktura dokumentu HTML, deklaracja <!DOCTYPE html>, znaczniki <html>, <head>, <body> oraz najważniejsze metadane i elementy dokumentu, takie jak <meta>, <title>, <link> i <script>.

Podstawowa struktura dokumentu HTML5

Każda strona internetowa tworzona w języku HTML posiada określoną strukturę. Przeglądarka internetowa analizuje ten kod i na jego podstawie wyświetla stronę użytkownikowi.

Przykładowa podstawowa struktura dokumentu HTML5:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytuł strony</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h1>Witaj na mojej stronie</h1>
    <p>To jest przykładowa strona HTML5.</p>

</body>
</html>

Autor: Jakub Piskorowski
Data stworzenia: 11.05.2026

Znaczniki podstawowej struktury

<!DOCTYPE html>

<!DOCTYPE html> informuje przeglądarkę, że dokument został napisany zgodnie ze standardem HTML5. Powinna znajdować się zawsze na samym początku dokumentu HTML.

Dlaczego DOCTYPE jest ważny

Bez deklaracji DOCTYPE przeglądarka może niepoprawnie interpretować kod, działać w trybie zgodności ze starszymi wersjami HTML, wyświetlać stronę inaczej niż oczekiwano. Współcześnie praktycznie wszystkie strony internetowe korzystają z <!DOCTYPE html>

<html>

<html> jest głównym elementem dokumentu HTML i zawiera całą zawartość strony internetowej. Wszystkie inne elementy strony znajdują się wewnątrz tego znacznika.

Parametr lang

Najczęściej używany parametr:

<html lang="pl">

Parametr lang określa język strony internetowej.

Przykłady:

  • <html lang="pl"> - język polski

  • <html lang="en"> - język angielski

Dlaczego lang jest ważny?

Pomaga przeglądarkom, wyszukiwarkom, czytnikom ekranowym, translatorom internetowym. Dzięki temu strona jest bardziej dostępna i lepiej pozycjonowana w wyszukiwarkach.

<head>

Sekcja <head> zawiera informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika na stronie.

W sekcji <head> umieszcza się między innymi:

  • tytuł strony,

  • metadane,

  • pliki CSS,

  • skrypty JavaScript,

  • informacje dla wyszukiwarek.

Metadane w HTML

Metadane to informacje opisujące stronę internetową. Znajdują się zazwyczaj w sekcji <head>.

Metadane pomagają przeglądarkom, wyszukiwarkom, systemom indeksowania, urządzeniom mobilnym.

<meta charset="UTF-8">

<meta charset="UTF-8">

Znacznik <meta charset="UTF-8"> określa kodowanie znaków używane na stronie.

UTF-8 obsługuje polskie znaki, znaki specjalne, większość języków świata. Dlaczego jest ważny? Bez poprawnego kodowania mogą pojawić się błędne znaki, np. "Zażółć gęślą jaźń" może zostać wyświetlone niepoprawnie.

<title>

<title>Moja strona</title>

Znacznik <title>Moja strona</title> ustawia tytuł strony internetowej.

Tytuł wyświetlany jest:

  • na karcie przeglądarki,

  • w wynikach wyszukiwania,

  • podczas dodawania strony do zakładek.

Tytuł powinien być krótki, opisywać zawartość strony, być unikalny dla każdej podstrony.

<link>

<link rel="stylesheet" href="css/style.css">

Znacznik <link> najczęściej służy do podłączania plików CSS.

Najważniejsze parametry:

  • rel - określa relację pliku

  • href - określa ścieżkę do pliku

Czcionki internetowe

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="icon">

<link rel="icon" href="favicon.ico">

Służy do ustawienia ikony strony internetowej.

Favicon to mała ikonka widoczna:

  • na karcie przeglądarki,

  • w zakładkach,

  • w historii przeglądania,

  • czasami na urządzeniach mobilnych.

Obsługiwane formaty ikon:

  • .ico

  • .png

  • .svg

<meta name="viewport">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Odpowiada za prawidłowe wyświetlanie strony internetowej na urządzeniach mobilnych. Dzięki niemu strona poprawnie dopasowuje się do smartfonów, tabletów, różnych rozdzielczości ekranów.

Dlaczego jest ważny? Bez znacznika viewport strona może być zbyt pomniejszona na telefonie, wyglądać nieczytelnie, wymagać ręcznego przybliżania przez użytkownika. Obecnie praktycznie każda nowoczesna strona internetowa wykorzystuje ten znacznik.

Najważniejsze parametry:

  • width=device-width - szerokość strony dopasowuje się do szerokości urządzenia

  • initial-scale=1.0 - początkowy poziom powiększenia strony

<body>

Sekcja <body> zawiera całą widoczną zawartość strony internetowej. To właśnie tutaj umieszcza się tekst, nagłówki, obrazy, formularze, przyciski, tabele, multimedia.

Przykład:

<body>

    <h1>Witaj!</h1>
    <p>To jest moja strona internetowa.</p>

</body>

Wszystko znajdujące się w <body> jest wyświetlane użytkownikowi w przeglądarce.

<script>

Znacznik <script> służy do podłączania lub uruchamiania kodu JavaScript. JavaScript odpowiada za interaktywność strony, animacje, dynamiczne zmiany treści, komunikację z serwerem.

Połączenie pliku JavaScript:

<script src="script.js"></script>

Najważniejsze parametry:

  • src - ścieżka do pliku JavaScript

  • defer - uruchamia skrypt po załadowaniu HTML

  • async - ładuje skrypt asynchronicznie

Przykład z defer:

<script src="script.js" defer></script>

defer jest obecnie bardzo często używany, ponieważ przyspiesza ładowanie strony, zapobiega blokowaniu renderowania HTML.

Kod JavaScript bezpośrednio w HTML

<script>
    alert("Witaj na stronie!");
</script>

Autor: Jakub Piskorowski
Data stworzenia: 14.05.2026

Organizacja dokumentu HTML

Komentarze HTML

Komentarze HTML służą do dodawania notatek i opisów w kodzie strony internetowej. Komentarze nie są widoczne dla użytkownika w przeglądarce - widzi je jedynie osoba analizująca kod źródłowy strony.

Komentarze pomagają:

  • opisywać fragmenty kodu,

  • organizować strukturę dokumentu,

  • tymczasowo wyłączać elementy strony podczas testów.

Przykład:

<!-- Nagłówek strony -->

<h1>Witaj na stronie</h1>

<!-- Sekcja kontaktowa -->

<!--
<p>Ten tekst nie zostanie wyświetlony.</p>
-->

Ważne informacje:

  • nie mogą być zagnieżdżane,

  • nie wpływają na wygląd strony,

  • poprawiają czytelność kodu.

<div>

Znacznik <div> jest uniwersalnym kontenerem blokowym używanym do grupowania elementów strony.

Najczęściej wykorzystuje się go do:

  • budowania układu strony,

  • tworzenia sekcji,

  • stylizacji CSS,

  • organizacji kodu HTML.

Element blokowy zajmuje całą dostępną szerokość, rozpoczyna nową linię.

<div class="box">
    <h2>Aktualności</h2>
    <p>Treść artykułu.</p>
</div>

Parametry znacznika:

  • class - przypisuje klasę CSS

  • id - unikalny identyfikator elementu

  • style - styl CSS zapisany bezpośrednio w HTML

Przykład znacznika z parametrami:

<div id="menu" class="container" style="background-color: lightblue;">
    Menu strony
</div>

<span>

Znacznik <span> jest uniwersalnym elementem liniowym używanym do oznaczania małych fragmentów tekstu lub elementów wewnątrz innych znaczników.

Element liniowy:

  • nie rozpoczyna nowej linii,

  • zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość.

Najczęściej używany jest do:

  • stylizacji fragmentów tekstu,

  • dodawania klas CSS,

  • dynamicznych zmian przez JavaScript.

<p>To jest <span class="important">ważna informacja</span>.</p>

Parametry znacznika:

  • class - przypisuje klasę CSS

  • id - unikalny identyfikator elementu

  • style - styl CSS zapisany bezpośrednio w HTML

Ścieżki względne i bezwzględne do plików

Ścieżki określają lokalizację plików używanych na stronie internetowej, np.: obrazów, arkuszy CSS, plików JavaScript, dokumentów. W HTML stosuje się dwa główne rodzaje ścieżek względne, bezwzględne.

Ścieżka względna

Ścieżka względna odnosi się do lokalizacji pliku względem aktualnego dokumentu HTML. Najczęściej używana podczas tworzenia stron internetowych.

Przykład:

<img src="images/logo.png">

Przeglądarka będzie szukała pliku: images/logo.png względem lokalizacji aktualnej strony.

Przykład przejścia poziom wyżej:

<link rel="stylesheet" href="../css/style.css">

../ oznacza przejście o jeden folder wyżej.

Ścieżka bezwzględna

Ścieżka bezwzględna zawiera pełny adres zasobu. Może wskazywać lokalizację na serwerze, zasób w Internecie.

Przykład:

<img src="https://example.com/images/logo.png">

Autor: Jakub Piskorowski
Data stworzenia: 14.05.2026

Walidacja dokumentu HTML

Poprawna struktura HTML oznacza zapisanie dokumentu zgodnie ze standardami języka HTML5.

Prawidłowy dokument powinien zawierać:

  • <!DOCTYPE html>

  • <html>

  • <head>

  • <body>

oraz poprawnie zamknięte znaczniki.

Walidacja HTML polega na sprawdzaniu, czy kod strony jest zgodny ze standardem HTML.

Walidacja pomaga wykrywać:

  • błędy składni,

  • niezamknięte znaczniki,

  • niepoprawne atrybuty,

  • problemy ze strukturą dokumentu.

Dlaczego walidacja jest ważna

Poprawny kod:

  • działa stabilniej,

  • lepiej współpracuje z przeglądarkami,

  • poprawia dostępność strony,

  • ułatwia pozycjonowanie SEO,

  • jest łatwiejszy do rozwijania.

Narzędzia do walidacji

Jednym z najpopularniejszych narzędzi jest walidator organizacji W3C:

W3C Markup Validation Service

Pozwala on sprawdzić:

  • kod HTML,

  • adres strony internetowej,

  • przesłany plik HTML.

Autor: Jakub Piskorowski
Data stworzenia: 14.05.2026

© 2026 Piskorowski Jakub. All rights reserved.