Elementy tekstowe: akapity, listy i wyróżnienia

Tekst stanowi większą część internetu, dlatego jego poprawne oznaczanie ma największe znaczenie. Właściwe elementy tekstowe sprawiają, że treść jest czytelna dla wszystkich, także dla użytkowników czytników ekranu.

Umieszczaj każdy blok tekstu w tagu p. Grupuje on zdania w prawdziwy akapit, który technologie asystujące mogą przeglądać fragment po fragmencie.

Unikaj układania pustych divów lub tagów br w celu rozdzielania tekstu. Używaj prawdziwych akapitów i pozwól, aby odstępy obsługiwał CSS. Struktura powinna wynikać z tagu, a nie ze stylu.

Gdy elementy należą do siebie, użyj prawdziwej listy. Czytniki ekranu ogłaszają liczbę elementów, na przykład „lista trzech elementów”, zapewniając użytkownikom natychmiastowy kontekst.

Używaj ul, gdy kolejność nie ma znaczenia, oraz ol, gdy ma znaczenie, na przykład w przypadku kroków. Każdy element powinien znajdować się w li, nigdy w luźnym divie.

Tag em oznacza słowa, na które położyliby Państwo nacisk podczas mówienia. Czytniki ekranu mogą zmienić ton, więc emfaza jest rzeczywiście słyszana, a nie tylko widoczna.

Tag strong oznacza tekst o dużym znaczeniu, na przykład ostrzeżenie. To znaczenie, a nie tylko pogrubienie, więc informacja jest przekazywana technologiom asystującym.

Tagi b i i zmieniają tylko wygląd, nie dodając znaczenia. Sięgaj po em i strong, gdy nacisk lub ważność rzeczywiście mają znaczenie.

Używaj blockquote dla cytowanego bloku, a q dla krótkiego cytatu w tekście. Semantyka informuje użytkowników, że słowa pochodzą z innego źródła.

Umieszczaj kod w tekście w code, a skrócone wyrazy zapisuj za pomocą abbr. Te niewielkie tagi dodają precyzyjne znaczenie, które widzący czytelnicy wywnioskowują z kontekstu.

Zasada dotycząca tekstu jest prosta: wybierz tag ze względu na jego znaczenie, a następnie dowolnie go stylizuj. Wygląd zapewnia CSS, a strukturę HTML.

Używaj p dla tekstu ciągłego, ul i ol dla list, a em i strong dla rzeczywistej emfazy. Wybieraj tagi ze względu na znaczenie, a wygląd pozostaw CSS. 🎉