Czy powinno się używać tagów HTML w celach stylistycznych?

Daj sobie minutę, aby spojrzeć na poniższą tabelkę. Daj sobie 2 minuty, aby ją zrozumieć. Zapraszam ciebie do krótkiej dyskusji na temat stylowania za pomocą HTMLa.

Tak więc dyskutujmy.

Zadam ci pytanie: Czy powinno się używać tagów HTML w celach stylistycznych?

Odpowiesz zapewne: „Skoro zadajesz takie pytanie – najprawdopodobniej odpowiedź brzmi nie„. Masz rację.

Zalecane jest, aby zmieniać wygląd elementów za pomocą znaczników semantycznych albo stylów CSS. Zgodnie z poniższą tabelką.

Znów zgaduję twoją odpowiedź: „Hej, powoli! Czym są znaczniki semantyczne i dlaczego są takie fajne? I w czym style CSS są lepsze od HTMLa!?”

Po kolei.

Znaczniki semantyczne

Uczmy się na przykładach.

<b> vs <strong>

Oba tagi <b> oraz <strong> pogrubiają tekst. Jednak <b> jest znacznikiem niesemantycznym (formatującym), który tylko zmienia wygląd tekstu. Z kolei <strong> to znacznik semantyczny, który zarówno zmienia wygląd, jak i niesie ze sobą informację o znaczeniu, charakterze tekstu. Obejmuje on istotną, ważną treść, która nie powinna zostać przeoczona przez użytkownika. Dokumentacja mówi o tym, że tekst wewnątrz <strong> cechuje się wysokim poziomem ważności, powagi lub pilności (importance, seriousness, urgency). Czyli kolejno – jest istotny w kontekście otaczającego go tekstu, jest powiadomieniem lub powinien po prostu zostać przeczytany w pierwszej kolejności.

<i> vs <em>

Inną parą tagów o podobnym działaniu stylistycznym jest <i> oraz <em> – oba powodują pochylenie tekstu, który zawierają. Tutaj tagiem semantycznym jest <em>, który określa emfazę, kładzie szczególny nacisk na treść. Zastosowanie tego znacznika może zmieniać znaczenie całej wypowiedzi. Ze świetnym przykładem emfazy przychodzi oczywiście dokumentacja. Najpierw spójrzmy na zwykłe zdanie bez żadnego nacisku:

<p>Cats are mean animals.</p> 

Kładąc nacisk na pierwsze słowo, zaznaczamy, że to koty akurat są wredne, a nie np. psy, czy myszoskoczki.

<p><em>Cats</em> are mean animals.</p>

Poniżej – koty są paskudne, bez dyskusji, koniec kropka.

<p>Cats <em>are</em> mean animals.</p>

<p>Cats are <em>mean</em> animals.</p>

Poniżej emfaza na słowie animals – owszem, w świetle dzisiejszej nauki koty są zwierzętami. Aczkolwiek polemizowałabym. Może kiedy indziej.

<p>Cats are mean <em>animals</em>.</p>

Wniosek

Korzystanie ze znaczników semantycznych jest arcyistotne z punktu widzenia dostępności. Oczywiste jest, że osoby niewidome nie widzą pogrubienia tekstu, kursywy, koloru – muszą polegać na różnych narzędziach odczytujących strony internetowe. I właśnie dzięki znacznikom semantycznym owe narzędzia wiedzą, jak przedstawić witrynę w sposób użyteczny, ale też przyjazny dla użytkownika. Czytnik nie rozpozna znacznika <b> ani <i>. Z kolei odpowiednio zaakcentuje (lub nie, w zależności od języka…) treść wewnątrz <strong> oraz <em>.

Wróćmy do naszej dyskusji. Stanęliśmy na „zalecane jest, aby zmieniać wygląd elementów za pomocą znaczników semantycznych albo stylów CSS.” Omówiliśmy już znaczniki semantyczne. Czas na wyjaśnienie wyższości stylów CSS nad znacznikami niesemantycznymi.

Tagi HTML vs style CSS

WCAG w swoich wskazówkach zaznacza istotę oddzielenia warstwy informacyjnej od prezentacyjnej. Tagi HTML, których działanie jest wyłącznie stylistyczne – nie są mile widziane na stronie. Estetyczne zmiany wyglądu powinny być ograniczone do CSS.

Pewnie spojrzysz jeszcze raz na powyższą tabelkę i powiesz: „Ta zasada wydaje się być jasna w przypadku podkreślenia, które często jest wyłącznie wizualną zmianą. A co z przekreśleniem? Przecież jeśli już chcemy coś przekreślić – niesie to istotną wartość dla użytkownika, a nie jest jedynie wizualnym widzimisiem. Podobnie sprawa ma się dla znaczników <del>, <ins>, <mark>…”

Zacznijmy od tego, że niektóre narzędzia, przeglądarki wspierają znaczniki <s>, <del>, <ins>, <mark>. Niektóre. Bezpieczniej jest podążać za zasadą niż liczyć na kompetencje losowego narzędzia, które zmierzy się z naszym systemem.

Tak, masz rację – w przypadku widzimisię korzystaj z CSSa. A w przypadku, kiedy twoje przekreślenia, zaznaczenia niosą ze sobą ważną intencję – skorzystaj z poniższej sztuczki (źródło). W przykładzie zastosowana dla tagu <s>, jednak równie dobrze możesz ją użyć dla znaczników <del>, <ins>, <mark>.

s::before, 
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
s::before {
  content: " [start of stricken text] ";
}
s::after {
  content: " [end of stricken text] ";
}

Koniec na dziś. Miało być krótko, wyszło jak zwykle. Mam jednak nadzieję, że wyciągniesz z tego artykułu coś dla siebie. A kiedyś, w wirze pracy, niespodziewanie przypomnisz sobie o tych paskudnych kotach i wymienisz <i> na <em>.

P.S. Tak – delikatnie zmieniłam ten przykład z dokumentacji. Otóż nie będę szerzyć na swoim blogu kociej propagandy. Przecież powszechnie wiadomo, że koty to samolubne, aroganckie istoty, które przychodzą się połasić tylko wtedy, kiedy są głodne. Tudzież coś je swędzi.