Семантика

{{GlossarySidebar}}

У програмуванні семантикою звуть значення фрагмента коду – наприклад, "який ефект має виконання цього рядка JavaScript?", або "яке призначення або роль має цей елемент HTML" (а не "який вигляд він має?").

Семантика в JavaScript

У JavaScript, припустімо, є функція, що приймає рядок як параметр і повертає елемент <li> з цим рядком як власним textContent. Чи потрібно було б дивитися на код, щоб зрозуміти, що робить функція, якщо її назвати build('Персик'), або createLiWithContent('Персик')?

Семантика в CSS

У CSS, припустімо, є оформлення списку з елементами, що представляють різні типи фруктів. Чи зрозуміло було б вам, яка частина DOM вибирається, якщо використовувати div > ul > li, чи .fruits__item?

Семантика в HTML

У HTML, наприклад, елемент h1 є семантичним елементом, що надає текст, який він обгортає, роль (або значення) "заголовка сторінки найвищого рівня".

<h1>Це заголовок найвищого рівня.</h1>

Усталено списки стилів користувацького агента більшості браузерів оформлюють h1 великим розміром шрифту, щоб він мав вигляд заголовка (хоча його можна оформити будь-яким чином).

З іншого боку, можна змусити будь-який елемент мати вигляд заголовка найвищого рівня. Розгляньмо наступне:

<span style="font-size: 32px; margin: 21px 0;">
  Не заголовок найвищого рівня!
</span>

Це візуалізується так, щоб мати вигляд заголовка найвищого рівня, але цей елемент не має семантичного значення, тому не отримає жодних додаткових переваг, описаних вище. Тому добре використовувати правильний елемент HTML для правильних речей.

HTML слід писати так, щоб представляти дані, якими він буде наповнений, і не засновувати його на оформленні усталеного представлення. Представлення (те, який вигляд це повинно мати) є єдиним призначенням CSS.

Частина переваг написання семантичної розмітки така:

  • Пошукові рушії вважатимуть вміст семантичних елементів важливими ключовими словами, що впливатимуть на ранжування сторінки в пошуку (дивіться SEO)
  • Читачі з екрана можуть користуватися семантичними елементами як дороговказами, щоб допомагати користувачам з вадами зору орієнтуватися на сторінці
  • Пошук блоків змістовного коду суттєво легший, ніж пошук серед безлічі div з або без семантичних класів або класів з простором імен
  • Підказує розробнику тип даних, якими елемент буде наповнений
  • Семантичне іменування відображає правильне іменування кастомних елементів і компонентів

При розгляді питання того, яку розмітку використовувати, слід запитати себе: "Які елемент чи елементи найкраще описують або представляють дані, якими я їх наповню?" Наприклад, чи є це список даних? Список впорядкований чи ні? Це стаття з розділами та бічним блоком зі спорідненою інформацією? Чи є це списком визначень? Чи є це рисунком або зображенням, що потребує підпису? Чи має воно верхній і нижній колонтитули, на додачу до колонтитулів усього сайту? Та інше.

Семантичні елементи

Ось частина з приблизно 100 доступних семантичних елементів:

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.