Пошук уроків, статей та іншого контенту
Освоїте семантичне та візуальне виділення тексту тегами strong, em, mark, small, del, ins і span.
HTML-теги форматування допомагають виділяти частини тексту й пояснювати їхнє значення. Браузер має стандартні стилі для більшості таких тегів, але за потреби їх можна змінити за допомогою CSS.
Важливо розрізняти:
семантичне виділення — тег повідомляє значення тексту;
візуальне виділення — тег або CSS змінює вигляд тексту.
Наприклад, тег <strong> означає важливість тексту, а не просто робить його жирним.
strongТег <strong> позначає текст, який має особливу важливість, серйозність або терміновість.
<p><strong>Увага:</strong> не видаляйте цей файл.</p>Типово браузер відображає вміст <strong> жирним шрифтом.
Тег можна використовувати для:
важливих попереджень;
ключових умов;
критичних повідомлень;
частин тексту, які потрібно прочитати особливо уважно.
Якщо потрібно просто зробити текст жирним без додаткового значення, краще використовувати CSS.
emТег <em> позначає текст, на який потрібно зробити логічний або інтонаційний наголос.
<p>Це <em>дуже</em> важливе правило.</p>Типово браузер відображає текст у <em> курсивом.
Порівняйте:
<p>Я сказав, що завдання <em>сьогодні</em>.</p>
<p>Я <em>сказав</em>, що завдання сьогодні.</p>У першому реченні наголос падає на час, а в другому — на сам факт повідомлення.
markТег <mark> виділяє текст як маркером. Він використовується, коли потрібно звернути увагу на збіг, пошуковий результат або важливу частину тексту.
<p>Знайдено слово: <mark>HTML</mark>.</p>Типово браузер показує такий текст на жовтому фоні.
<mark> не означає, що текст є найважливішим. Він лише візуально привертає до нього увагу в певному контексті.
smallТег <small> призначений для другорядного тексту, наприклад уточнень, приміток або юридичної інформації.
<p>Ціна: 500 грн</p>
<small>Ціна вказана без урахування доставки.</small>Типово текст у <small> має менший розмір, ніж звичайний текст.
Цей тег не варто використовувати для всього дрібного тексту на сторінці. Він має передавати саме значення другорядної інформації.
del і insdel<del> позначає текст, який було видалено або більше не є актуальним.
<p><del>Стара ціна: 800 грн</del></p>Браузер зазвичай перекреслює текст.
ins<ins> позначає текст, який було додано або вставлено в документ.
<p><ins>Нова ціна: 650 грн</ins></p>Браузер зазвичай підкреслює текст.
Разом ці теги зручно використовувати для демонстрації змін:
<p>
Ціна:
<del>800 грн</del>
<ins>650 грн</ins>
</p><del> і <ins> описують зміни в змісті, а не просто спосіб оформлення тексту.
span<span> — універсальний рядковий контейнер. Він сам по собі не додає тексту жодного семантичного значення.
Його використовують, щоб:
застосувати CSS до частини тексту;
додати клас або ідентифікатор;
звернутися до елемента через JavaScript.
<p>Вивчайте <span class="accent">HTML</span> щодня.</p>.accent {
color: darkblue;
font-weight: bold;
}У цьому прикладі <span> лише об’єднує слово HTML, щоб до нього можна було застосувати стиль.
Не слід замінювати семантичні теги на <span>. Якщо текст важливий, використовуйте <strong>, якщо потрібен наголос — <em>, а не просто стилізований <span>.
Теги форматування можна вкладати один в один, якщо кожен із них має власну мету.
<p>
<strong><em>Увага:</em> термін подання заявки завершується сьогодні.</strong>
</p>Тут:
<strong> позначає важливість усього повідомлення;
<em> додає інтонаційний наголос до слова «Увага».
Не варто додавати багато тегів без потреби. Кожен елемент має пояснювати або оформлювати конкретну частину тексту.
Нижче наведено повний приклад HTML-сторінки з усіма розглянутими тегами:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форматування тексту</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 700px;
margin: 40px auto;
padding: 0 20px;
}
.accent {
color: #0b5ed7;
font-weight: bold;
}
.note {
color: #666;
font-size: 0.9rem;
}
mark {
background-color: #ffe58a;
padding: 2px 4px;
}
ins {
color: #198754;
text-decoration: none;
font-weight: bold;
}
del {
color: #dc3545;
}
</style>
</head>
<body>
<h1>Оголошення</h1>
<p>
<strong>Увага:</strong> реєстрація на курс завершується
<em>сьогодні о 18:00</em>.
</p>
<p>
У програмі курсу ви вивчатимете
<mark>семантичний HTML</mark>.
</p>
<p>
Вартість курсу:
<del>1200 грн</del>
<ins>900 грн</ins>.
</p>
<p>
Для початку натисніть кнопку
<span class="accent">«Зареєструватися»</span>.
</p>
<p class="note">
* Кількість місць обмежена.
</p>
<small>Умови участі можуть змінюватися.</small>
</body>
</html>У прикладі:
<strong> виділяє важливе попередження;
<em> додає наголос на часі;
<mark> підсвічує ключову фразу;
<del> показує попередню ціну;
<ins> показує нову ціну;
<span> дає змогу окремо стилізувати слово;
<small> містить другорядне уточнення.
Семантичні теги не забороняють використовувати CSS. Навпаки, CSS дає змогу налаштувати їхній вигляд, не втрачаючи змісту.
<p>
<strong class="warning">Увага: перевірте дані.</strong>
</p>.warning {
color: #b42318;
background-color: #fee4e2;
padding: 4px 8px;
}Текст залишається важливим завдяки <strong>, а CSS змінює його колір і фон.
<strong> лише для жирного шрифту<p><strong>Назва товару</strong></p>Якщо назва не є особливо важливою, для візуального оформлення краще використати клас і CSS:
<p class="product-name">Назва товару</p>.product-name {
font-weight: bold;
}<em> лише для курсиву<em> має передавати інтонаційний наголос. Якщо курсив потрібен тільки як стиль, застосовуйте CSS:
<p class="italic-text">Допоміжний текст</p>.italic-text {
font-style: italic;
}<mark>Не потрібно підсвічувати кожне слово. <mark> має привертати увагу до конкретної частини тексту в певному контексті.
<span> замість семантичного тега<p><span class="important">Необхідно зберегти зміни.</span></p>Якщо текст справді важливий, краще написати:
<p><strong>Необхідно зберегти зміни.</strong></p>CSS можна додати безпосередньо до <strong> або через його клас.
<del> і <ins> лише як декоративних тегівЦі теги описують видалений і доданий текст. Для простого перекреслення чи підкреслення без такого значення використовуйте CSS.
<strong> — важливий текст.
<em> — логічний або інтонаційний наголос.
<mark> — текст, виділений маркером у певному контексті.
<small> — другорядна інформація або примітка.
<del> — видалений чи неактуальний текст.
<ins> — доданий або оновлений текст.
<span> — нейтральний контейнер для стилізації або подальшої роботи зі скриптами.
Теги форматування допомагають не лише змінювати зовнішній вигляд тексту, а й передавати його зміст.
Під час створення HTML:
обирайте тег відповідно до значення тексту;
використовуйте CSS для налаштування зовнішнього вигляду;
застосовуйте <span> лише тоді, коли спеціальний семантичний тег не підходить;
не використовуйте форматування без потреби;
пам’ятайте, що добре підібрана семантика робить документ зрозумілішим для браузерів, пошукових систем і допоміжних технологій.