Коли мова йде про створення веб-сайтів, HTML (HyperText Markup Language) є основою. Це перший крок у створенні веб-сторінки, який надає структуру і значення вмісту. Але чи знали ви, що існує 2 типи елементів HTML? Деякі з них є несемантичними, а інші — семантичними. Розуміння різниці між ними є ключем до написання чистого, більш змістовного коду.
Різниця між цими елементами:
a. Несе семантику:
Ці елементи схожі на порожні контейнери. Вони не вказують вам або браузеру, що їхній вміст означає. Прикладами є:
- div: Загальний контейнер для групування вмісту.
- span: Інлайн контейнер для стилізації.
Хоча ці елементи гнучкі та широко використовуються, їм бракує значення. Браузери, розробники та допоміжні технології (такі як екранні читачі) не можуть вивести їх призначення без додаткового контексту, наприклад, класів або ID.
b. Семантичні:
У програмуванні семантика відноситься до значення частини коду. Вони є самодокументованими та чітко представляють мету вмісту, який вони містять. Прикладами є: header, article і footer. Ми розглянемо їх докладніше в статті.
Чому важливий семантичний HTML
Семантичний HTML полягає в створенні змістовних веб-сторінок, які простіші для розуміння та підтримки. Давайте глибше розглянемо, чому семантичний HTML існує і використовується:
- Покращена доступність
Семантичні елементи допомагають екранним читачам та іншим допоміжним технологіям інтерпретувати вміст більш ефективно, допомагаючи користувачам з порушеннями зору орієнтуватися на сторінці. Наприклад, тег nav вказує на навігаційне меню, що полегшує користувачам з обмеженим зором навігацію по сайту. - Кращий SEO
Пошукові системи використовують семантичні теги для розуміння структури і важливості вашого контенту. Наприклад, тег main підкреслює основний вміст сторінки, що може допомогти підвищити ваші позиції в результатах пошуку. - Чистіший код
Семантичний HTML усуває потребу в надмірних елементах div та span, що призводить до чистішого і більш зручного для підтримки коду. - Покращена зручність читання для розробників
Під час роботи в командах або перегляду старих проектів семантичні теги, такі як section або aside, дозволяють легше зрозуміти, що робить кожна частина коду. - Стійкість вашого сайту до майбутнього
Семантичний HTML відповідає веб-стандартам, що забезпечує кращу сумісність з майбутніми технологіями та браузерами.
Основні семантичні елементи та їх використання
Ось кілька важливих семантичних елементів:
a. header: Позначає верхню частину сторінки або статті, часто містить заголовки чи навігаційні посилання.
Welcome to My Blog
Home About
b. nav: Визначає навігаційні посилання, наприклад, меню або зміст.
Приклад:
Services
Contact
c. main: Представляє основний вміст документа, чітко показуючи, на чому зосереджено головну увагу.
Приклад:
Our Services
We provide top-notch web development services tailored to your needs.
d. article: Використовується для самостійного контенту, який може існувати окремо, наприклад, блог-пости чи новинні статті.
Приклад:
Breaking News
Scientists have discovered a new planet in our solar system.
e. section: Групує пов'язаний контент за спільною темою чи метою.
Приклад:
Features
Responsive Design
Fast Loading
SEO-Friendly
f. aside: Представляє контент, що є побічно пов’язаним з основним, наприклад, бокову панель або витягнуту цитату.
Приклад:
Quick Tip
Use semantic HTML to improve your website's SEO.
g.
_
:_ Знаходиться внизу сторінки або секції, містить посилання, інформацію про авторські права або заключні примітки.
Приклад:
© 2025 My Awesome Blog
Privacy Policy
h. figure та figcaption: Огортають візуальний контент, як-от зображення, разом з додатковим підписом для кращого контексту.
Приклад:
Figure 1: A serene sunset.
Інші приклади семантичних елементів включають: mark, form, time, table та багато інших.
Як перейти на семантичний HTML
Перехід на семантичний HTML не означає повну відмову від div та span. Замість цього думайте про призначення вашого контенту. Запитайте себе:
- Чи є цей контент частиною основної історії? (Використовуйте article.)
- Чи є це навігаційним меню? (Використовуйте nav.)
- Чи є це зображенням з підписом? (Використовуйте figure та figcaption.)
Наприклад, замініть це:
Welcome to My Blog
На це:
Welcome to My Blog
Висновок
Семантичний HTML — це найкраща практика, яка покращує доступність, SEO та співпрацю. Приймаючи такі елементи, як header, article та footer, ви не тільки створюєте код для сьогодення, але й будуєте кращий веб для майбутнього.
Деяка інформація тут взята з надійних ресурсів, таких як W3Schools та MDN Web Docs, що є чудовими місцями для вивчення веб-розробки. Тож наступного разу, коли ви пишете код, пам'ятайте: семантика має значення!
Які ваші улюблені семантичні теги? Поділіться в коментарях нижче!
Перекладено з: HTML Semantics: Making the Web More Understandable