Znacznik <mark> w HTML służy do wyróżniania fragmentów tekstu poprzez podświetlenie, zazwyczaj w kolorze żółtym. Jest to element semantyczny, czyli niosący znaczenie – wskazuje, że tekst objęty tym znacznikiem ma być uznawany za szczególnie ważny w określonym kontekście, np. jako wynik wyszukiwania czy element wymagający uwagi użytkownika.
Charakterystyka znacznika <mark>
- Wygląd domyślny – tekst objęty
<mark>jest domyślnie podświetlony — najczęściej żółtym tłem, zależnie od przeglądarki i stylów CSS. To wizualne wyróżnienie działa analogicznie do markera na papierze; - Semantyka –
<mark>nie służy do stałego dekorowania tekstu (np. podkreślania tytułów), lecz do tymczasowego lub kontekstowego wskazania ważności — najczęściej fragmentów odnalezionych w wynikach wyszukiwania lub uwag autora; - Bez wpływu na SEO – użycie
<mark>nie wpływa na pozycjonowanie strony, ale pomaga użytkownikom szybciej znaleźć istotne informacje lub zrozumieć kontekst.
Składnia i użycie
Podstawowa składnia:
<mark>Podświetlony tekst</mark> Przykład zastosowania w kontekście wyniku wyszukiwania:
<p>Twoje zapytanie: <mark>HTML</mark> zostało znalezione w dokumencie.</p> W efekcie tekst „HTML” będzie wyróżniony na tle reszty zdania.
Przykłady zastosowań
Podświetlanie wyników wyszukiwania
Najpopularniejsze wykorzystanie <mark> to oznaczanie fragmentów tekstu odpowiadających zapytaniu użytkownika:
<p>W artykule znalazły się następujące słowa kluczowe: <mark>znacznik</mark>, <mark>HTML</mark>, <mark>SEO</mark>.</p> Zwracanie uwagi na istotną informację
Można go użyć do zwrócenia uwagi na informacje wymagające szczególnej uwagi, np.:
<p>Pamiętaj, aby <mark>nie udostępniać</mark> swoich haseł osobom trzecim.</p> Akcentowanie zmian lub nowości
Przydatny przy wyróżnieniu nowych lub istotnych zmian w dokumentacji:
<p>Dodano nową opcję: <mark>tryb ciemny</mark>.</p> Wyróżnienie w długich tekstach
Gdy fragment tekstu ma być łatwo znaleziony przez czytającego:
<p>Użytkownik zgłosił problem: <mark>Nie działa rejestracja nowych kont</mark>.</p> Stylowanie <mark> za pomocą CSS
Wygląd <mark> można łatwo zmienić z pomocą CSS, jeśli domyślne podświetlenie nie pasuje do stylu strony. Przykład:
mark { background-color: orange; color: black; padding: 0 4px; border-radius: 2px; } Dzięki temu tekst wyróżniony będzie miał inne tło, kolor tekstu czy nawet zaokrąglone narożniki.
Kiedy używać <mark>, a kiedy innych znaczników?
Do stałego wyróżniania, np. nagłówków lub ważnych definicji, lepiej wykorzystać inne znaczniki semantyczne:
<strong>– do podkreślania wagi informacji,<em>– do zaznaczania nacisku (tonu wypowiedzi),<span>– do stylowania dowolnego tekstu bez semantyki.
<mark> jest przeznaczony wyłącznie do podkreślania istotnych fragmentów w określonym kontekście, zwykle tymczasowo.
Podsumowanie
Znacznik <mark> w HTML umożliwia semantyczne podświetlenie tekstu w celu zwrócenia uwagi na jego fragmenty, najczęściej jako wynik wyszukiwania, elementy wymagające uwagi lub istotne zmiany. Jest prosty w użyciu i bardzo przydatny w poprawianiu czytelności oraz użyteczności stron internetowych dla użytkowników.
