Poznaj Programowanie

Tagi HTML: mark

Piotr Grochal 6 min. czytania

Cześć! Witaj na moim blogu poświęconym programowaniu w HTML, CSS i JavaScript. Dziś zanurzymy się w świat semantycznych tagów HTML5, a konkretnie przyjrzymy się tagowi <mark>.

To nie jest zwykły element do formatowania – to narzędzie, które niesie znaczenie, poprawia dostępność i pomaga w wyszukiwaniu. Jeśli szukasz sposobu na wyróżnienie fragmentów tekstu w kontekście wyszukiwania, cytatów czy podkreślenia ważnych informacji, ten wpis jest dla Ciebie. Zaczynamy!

Co to jest tag <mark> i do czego służy?

Tag <mark> służy do wyróżniania lub podświetlania fragmentu tekstu, zazwyczaj w kontekście wyszukiwania użytkownika albo wskazania istotnych części treści. Przeglądarki renderują go domyślnie z żółtym tłem, jak zakreślacz w książce.

To element semantyczny – nie tylko zmienia wygląd, ale komunikuje znaczenie strukturalne (pomaga czytnikom ekranu i wyszukiwarkom zrozumieć, że tekst jest istotny w kontekście).

W odróżnieniu od czysto wizualnych tagów jak <b> czy neutralnego semantycznie <span>, <mark> podkreśla kontekstową istotność treści (np. pasujące frazy w wynikach wyszukiwania).

Przykład podstawowy – oto kod:

<p>Znacznik &lt;mark&gt;mark&lt;/mark&gt; wyróżnia tekst.</p>

Wynik: Znacznik mark wyróżnia tekst (z żółtym tłem na „mark”). To działa od razu, bez dodatkowego CSS.

Historia i ewolucja tagu <mark>

<mark> pojawił się w HTML5 jako natywny sposób podświetlania tekstu. Wcześniej stosowano <span class="highlight"> lub inline CSS – bez semantyki. Dziś <mark> jest szeroko wspierany w nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge) – kompatybilność potwierdzisz na Can I Use.

Podstawowe przykłady użycia <mark>

Oto minimalny dokument HTML pokazujący <mark> w akcji:

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład tagu &lt;mark&gt;</title>
</head>
<body>
<h1>Wyszukaj w tekście</h1>
<p>Ten tekst zawiera słowo &lt;mark&gt;HTML&lt;/mark&gt;, które jest kluczowe dla programistów.</p>
<p>Inny przykład: &lt;mark&gt;Ważne ostrzeżenie&lt;/mark&gt; – nie zapomnij o semantyce!</p>
</body>
</html>

Efekt wizualny – słowa „HTML” i „Ważne ostrzeżenie” będą podświetlone na żółto. To idealne do symulacji wyników wyszukiwania na stronie.

Lista praktycznych zastosowań

Oto najczęstsze scenariusze użycia:

  • Wyniki wyszukiwania – podświetl pasujące frazy w wynikach (np. we własnym silniku wyszukiwania);
  • Cytaty i odniesienia – oznacz cytowane fragmenty w artykułach;
  • Podkreślenie błędów – w formularzach – podświetl niepoprawne pola;
  • Treści edukacyjne – w tutorialach wyróżnij kluczowe terminy;
  • Dostępność – czytniki ekranu (np. NVDA) sygnalizują „oznaczony tekst”, co pomaga niewidomym użytkownikom.

Stylizacja <mark> z CSS – wyjdź poza domyślny żółty!

Domyślnie to żółte tło (background-color: yellow), ale <mark> możesz w pełni wystylizować zgodnie z identyfikacją wizualną projektu.

1. Proste, własne podświetlenie

Dodaj ten styl, aby uzyskać czytelne, miękkie podświetlenie:

mark {
background-color: #ffeb3b;
padding: 2px 4px;
border-radius: 3px;
color: #000;
}

Efekt: zaokrąglone, neonowo-żółte podświetlenie z niewielkim paddingiem – czytelne na jasnym tle.

2. Responsywny styl z animacją

Użyj gradientu i efektu hover, by podnieść atrakcyjność interakcji:

mark {
background: linear-gradient(120deg, #ffd700, #ffed4e);
padding: 0.2em 0.4em;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
mark:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

Użycie w HTML:

<p>Kliknij na &lt;mark&gt;podświetlony&lt;/mark&gt; tekst!</p>

Efekt: gradientowe tło z subtelnym powiększeniem po najechaniu – świetne dla interaktywnych sekcji.

3. Ciemny motyw (tryb ciemny)

Wspieraj preferencje systemowe użytkownika dzięki media query:

@media (prefers-color-scheme: dark) {
mark {
background-color: #ff6b35;
color: #fff;
}
}

Efekt: kontrastowe, czytelne podświetlenie w trybie ciemnym bez nadmiernej jaskrawości.

4. Integracja z JavaScript – dynamiczne podświetlenie

Skorzystaj z JS, aby podświetlać frazy wpisane przez użytkownika w czasie rzeczywistym:

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<title>Dynamiczny mark</title>
<style>
mark { background: #ffeb3b; padding: 2px 5px; border-radius: 3px; }
</style>
</head>
<body>
<input type="text" id="search" placeholder="Wpisz frazę do wyszukania...">
<p id="tekst">HTML to język znaczników. Używaj tagów semantycznych jak mark do wyróżniania.</p>
<script>
document.getElementById('search').addEventListener('input', function(e) {
const tekst = document.getElementById('tekst');
tekst.innerHTML = tekst.textContent.replace(
new RegExp(e.target.value, 'gi'),
match => `<mark>${match}</mark>`
);
});
</script>
</body>
</html>

Jak działa: wpisz „HTML” lub „mark” – fraza zostanie dynamicznie podświetlona w akapicie.

Najlepsze praktyki i pułapki

Zanim użyjesz <mark>, pamiętaj o tych wskazówkach:

  • Semantyka ponad wizualizacją – stosuj <mark> tam, gdzie tekst jest kontekstowo ważny (do czysto dekoracyjnego efektu użyj <span>);
  • Dostępność (a11y) – ustaw lang="pl-PL" w <html>, by wspierać polskie czytniki ekranu;
  • SEO – wyszukiwarki lepiej rozumieją semantykę; trafnie podświetlone frazy mogą podnieść CTR w wynikach;
  • Unikaj nadużywania – nie oznaczaj całych akapitów, a jedynie kluczowe fragmenty;
  • Testuj w przeglądarkach – domyślny wygląd bywa różny (np. Safari ma delikatniejsze tło);
  • Alternatywy – dla inline styli użyj <span>; dla innych efektów rozważ komponenty UI zamiast niestandardowych tagów jak <highlight> (niestandardowy, eksperymentalny).

Tabela porównawcza tagów wyróżniających:

Tag Semantyka Domyślny styl Użycie główne
<mark> Podświetlenie wyszukiwania Żółte tło Wyniki wyszukiwania
<strong> Ważność treści Pogrubienie Kluczowe informacje
<em> Podkreślenie emocjonalne Kursywa Intonacja
<b> Tylko wizualne pogrubienie Pogrubienie Dekoracja (stosuj rozważnie)
<span> Brak semantyki Brak Custom CSS/JS

Zaawansowane przykłady w kontekście pełnej strony

Wyobraź sobie stronę z wyszukiwarką artykułów. Oto fragment łączący <mark> z semantycznym HTML:

<article>
<h2>&lt;mark&gt;Tagi HTML5&lt;/mark&gt; – rewolucja semantyki</h2>
<p>Elementy jak &lt;mark&gt;mark&lt;/mark&gt;, &lt;mark&gt;article&lt;/mark&gt; i &lt;mark&gt;section&lt;/mark&gt; poprawiają strukturę.</p>
</article>

Wskazówka: połącz to z Flexboxem lub CSS Grid, aby uzyskać responsywny układ i spójne wyróżnienia w całym interfejsie.