Тег <mark> в HTML — виділення тексту маркером

<p>З використанням тегу <code>mark</code></p>
<p><mark>Hypertext Markup Language (HTML) (укр. Мова розмітки гіпертекстових документів) —стандартна мова розмітки для створення веб-сторінок і веб-додатків . З Cascading Style Sheets (CSS) і JavaScript, вона утворює тріаду основних технологій для World Wide Web.</mark></p>
<br>
<p>Без використання тегу <code>mark</code></p>
<p>Hypertext Markup Language (HTML) (укр. Мова розмітки гіпертекстових документів) —стандартна мова розмітки для створення веб-сторінок і веб-додатків . З Cascading Style Sheets (CSS) і JavaScript, вона утворює тріаду основних технологій для World Wide Web.</p>

HTML

<p class="lead">Результати пошуку за словом «відступ»:</p>

<ul>
    <li>Зовнішні <mark>відступ</mark>и елемента задає властивість margin.</li>
    <li>Внутрішній <mark>відступ</mark> від рамки до вмісту — це padding.</li>
    <li>У флексі проміжки зручніше робити не <mark>відступ</mark>ами, а gap.</li>
</ul>

<blockquote>
    <p>Ми свідомо <mark>не додавали</mark> цього до першої редакції специфікації.</p>
</blockquote>
<p class="hint">У цитаті виділення зробив не автор слів, а той, хто цитує.</p>

<p>Порівняйте: <mark>доречно зараз</mark>, <em>наголос за змістом</em>,
    <strong>важливо завжди</strong>.</p>

CSS

body {
    font: 16px/1.7 sans-serif;
}

/* фон і колір тексту задаємо парою — інакше в темній темі текст зникне */
mark {
    background-color: #ffe066;
    color: #1a1a1a;
    padding: 0 3px;
    border-radius: 3px;
}

.lead {
    color: #666;
}

blockquote {
    margin: 16px 0 4px;
    padding-left: 14px;
    border-left: 4px solid #d0d0d0;
    color: #333;
}

blockquote p {
    margin: 0;
}

.hint {
    margin-top: 0;
    font-size: 0.9em;
    color: #666;
}