<mark>
Wyróżnia fragment tekstu jak zakreślacz, bo jest istotny w bieżącym kontekście.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Wyniki wyszukiwania dla: <strong>pętla</strong></p>
<ul>
<li>Lekcja 7: <mark>Pętla</mark>, która liczy do dziesięciu</li>
<li>Jak przerwać <mark>pętlę</mark> we właściwym momencie?</li>
</ul>Definicja i zastosowanie
#Element <mark> działa jak zakreślacz: wyróżnia fragment, który jest istotny w danej sytuacji. Typowe przykłady to szukana fraza w wynikach wyszukiwania, fragment cytatu, na który autor chce zwrócić uwagę, albo zmieniona linia w przykładzie kodu. Domyślnie ma żółte tło i czarny tekst.
Różnica względem <strong> polega na tym, że <strong> oznacza treść ważną samą w sobie, a <mark> treść ważną teraz, na przykład dlatego, że użytkownik właśnie jej szukał.
Nie wszystkie czytniki ekranu informują o wyróżnieniu, więc nie przekazuj w ten sposób informacji niezbędnych do zrozumienia treści. Nie używaj też <mark> jako ozdobnika, bo tło dla samego wyglądu ustawisz w CSS.
Składnia
#<mark>wyróżniony fragment</mark>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<p>Z notatek mentora:</p>
<blockquote>
<p>Najpierw spraw, żeby kod działał. Potem <mark>spraw, żeby był czytelny</mark>. O szybkości pomyśl na końcu.</p>
</blockquote>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
mark {
background-color: yellow;
color: black;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wyróżniaj tylko to, co ma związek z bieżącym kontekstem. Stała ważność to zadanie dla
<strong>. - Przy własnym kolorze tła zadbaj o kontrast z tekstem, szczególnie w trybie ciemnym.
- Podświetlanie wyników wyszukiwania zwykle robi skrypt, który opakowuje każde trafienie w
<mark>.
Powiązane hasła
#- <strong>Tekst o dużym znaczeniu: ostrzeżenie, kluczowa informacja.
- <em>Akcent w zdaniu: słowo, które przy czytaniu na głos wymawia się z naciskiem.
- <b>Przyciąga uwagę do fragmentu tekstu bez nadawania mu większej wagi, np. do słów kluczowych.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- <blockquote>Dłuższy cytat z innego źródła, wyświetlany jako osobny blok z wcięciem.
Widzisz błąd albo brakuje przykładu? Napisz do nas.