Pod pojęciem „front-end” może się kryć bardzo wiele. Zakresy obowiązków front-end developerów są różne w różnych firmach (szerzej pisałam o tym tutaj) i zdarzyć się może, że programista zmieniając pracę lub projekt z pozycji regulara wraca do pozycji juniora, właśnie ze względu na nieznajomość technologii. Jednak pewne technologie są w front-endowym światku na tyle powszechne, że ich naukę można polecić każdemu. Takim przypadkiem jest bez wątpienia język HTML.
Co to jest HTML?
Sama nazwa HTML to akronim (skrótowiec), czyli słowo powstałe w wyniku skrócenia dwóch lub więcej słów. Zatem HTML to skrót do HyperText Markup Language, a poszczególne wyrażenia w skrótowcu oznaczają:
- HyperText
Hipertekst oznacza sposób organizacji leksji, czyli spójnych i autonomicznych jednostek tekstu (i obrazu). Układ hipertekstu jest nielinearny i niestrukturalny, użytkownik ma całkowitą dowolność nawigowania pomiędzy leksjami za pomocą hiperłączy (odsyłaczy) 1.
Choć analogia do łączy w dokumentach elektronicznych jest naturalna, to hipertekstową budowę dokumentu spotyka się również w innych miejscach. Jednym z najbardziej popularnych przykładów jest „Gra w klasy” Julio Cortázara. Konstrukcja tej powieści zakłada różne możliwości czytania: standardowo od początku do końca, ale i w sposób alternatywny wskazany przez autora, który jednak może być przyczynkiem do własnych poszukiwań. - Markup Language
Język znaczników to odpowiedni format dokumentu, który poza treścią zawiera informacje opisowe wyrażone za pomocą znaczników. Istnieje kilka klas języków znaczników (prezentacyjne, proceduralne i opisowe), a poszczególne odmiany mogą być obecne w obrębie jednego języka.
A zatem HTML to hipertekstowy język znaczników, służący do opisu struktury dokumentu za pomocą semantycznych tagów. Dokument HTML po uprzednim parsowaniu może zostać wyświetlony w przeglądarce internetowej, ale nie tylko. Odczytywaniem struktury strony internetowej zajmują się również np. czytniki ekranowe, czyli programy asystujące wykorzystywane m.in. przez osoby niewidome i niedowidzące.
Semantyka to słowo klucz w przypadku HTML, więc temu zagadnieniu zostanie poświęcony cały następny wpis.
Podwójne standardy HTML
Chcąc dowiedzieć się, w jaki sposób prawidłowo wykorzystywać dobrodziejstwa konkretnej technologii, najprościej zerknąć do jej dokumentacji. W przypadku HTML sprawa nie jest jednak tak oczywista: istnieją bowiem dwa funkcjonujące obok siebie standardy (choć w ubiegłym roku rozpoczęły się prace nad wspólną konwencją).
Pierwszy z nich to HTML Living Standard tworzony przez WHATWG (The Web Hypertext Application Technology Working Group), czyli organizację zrzeszającą twórców przeglądarek internetowych (nie wszystkich) i obejmuje to, co zostało w tych przeglądarkach zaimplementowane 2. Nad drugim standardem pieczę stanowi W3C (World Wide Web Consortium) – stowarzyszenie określające standardy dla stron WWW, założone przez twórcę pierwszej przeglądarki internetowej 3.
Na przełomie lat pomiędzy wytycznymi pojawiały się mniej lub bardziej znaczące różnice, dotyczące między innymi dostępności stron internetowych. Jednak w ostatnim czasie organizacje zbliżyły się do konsensusu i rozpoczęły proces wypracowywania wspólnych rozwiązań 4.
Czy HTML to język programowania?
Istnieje kilka sposobów definiowania języków programowania (np. ze względu na funkcję, przeznaczenie czy konstrukcje składniowe), jednak co do zasady języki, w których nie da się realizować obliczeń, nie są uznawane za języki programowania. Takim przypadkiem jest między innymi właśnie HTML.
Elementy HTML
Strona internetowa może składać się z wielu różnych elementów 5, niczym zbudowana z klocków budowla. Każdy klocek ma odpowiednią strukturę: większość z nich składa się tagu otwierającego, tagu zamykającego oraz zawartości. Tag otwierający zawiera nazwę tagu zamkniętą w trójkątnych nawiasach i od tagu zamykającego różni się brakiem slasha (/) przed nazwą tagu:
<div>Przykładowy element</div>Elementy mogą również zawierać atrybuty, takie jak np. unikalny identyfikator id czy identyfikator class, który może posłużyć do nadania stylów CSS:
<div class="greenBackground">Kolejny element</div>Zdarzają się elementy, które nie mają zawartości oraz tagu zamykającego (elementy puste), np. element służący do osadzania obrazków:
<img src="images/dog.png" alt="dog">Poszczególne elementy HTML można osadzać wewnątrz innych (zagnieżdżanie elementów). Nie można jednak krzyżować elementów ze sobą, czyli zamykać elementu zewnętrznego przed zamknięciem elementu wewnętrznego.
<p>Ten tekst jest
<strong>bardzo ważny.</strong>
</p><p>Ten tekst jest<strong>bardzo ważny.</p> </strong>
Struktura dokumentu HTML
Żeby dokument HTML mógł zostać poprawnie wyświetlony przez przeglądarkę, musi składać się z określonych elementów. Przykładowy plik .html może prezentować się następująco:
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"><title>Tytuł strony</title> </head> <body> <h1>Nagłówek</h1> <p>Paragraf</p> </body> </html>
- doctype – to preambuła HTML wymagana z powodu kompatybilności wstecz; jeżeli pominiemy doctype przeglądarka może wyrenderować stronę w innym trybie, niekompatybilnym z pewnymi specyfikacjami 6 7
- html – obejmuje całą zawartość strony (root element), powinien również zawierać informację o wersji językowej dokumentu poprzez atrybut lang 8
- head – nagłówek strony, zawiera metadane dotyczące dokumentu, może obejmować kaskadowe arkusze stylów czy kod JavaScript
- meta charset – element ustawiający zestaw znaków, który ma zostać użyty do wyświetlenia strony
- title – tytuł strony pokazujący się na belce karty w przeglądarce oraz w wyszukiwarkach
- body – to zawartość strony, która ma zostać wyświetlona w oknie przeglądarki
- h1 – główny nagłówek strony, który w przeciwieństwie do innych nagłówków (h2, h3, etc.) powinien pojawić się na stronie tylko jeden raz
Co z tym HTML w 2020 roku?
W kilku miejscach internetu zdarzyło mi się trafić na szałową wieść, że solidne ogarnięcie języka HTML w czasach Reacta i Angulara nie ma sensu. Zupełnie nie rozumiem tych postulatów, chociażby z tej prostej przyczyny, że frameworki JavaScript również korzystają z HTML. W przypadku React często jest to składnia JSX, ale nadal oparta o HTML.
Dodatkowo front-endowa lista przebojów zmienia swoje notowania dość szybko (choć i tak ostatnimi czasy się stabilizuje) i może się okazać, że za niedługi czas nastąpi odwrót od frameworków na korzyść HTML w czystej formie.