Standard kodowania w HTML

Tworzyłem strony internetowe w czasach, kiedy CSS nie istniał. Podstawowym narzędziem do układania treści na stronie była tabela. Uważałem wtedy, że tworzenie stron internetowych jest trudne, ponieważ rozmiary monitorów były różne od 13 cali do 22 cali i na każdym z nich strona wyglądała inaczej. Potem pojawił się CSS i sprawił, że w ogóle przestałem rozumieć jak poukładać treści na stronie. Być może stało się tak, bo nie potrafiłem opakować treści na stronie w odpowiednie znaczniki HTML. Dzisiaj wiem, że to spore niedopatrzenie z mojej strony. Na szczęście są organizacje, które wydają przewodniki, w których wskazują, jak używać kodu HTML.

Historycznie pierwszą organizacją, która zajęła się tematem publikacji standardów HTML była W3C. W 2004 roku powstał rozłam w tej organizacji i pojawiła się druga organizacja zajmująca się ustanawianiem i popularyzacją standardów HTML – WHATWG. Obecnie W3C zajmuje się publikacją podstawowych zasad stosowania języka HTML, z kolei WHATWG skupiona jest wokół “producentów” przeglądarek internetowych i bardziej zajmuje się nowymi wdrożeniami do języka HTML. W tym wpisie pokażę Ci jakie informacje możesz znaleźć w standardzie HTML 5 opublikowanym na stronie https://www.w3.org/TR/html52/index.html

Zacznijmy od tego, że każdy dokument napisany w HTML powinien mieć strukturę drzewa z podziałem na dwie części: HEAD i BODY.

W części HEAD umieszczamy główne informacje na temat strony. W BODY umieszczamy zawartość witryny, która będzie wyświetlana użytkownikowi. Opracowując dokument w HTMLu do dyspozycji mamy elementy, atrybuty i wartości atrybutów, które pozwalają nam zarządzać treścią. Samą treści można podzielić na kilka kategorii:

  • Metadane – pozwalają skonfigurować zachowanie treści na stronie, oraz ustalić relacje pomiędzy obecnie wyświetlaną treścią, a innymi treściami znajdującymi się na stronie WWW.
  • Flow content – większość elementów używanych na stronie w sekcji BODY należy do tej kategorii.
  • Sectioning content – definiuje zakres nagłówków i stopek np.: article, aside, nav, section.
  • Heading content – definiuje nagłówek sekcji np.: H1, H2, H3 itd.
  • Phrasing content – definiuje tekst na poziomie akapitu np.: a, br, ins, img.
  • Embedded content – importuje coś z innego źródła do dokumentu np.: audio, canvas, iframe.
  • Interactive content – służy do prowadzenia interakcji z użytkownikiem np.: button, input, select.

Strukturę dokumentu HTML definiujemy poprzez elementy. Wytyczne W3C uwzględniają następujące rodzaje elementów HTML:

  • Metadata
  • Sekcje
  • Elementy grupujące
  • Elementy charakteryzujące tekst
  • Edycyjne
  • Zawartości osadzone
  • Elementy multimedialne
  • Linki
  • Dane tabelaryczne
  • Formularze
  • Elementy interaktywne
  • Skrypty

Mało tego, w każdej grupie elementów znajduje się sporo konkretnych typów elementów np.: blockquote, ol, li, dl, dt, figure, main itd. Zapoznając się z bogactwem języka HTML okazuje się, że dużą część pracy nad wyglądem strony można wykonać za pomocą HTMLa, nie trzeba od razu wyciągać CSSa do prostych formatowań tekstu. Na przykład, samych typów linków jest czternaście.

Rekomendowany sposób budowy struktury dokumentu, to nie wszystko co możesz znaleźć w przewodniku W3C. Odnosi się on również do elementów interaktywnych strony, łącznie z wykorzystaniem systemu drag and drop i tym jak może ten system być wykorzystany przez hakerów.  Zawiera pokaźne rozdziały dotyczące tego, jak ładują się strony WWW w przeglądarce, jak korzystać z API, czy jak przygotować dokument XML.

Wiedzy mnóstwo, nie sposób całości zapamiętać. Na szczęście przewodnik jest tak skonstruowany, że łatwo się w nim poruszać. Kiedy zapomnisz o czymś, na pewno łatwo odnajdziesz wytyczne dotyczące zastosowania wskazanego elementu kodu HTML.

Na stronie W3C dostępne jest również bardzo pomocne narzędzie do sprawdzania jakości kodu HTML, który się napisało. Validator dostępny jest pod adresem https://validator.w3.org/ i można wskazać mu po prostu link do strony, załadować plik z kodem, albo wkleić kod bezpośrednio w przeglądarkę. Test zostanie przeprowadzony błyskawicznie i już po chwili wiesz, czy kod został przygotowany zgodnie z zaleceniami W3C.

Podsumowując, ja do tej pory nie zwracałem dużej uwagi na składnię HTMLa tworzonych stron WWW. Ograniczałem się do kilku podstawowych elementów sekcji HEAD: poprawny zestaw znaków, czcionka, język i to wszystko. Reszta w CSS. Dzisiaj już wiem, że to niepotrzebne komplikowanie sprawy. Mało tego, kod jest mniej czytelny i trudniejszy w utrzymaniu. To z kolei powoduje, że na przykład czytniki ekranowe nie potrafią sobie poradzić z odczytaniem takiej strony. Ja osobiście zamierzam stosować się do omawianych wytycznych, choć pewnie pełne poznanie ich zajmie mi mnóstwo czasu. Ciebie też zachęcam do zapoznania  się z dokumentacją W3C.

No comments
Krzysztof NyrekStandard kodowania w HTML

Related Posts

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *