Що таке семантична верстка?
Верстка сайту — це процес його створення за допомогою розмітки та дизайну. Вебсайт повинен розпізнавати, з якого саме браузеру або пристрою заходить користувач, адаптуватися та коректно зображуватися. Верстка також означає поєднання всіх елементів, які були в макеті, в єдину робочу структуру.
Верстати сторінки можна різними способами — статичним, табличним або блоковим. Сьогодні в основному використовують останній тип, зокрема його різновид — семантичну верстку.
Що таке семантична верстка?
На відміну від інших способів, семантична верстка робить акцент на внутрішній ієрархії елементів. Зручність для пошукових систем в тому, що код виглядає впорядковано і зрозуміло.
Сам термін «семантика» означає призначення — надання певної мети кожному знаку та символу в мові програмування, визначає шлях взаємодії цих символів та їх структуру.
Семантична верстка логічно впорядковує блоки, тобто всю інформацію на сторінці, за допомогою тегів HTML. Для їх оформлення використовують каскадні таблиці стилів — CSS.
Семантична розмітка HTML5: стисла історія появи
Якщо коротко, HTML — спосіб розмітки та визначення структури документа. Основну роль у цьому процесі відіграють семантичні HTML теги. Ними позначають кожний елемент з двох сторін. Завдяки такому оформленню браузер знає, як взаємодіяти з інформацією.
Тег — назва програмного елемента, зазвичай декілька символів, які розміщено у кутових дужках.
У 1990 році Тім Бернерс-Лі створив перший браузер (програма, яка відкриває сайти — забезпечує взаємодію користувача з вебсторінкою) та HTML. Але офіційним роком початку історії мови розмітки вважають наступний — 1991. Тоді вперше у загальному доступі з’явилися семантичні HTML теги. Їх було лише 18, 11 з яких існують і досі.
Розмітка з врахуванням смислового наповнення виявилася оптимальним рішенням для верстки. У наступні роки виходили оновлені версії мови. З 2014 спеціалісти використовують HTML5.
Семантична верстка: навіщо потрібна та які її переваги?
Зверстати сайт і досі можна будь-яким способом. Вебсторінка буде відкриватися в браузері без помітної різниці для більшості користувачів. Проте пошукові роботи та спеціальні програми зчитують інформацію інакше. Для цього потрібна розмітка з урахуванням смислового наповнення. Забезпечити її можуть семантичні HTML теги.
Є декілька причин, чому важливо використовувати саме семантичну верстку:
- Вища позиція у пошуковому рейтингу. Розмітка дозволяє ботам Google класифікувати вміст сайту. Робот може відокремити ключову інформацію від другорядної, розрізнити типи блоків: хедер, футер, навігаційну частину, статті тощо. Таке розподілення дозволяє зробити видачу релевантнішою, тобто показувати цільовій аудиторії потрібні блоки. Без семантики вся інформація сприймається ботом як однорангова.
- Доступність сайту для спеціальних програм, наприклад скрінрідерів. Технологія перетворює текст на аудіо, дозволяючи ознайомитися з інформацією на вебсайті людям з порушеннями зору. Без семантичних HTML тегів вміст неможливо класифікувати й коректно озвучити.
- Врахування сучасних вебстандартів, до яких і відноситься семантична розмітка HTML5. Кожен елемент в останній версії відіграє конкретно відведену йому роль. Вони сприяють адаптивності вебсайту до різних браузерів та пристроїв, оскільки інші програми знають, що означає кожен тег.
Основні семантичні теги
Не всі теги HTML5 є семантичними, деякі з них виконують «декоративну» роль — виділяють текст, надають йому нахил, колір. Для пошукових ботів такі функції не мають значення.
Системні роботи обробляють символи, які класифікують текст, визначають його місце на сторінці. Дали розглянемо основні елементи семантичної верстки
Article
Використовується для позначення окремої незалежної частини. За бажанням блок можна перемістити в будь-яку частину сайту зі збереженням функціонала, застосувати для оформлення статті.
В середині блоку article бажано зробити заголовки, за бажанням додати віджети. Article часто помилково використовують замість div (команда для блоків, розділів, щоб надалі змінювати за допомогою CSS) або section.
Section
Цим елементом позначають окремий сенсовий блок, який прив’язаний до вмісту на певній вебсторінці. На відміну від article, section не можна переміщати по вебсайту, оскільки це вплине на ієрархію. В середині дозволяється розміщувати текст, заголовки, віджети.
Nav
Ще один важливий структурний елемент, який відповідає за навігацію. Може вміщувати теги нижчої ієрархії li, ol, lu для створення різних списків — з нумерацією, маркуванням та без.
Nav може використовуватися декілька разів в одному вебдокументі, проте спеціалісти не рекомендують ним зловживати.
Header
Важливий тег, який позначає «шапку» вебсайту. У ньому прописують навігаційні елементи, адресу та телефони, додають логотип, інформацію про авторство. Найчастіше header дублюють на всіх сторінках сайту.
Footer
Як протилежність до попереднього тегу, footer позначає «підвал» вебсторінки — інформацію, що закріплена внизу і дублюється (не обов’язково) на всіх сторінках вебсайту. Тут прописують важливі дані — контакти компанії, посилання, Copiright © (спеціальний знак, який означає захист авторського права).
Main
Використовують тільки один раз на конкретній вебсторінці й позначають ним унікальну інформацію, яка не дублюється в інших місцях сайту. Його заборонено прописувати в середині footer, article, section, nav і header.
Всі описані вище семантичні HTML теги з’явилися у 5 версії 2014 року.
Правила та помилки семантичної розмітки HTML5
Весь процес можна розподілити на декілька етапів:
- Додавання основних розділів із застосуванням тегів header, main, footer.
- Розміщення інформації у вже заданих основних блоках — навігація, змінні елементи, статті.
- Прописування тегів ієрархії та відповідних смислових блоків — h1…h6.
- Робота з меншими блоками — текст, віджети, списки, цитати.
- Додаткові невеликі елементи у різних місцях розмітки.
Одна з розповсюджених помилок — використання семантичних HTML тегів для дизайну — кольору тексту та шрифту, фону вебсайту. Для цього у сучасному вебдизайні заведено застосовувати CSS — каскадні таблиці стилів, які форматують зміст HTML.
Саме CSS дозволяє адаптувати вебпортал під різні пристрої. Ще однією перевагою використання каскадних стилів є можливість застосувати зміни до всіх вказаних тегів, а не форматувати вручну.
Семантична розмітка HTML5 — невіддільна частина SEO. Гарно структурований, з урахуванням семантичної верстки, вебсайт займає вищі позиції. Пошукова система вважатиме його якіснішим та релевантнішим. Розмітка з врахуванням смислового наповнення сприяє адаптивності сайту та доступності для різних категорій людей.
