Html Highlight Text Highlight text with HTML mark tag

<p> <mark>Highlight</mark> text with HTML &lt;mark&gt; tag</p>

Domyślnie <mark> styling

Domyślny kolor tła <mark> to żółty.

<p> <mark>Default Yellow Highlight</mark></p>

Wyjście

Stylizacja niestandardowa <mark> za pomocą CSS

Oczywiście, jak każdy tekstowy znacznik HTML, możesz zastosować niestandardową stylizację za pomocą CSS. Możesz myśleć o tym podobnie jak o stylizacji znacznika <p>.

mark { background: red; color: white;}

Wyjście

<mark> vs Other Text HTML Tags

strong

<strong> jest używany do wskazania tekstu, który ma silniejsze znaczenie niż otaczający go tekst, np. ostrzeżenie lub błąd. Semantycznie, jego znaczenie. Występuje jako pogrubiony

b

<b> jest bardzo podobny do <strong>, ponieważ również występuje jako pogrubiony. Jednak w przeciwieństwie do niego, nie przekazuje on tak naprawdę żadnego znaczenia i jest to bardziej rzecz stylistyczna niż semantyczna.

em

<em> Jest używany do podkreślenia akcentu na konkretne słowo. Występuje jako kursywa

mark

<mark> jedynie podkreśla istotność danego fragmentu tekstu. Przed pojawieniem się tego znacznika, wiele osób używało em lub strong aby nadać wyróżnionej treści jakieś znaczenie semantyczne. Cóż, koniec z tym! Jeśli potrzebujesz podświetlenia, użyj tego tagu 🌟

Dlaczego semantyczny tag HTML jest ważny

Powodem, dla którego nie używasz po prostu tagów <div> wszędzie, jest to, że nie są one semantyczne. Możesz być jak ja, kiedy po raz pierwszy zacząłem uczyć się programowania – kto dba o bycie semantycznie poprawnym 🙄. Błąd ❌. W rzeczywistości wyszukiwarki, takie jak Google, dbają! Ponieważ semantyka przekazuje znaczenie o Twojej stronie. Kiedy roboty wyszukiwarek przeszukują Twoją stronę, wiedzą, o co chodzi. Innymi słowy, ding ding ding na twoim SEO lub optymalizacji pod kątem wyszukiwarek 🏆

Innym powodem, dla którego warto być semantycznie poprawnym, jest dostępność. Wiele narzędzi dostępności opiera się na semantyce znaczników, aby przekształcić witrynę w znaczenie dla ludzkiego użytkownika korzystającego z niej (np. czytniki ekranu). Oto analogia. Pamiętasz czasy, kiedy komputer czytał tekst z witryny. To brzmiało super robotyczne i dziwne 🤖. Bez odpowiedniej semantyki tak właśnie jest. Czy to działa, na pewno – ale wrażenia słuchowe są okropne 😱. Jednak, gdy używasz właściwej semantyki, to jest jak słuchanie Siri. To brzmi o wiele bardziej human-y, ponieważ ma wszystkie różne fleksji, zmiany w wysokości dźwięku, a nawet wiedzieć, kiedy pauzować. I to jest podobny rodzaj lepszego doświadczenia, które można osiągnąć przy użyciu semantycznie poprawnych tagów HTML 👍

Tag HTML5 i SEO

Chcę zwrócić uwagę na jedną rzecz, choć.

John Mueller z Google’a wspomniał o tym w odpowiedzi na Twitterze:

Z pewnością ma sens używanie HTML5 poprawnie, jeśli możesz, nie ma żadnych minusów SEO, aby to zrobić :).

Jest to, co zbieram z tego. Niezależnie od tego, czy używasz znaczników HTML5, czy nie, nie zaszkodzi to Twojemu rankingowi wyników wyszukiwania Google. Jednakże, czy to oznacza, że powinieneś używać znaczników HTML5. Wcale nie! Korzyści związane z dostępnością są nadal obecne. A niektóre znaczniki HTML5 mają naprawdę ciekawe zachowanie w przeglądarce i otwierają użytkownika na bardziej zaawansowane funkcje, których nie miał wcześniej 🤩

Problemy z dostępnością

W porządku, mam nadzieję, że udało mi się przekazać Ci znaczenie semantycznych znaczników HTML. I możesz teraz zrozumieć jak <mark> nie jest po prostu do stylizacji tekstów, ale jest semantycznie dobrą rzeczą.

Ale jest pewien problem z jego dostępnością. Niestety, użycie znacznika <mark> nie jest zapowiadane przez większość czytników ekranu w jego domyślnych ustawieniach. Ale dobra wiadomość, jest sposób na obejście tego problemu. Możesz użyć właściwości CSS content i pseudoelementu, aby to ogłosić.

mark::before { content: " ";}mark::after { content: " ";}/* Hide the text created in the CSS content property */mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}

Co więc zrobi tutaj czytnik ekranu. Kiedy napotka tekst, który jest zawinięty w znacznik <mark>, ogłosi „highlight start”, po którym nastąpi tekst wewnątrz znacznika. a następnie ogłosi „highlight end”, gdy znacznik się skończy.

ALE…

Uwaga: jeśli masz wiele takich „ogłoszeń”, może to być bardzo dosłowne i dodawać czasami irytujące niepotrzebne informacje. Co może spowodować, że niektórzy użytkownicy czytników ekranu wyłączą tę funkcję. Tak więc, lekcja tutaj jest. „Z wielką mocą przychodzi wielka odpowiedzialność 🕷”. Nie nadużywaj tej techniki i stosuj ją TYLKO w przypadkach, gdy NIE WIADOMOŚĆ o podświetlonej treści może negatywnie wpłynąć na zrozumienie przez użytkownika.

Przypadek użycia dla <mark>

Teraz część zabawy! Przyjrzyjmy się kilku przypadkom użycia dla <mark>:

Przypadek użycia: Wynik wyszukiwania

Tutaj jest popularny. Można go użyć do podświetlenia terminu, który użytkownik wyszukał.

<p>Search Result for "Vue"</p><hr><p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>

<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>