Struktura dokumentu HTML

> Dodaj do ulubionych

Struktura dokumentu HTML to schemat utworzony za pomocą nagłówków, tytułów formularzy, tytułów tabel oraz innych elementów używanych do konstruowania ogólnych ram plików HTML. Aplikacja kliencka może wykorzystać te informacje np. do utworzenia spisu treści. Spis ten mógłby następnie zostać użyty przez technologię pomocniczą, aby pomóc użytkownikowi w przeglądaniu stron albo do analizy np. przez wyszukiwarkę, aby poprawić wyniki wyszukiwania.

Algorytmy analizujące strukturę dokumentów zostały jasno opisane w specyfikacji HTML 5, a ponieważ wszystkie przeglądarki i technologie pomocnicze ogólnie dobrze ze sobą współpracują, zyskuje na tym dostępność.

Każdy dokument HTML powinien zaczynać się od deklaracji typu dokumentu <!DOCTYPE html>. Całość strony znajduje się w elemencie głównym o nazwie html, czyli między znacznikami <html> i </html>.

Ogólnie zawartość dokumentu dzieli się na część nagłówkową i treść właściwą. Część nagłówkowa mieści się w elemencie head, a treść właściwa — w elemencie body.

Najprostszy w pełni funkcjonalny i prawidłowo skonstruowany dokument HTML5 wygląda tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Tytuł</title>
    <link rel="stylesheet" href="style.css">
    <script src="skrypt.js"></script>
  </head>
  <body>
    <p>Treść strony widoczna w oknie przeglądarki</p>
    <!-- Powyżej znajduje się akapit -->
  </body>
</html>

Opis poszczególnych elementów tego dokumentu:

  • <!DOCTYPE html> — definicja typu dokumentu. Każdy dokument powinien ją zawierać. Ta deklaracja oznacza, że jest to dokument HTML5.
  • <html lang="pl-PL"> — element główny całego dokumentu. Fragment lang=”pl-PL” to atrybut oznaczający, że jest to dokument w języku polskim. Zawsze należy określać język dokumentu w ten sposób, ponieważ ułatwia to pracę czytnikom ekranu, z których korzystają osoby z wadami wzroku.
  • <head> — nagłówek dokumentu. W nagłówku przede wszystkim umieszcza się różne informacje dotyczące całej strony (tzw. metadane), określa się tytuł strony (widoczny między innymi na karcie w oknie przeglądarki) oraz dołącza się arkusze stylów i ewentualnie skrypty.
  • <meta charset="utf-8"> — określa metodę kodowania znaków na stronie: tu UTF-8. Powinien być pierwszym elementem nagłówka.
  • <title>Tytuł</title> — tytuł strony. Zobacz też opis elementu HTML title
  • <link rel="stylesheet" href="style.css"> — dołączenie arkusza stylów o nazwie style.css.
  • <script src="skrypt.js"></script> — dołączenie skryptu JavaScript o nazwie skrypt.js.
  • <body> — treść właściwa strony, czyli wszystko, co będzie wyświetlane w oknie przeglądarki internetowej.
  • <p>...</p> — przykładowy element, reprezentujący akapit.
  • <!--...--> — to jest komentarz, czyli element zawierający dodatkowe objaśnienia do kodu źródłowego, który jest ignorowany przez przeglądarki i nie jest wyświetlany na stronie.

Powyższy dokument można skopiować do dowolnego edytora tekstu, np. Notatnika, i zapisać w pliku o dowolnej nazwie z rozszerzeniem html, aby otrzymać stronę internetową.

Sprawdzanie poprawności dokumentów HTML

Poprawność dokumentu HTML można sprawdzić w walidatorze W3C dostępnym pod adresem https://validator.w3.org/. Użytkownik może wpisać adres strony internetowej, którą chce sprawdzić, przesłać plik do sprawdzenia lub wkleić kod źródłowy bezpośrednio w polu tekstowym.