Aby podkreślić tekst w HTML, można wykorzystać zarówno znaczniki semantyczne, jak i stylowanie za pomocą CSS. Poniżej znajduje się kompletny poradnik wyjaśniający różne metody, ich zalety oraz szczegółowe przykłady zastosowań.
Podstawowe podkreślenie tekstu w html
Do podkreślenia tekstu w HTML możemy użyć znacznika <u>, który w przeglądarce domyślnie wyświetla tekst z podkreśleniem.
Przykład:
<u>Ten tekst jest podkreślony</u>Efekt w przeglądarce:
Ten tekst jest podkreślony
Znacznik <u> jest prosty w użyciu, jednak nie przekazuje żadnej specjalnej informacji semantycznej – jego zastosowanie ogranicza się właściwie jedynie do wizualnego podkreślania fragmentów tekstu.
Podkreślenie tekstu semantycznego: znacznik <ins>
HTML oferuje także znacznik <ins>, przeznaczony do oznaczania tekstu wstawionego (np. w historii zmian dokumentu). Efektem domyślnym w przeglądarce jest również podkreślenie tekstu, ale <ins> używamy, gdy chcemy przekazać, że dany fragment został dodany w wyniku edycji.
Przykład:
<p>Najnowsza wersja: <ins>dodano ten fragment tekstu</ins>.</p>Wynik:
Najnowsza wersja: dodano ten fragment tekstu.
Podkreślenie tekstu za pomocą css
Współczesne projekty stron internetowych coraz częściej korzystają z CSS do kontrolowania dekoracji tekstu. Pozwala to na większą elastyczność (np. tylko wybrane fragmenty tekstu, inne kolory linii, style faliste itp.).
Podstawową właściwością CSS służącą do podkreślenia tekstu jest text-decoration.
Przykład:
<p style="text-decoration: underline;">Tekst podkreślony CSS</p>Lub w oddzielnym arkuszu CSS:
.underline { text-decoration: underline; }I w HTML:
<p class="underline">Ten tekst będzie podkreślony za pomocą CSS</p>Dzięki CSS możesz dopasować kolor lub styl podkreślenia:
.underline-custom { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; }W HTML:
<p class="underline-custom">Podkreślenie faliste na czerwono</p>Przykłady zastosowań podkreślenia
Wyróżnianie fragmentów tekstu
Stosuj podkreślenie, aby zwrócić uwagę na istotne fragmenty wypowiedzi, np. w tekstach reklamowych lub informacyjnych.
<p><u>Oferta ważna tylko do końca miesiąca!</u></p>Podkreślanie błędów lub zmian
W edytorach online czy w recenzjach dokumentów:
<span style="text-decoration: underline wavy red;">błąd ortograficzny</span> <ins>nowy fragment tekstu</ins>Wyróżnianie linków (zalecenia wcag)
Linki są domyślnie podkreślone. Jeśli stylizujesz linki inaczej, rozważ dodatkowe podkreślenia, aby zachować czytelność i dostępność dla użytkowników o różnych potrzebach (np. daltonistów).
Zalecenia oraz dobre praktyki
- Używaj
<u>tylko dla ogólnego podkreślenia – gdy nie ma innego powodu semantycznego; - Znacznik
<ins>stosuj, gdy prezentujesz zmiany w dokumencie; - CSS zapewnia największą elastyczność – stosuj go, gdy chcesz dostosować styl (kolor, grubość, typ linii);
- Pamiętaj, że podkreślony tekst jest często kojarzony z linkami – upewnij się, by unikać nieporozumień dla użytkowników.
Najczęstsze błędy
- Nadużywanie
<u>zamiast lepszych semantycznie rozwiązań, - podkreślanie fragmentów, które nie są interaktywne, w taki sposób, że można je pomylić z linkami,
- brak wyróżnienia linków, jeśli usuwasz domyślne podkreślenia.
Stosując powyższe metody świadomie, możesz nie tylko podkreślić tekst, ale również zadbać o semantykę, użyteczność oraz czytelność swoich stron internetowych.
