Pisanie kodu HTML może na pierwszy rzut oka wydawać się kwestią niewartą uwagi. Ot, kilka divów, tabelka i nagłówek. Jednak konstrukcja szkieletu strony może sprawiać trudności, szczególnie jeżeli chce się to zadanie wykonać zgodnie ze specyfikacją języka. Dzisiaj piszę o tym, po co zawracać sobie głowę prawidłowym użyciem oraz podaję kilka przykładów z życia i z dokumentacji zaczerpniętych.
Co to znaczy „semantyczny„?
Tradycyjnie zacznę od definicji. Przymiotnik „semantyczny” wywodzi się od rzeczownika „semantyka„, który oznacza:
- Dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów.
- Dział semiotyki zajmujący się badaniem związków, jakie zachodzą między wyrażeniami języka a przedmiotami, do których się one odnoszą 1.
W kontekście HTML bardziej interesująca jest „semantyka” definiowana w drugi sposób. Zatem „semantyczny” oznacza po prostu… „znaczeniowy” 2.
Semantyczny HTML
To, że HTML jest językiem semantycznych znaczników wynika z jego dokumentacji. W specyfikacji HTML LS możemy przeczytać:
„Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.” 3
Powyższe w telegraficznym skrócie oznacza, że znaczniki HTML i ich atrybuty są tak zaprojektowane, aby niosły za sobą znaczenie semantyczne. Dla przekładu: element <ol> otwiera uporządkowaną listę, a element <lang> oznacza język używany na stronie.
Podstawowe znaczniki HTML
Skoro wiadomo już, że znaczniki niosą za sobą znaczenie (w większości przypadków), to sprawdźmy jakie tagi do wyboru oferuje HTML. Od razu powiem, że jest ich tak dużo, że nie sposób wymienić wszystkich, dlatego też od razu odsyłam do dokumentacji, która znajduje się tutaj. Poniżej omówię jedynie te, z których korzystam najczęściej.
Elementy HTML można podzielić na elementy blokowe oraz elementy linowe. Elementy blokowe są wyświetlane w nowej linii i zajmują całą jej szerokość, co sprawia, że kolejne elementy wyświetlane będą również w nowej linii, pod spodem elementu blokowego. Natomiast elementy liniowe w żaden sposób nie zaburzają organizacji innych elementów, a szerokość miejsca potrzebnego na element liniowy równa się szerokości treści elementu.
- <p> akapit
Akapit, czyli paragraph to blok tekstu oddzielony pionowo marginesami od innych bloków. Może być używany jako element potomny np. w artykule <article> czy sekcji <section>. Jako że sam nie bardzo określa treść, którą zawiera, warto zastąpić go innym znacznikiem, jeżeli istnieje taka możliwość, np. podając datę publikacji treści na blogu<p>2020-01-20 09:00:00</p>zamienić na<time>2020-01-20 09:00:00</time>. - <h1>, <h2>, …, <h6> nagłówki
Tak jak tutaj na blogu, tak na każdej stronie można ułożyć strukturę nagłówków. Jeżeli do strony nie zostaną dodane zewnętrzne style, to przeglądarki i tak będą różnicować zwykły tekst od nagłówka, nagłówek pierwszego stopnia od nagłówka drugiego stopnia, itd. i będą je wyświetlać np. innym rozmiarem fontu czy pogrubieniem.
Co istotne, nagłówki powinny odnosić się do tego, na ile dany nagłówek jest ważny, czyli np. niedopuszczalne jest, aby użyć znacznika <h3> tylko po to, żeby wyświetlić tekst w nim zawarty jako wytłuszczony. Więcej o nagłówkach piszę niżej. - <a> linki
Hiperłącza, czyli anchor to wrota do innych wirtualnych miejsc. W atrybucie [href] należy umieścić adres docelowy i voilà! Warto pochylić się również nad atrybutem [target], który daje między innymi możliwość wymuszenia na przeglądarce otwieranie łącza w nowej karcie. Element <a> jest elementem liniowym. - <ol> i <ul> listy uporządkowane i nieuporządkowane
Oredered list oraz unordered list to dwa sposoby organizacji treści poprzez jej wylistowanie. Lista uporządkowana prezentuje swoje elementy potomne w formie ponumerowanej, natomiast lista nieuporządkowana wyświetla punkty. Znaczniki wewnętrzne, jakie musi zawierać każda lista to <li> czyli element listy: list item (thank you Captain Obvious). - <img> obrazki
Obrazki są najczęściej osadzane za pomocą znacznika <img>, do którego konieczne jest podanie wartości atrybutu [src] czyli źródło (source) ze ścieżką do pliku graficznego. Istotnym atrybutem jest również [alt], czyli tekst, który zostaje wyświetlony w przypadku niezaładowania się obrazka oraz odczytywany przez czytniki ekranowe. - <nav> nawigacja
Element zawierający linki służące do nawigowania między treściami na stronie (lub poza nią), zaprezentowanymi w formie listy. - <header> nagłówek
Element nagłówka często zawiera znacznik z nagłówkiem określonego stopnia <h1> – <h6>, ale niekoniecznie. Może zostać użyty do opakowania spisu treści sekcji, formularza lub logo. - <footer> stopka
Stopka może zostać zastosowana jako element kończący cały dokument HTML, jednak może go również posiadać każda z sekcji czy artykułów. - <div> element blokowy
To ogólny kontener na treści, który nie ma wpływu na wyświetlanie zawartości (dopóki nie zostaną mu nadane style). Jeżeli można, należy zastąpić go innym, niosącym znaczenie znacznikiem. - <span> element liniowy
Podobnie jak <div>, tak i <span> to pojemnik na treści niemający wpływu na sposób ich wyświetlania, z tą różnicą, że span jest elementem liniowym. Może być jednak przydatny, np. w celu nadania stylów. - <!– KOMENTARZ –> komentarze w kodzie
Komentarze to część niewidoczna dla odwiedzającego stronę (dopóki nie otworzy źródła strony), jednak przydatny element dla innych osób, które będą zainteresowane kodem źródłowym.
Znacznik ma znaczenie
Jak wynika z powyższego akapitu – to, których znaczników użyjemy – ma znaczenie. Na podstawowym poziomie oznacza to, że jeżeli chcę wstawić na swoją stronę artykuł (np. treść wpisu na blogu) to zamiast znacznika <div>, który nie niesie za sobą specjalnego znaczenia, zastosuję znacznik <article>.
Element <div> jest przez autorów specyfikacji HTML opisywany jako znacznik, z którego powinno się korzystać w ostateczności 4, wtedy kiedy nie można użyć innego znacznika, niosącego za sobą znaczenie, jak np. <nav> do elementów nawigacji czy <section> do sekcji na stronie. Podobnie element <span> sam w sobie nic nie znaczy, opakowuje jedynie jakąś treść lub elementy potomne.
Zdarza się, że elementy posiadają pewne ograniczenia, np. limitujące ilość jego wystąpień w strukturze dokumentu do jednego. Przykładem takich znaczników jest <main>, czyli tag wskazujący główną treść strony, który na stronie może zostać użyty tylko raz 5. Podobnie rzecz się ma z nagłówkiem najwyższego stopnia, czyli <h1>, jednak tutaj sytuacja jest dość zawikłana, więc niżej poświęcam nagłówkom osobny akapit.
Obraz wart tysiąca słów
Użycie odpowiednich znaczników to dopiero początek. Okazuje się, że te odpowiednie znaczniki należy czasem opakować w inne odpowiednie znaczniki. Takim przypadkiem jest sytuacja, w której w strukturze dokumentu znajduje się ilustracja (obrazek, który coś znaczy i pełni więcej niż rolę estetyczną). Znacznik <img> należałoby bowiem otoczyć elementem <figure>, w którym może zostać zawarty również <figcaption> z opisem ilustracji 6. W tym wypadku struktura fragmentu odpowiedzialnego za wyświetlenie obrazka wyglądałaby następująco:
<figure><img src="obrazek.png" alt="Opis obrazka"><figcaption>Szczegółowy opis obrazka</figcaption></figure>
Może się wydawać, że w taki przypadku użycie [alt] i <figcaption> jednocześnie będzie pewną nadmiarowością. Jeżeli treści miałyby się powielać, to atrybut [alt] może pozostać pusty.
Nagłówki
Nagłówki mogą stanowić pewne wyzwanie dla twórców stron. Na przestrzeni lat istniało kilka interpretacji prawidłowego umieszczania ich w HTML, jednak ostatecznie i oficjalnie obowiązuje jedyna słuszna dyrektywa. Mówi ona, że nagłówki stopniowane są od <h1> do <h6>, gdzie <h1> to główny nagłówek witryny i może wystąpić na stronie tylko jeden jedyny raz, zaś każdy kolejny jest znaczeniowo mniej istotny od nagłówka stopnia wyższego. Nagłówki stopniowane są kolejno, zatem po <h3> musi nastąpić <h4>, a nie nie np. <h6> czy <h2>.
Najprościej wyobrazić sobie strukturę nagłówków w postaci spisu treści, gdzie nagłówki <h3> są podrozdziałami dla <h2> itd. Dobrze też pamiętać o tym, że każdy artykuł czy sekcja powinny mieć swój nagłówek. Więcej o jednym z podejść do implementowania nagłówków na stronie można przeczytać tutaj.
Po co to wszystko?
Mogłabym wymieniać zasady dotyczące każdego z elementów w nieskończoność, bo w zasadzie pisanie semantycznego kodu HTML sprowadza się do używania go zgodnie ze specyfikacją. Tylko tyle i aż tyle. Sama mam przed sobą jeszcze długą drogę wypełnioną nauką HTML, choć jeszcze niedawno wydawało mi się, że uczyć to ja się będę jedynie zawiłości JavaScript. Pytanie o zasadność prawidłowego wykorzystania HTML nasuwa się samo. Zatem: dlaczego?
- pozycjonowanie
Roboty indeksujące, które służą do zbierania informacji o witrynach zwracają uwagę na semantykę strony. Poza tym co zostało opisane powyżej można dodać do strony również dodatkowe metadane semantyczne aby pozytywnie wpłynąć na prawidłowe pozycjonowanie 7. Jak wiadomo, im wyższa pozycja w wynikach wyszukiwania, tym więcej odwiedzin notuje strona. - dostępność
Semantyczny HTML jest szalenie ważny dla osób, które korzystają z czytników ekranowych. Czytniki to programy, który odczytują na głos elementy strony oraz pozwalają nawigować na pomocą klawiatury pomiędzy konkretnymi elementami strony. Czytniki swoją wiedzę na temat zawartości strony czerpią właśnie z użytych w jej strukturze znaczników. Jeżeli zatem podział na artykuły czy struktura nagłówków zostanie opisana nieprawidłowo, to osoba korzystająca z czytnika nie będzie mogła przejść do pożądanego miejsca na stronie.
Warto zwrócić uwagę, że coraz więcej osób korzysta z technologii asystujących, wobec czego zaniedbując poprawne wykorzystanie semantyki HTML, możemy w znaczący sposób ograniczyć ilość osób, do których dotrą nasze treści 8.
Jak widać, poprawne pisanie popłaca. Warto zatem pochylić się nad zagadnieniem semantycznego HTML. Dla osób, które znają już podstawy HTML i chcą poćwiczyć w praktyce, serdecznie polecam cały tutorial autorstwa Comandeera. Materiał jest stale aktualizowany, a link znajduje się tutaj.