Вторник, 11 Октября 2016 22:35

Семінар: Семантика в HTML

Written by 
Оцени эту запись
(1 Голос)

Семантикою в HTML називається такий принцип створення HTML сторінки, при якому кожен тег використовується за своїм призначенням, а разом вони створюють логічну структуру документу. 

 

Загалом до семантики сторінки висувають кілька вимог, а саме використання HTML тегів в залежності від типу даних, в них представлених, правильне найменування елементів та групування. Особливо актуальною поняття семантики стало з появою структурних тегів в HTML5, що створені для визначення окремих частин веб-сторінки - header, footer, article, aside та інших. Кожну вимогу ми розглянемо окремо, але для початку невеличкий екскурс в історію.

 

 

Екскурс в історію

 
 
Я так давно працюю, що на моїх перших співбесідах ще задавали питання, чи вмію я верстати блоками! :-) Зараз це вже здається диким, коли в кожній другій вакансії HTML coder’а вказують побажання досвіду роботи з JavaScript фреймворками. Але в Інтернеті ще є сайти, яким майже стільки ж років, як молодим верстальщикам, і які зверстані таблицями. Раніше таблиці використовувались для розташування наповнення на сторінці та дозволяли робити такі звичні на даний момент праві та ліві колонки, хедери та футери, картинки в тексті тощо. Обтікання (float) та позиціонування з’явились лише в CSS 2, а div та span - явились нашому світу в HTML4 (div згадується ще в HTML3 як елемент для структурування частин документа з модливістю використання атрибуту align = left | right | center). Ось що вказано про них на сторінках консорціуму:
 
“The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.”
 
Тобто вперше з’явились HTML елементи, що відповідають лише за оформлення документу та не несуть в собі смислове навантаження, а також стилі, які здатні розмістити контент горизонтально, поміняти місцями, накласти один на другий. Саме в цей момент на поверхні з’явились можливість та потреба правильного форматування інформації, яка невдовзі переродилась в поняття семантики HTML.
 
 

Використання HTML тегів за їх призначенням

 
 
Семантичною називається верстка сторінки, при якій для представлення інформації використовуються теги, що спеціально створені саме для цих типів даних. Якщо повернутись до історії та таблиць, то при семантичній розмітці тег <table> допускається використовувати лише для представлення табличних даних, наприклад, прайсів. Призначення кожного конкретного тега можна дізнатись в специфікації W3C:
 
 
Для всіх основних типів даних існують спеціальні теги:
  • абзаци тексту оточуються тегом <p>;
  • нумерований список елементів, наприклад переможці конкурсу, записуються в тег <ol>, а для ненумерованого списку, наприклад переліку типів даних, використовують тег <ul>;
  • <a> задає посилання, які дозволяють користувачу переходити на інші сторінки;
  • <h1>, <h2> - <h6> - заголовки сторінки та окремих розділів, що використовуються для структурування тексту за розділами та відображають важливість від h1 до h6; 
  • <img> використовується для додавання картинки на сторінку;
  • <button> - використовується для створення активного елемента, який реагує на наведення або натискання користувачем, проте, на відміну від <a> не переводить його на нову сторінку
  • <dl>, <dt>,<dd> - задають список визначень, наприклад для сторінки частих запитань, де <dl> визначає межі списку, <dt> - термін, а <dd> - його значення;
  • <input type=”checkbox | radio | text”> - елементи управління, які використовуються для отримання даних від користувача та приймають їх у різних форматах;
  • <form> - використовується для відправлення вказаних користувачем даних на сервер.
 
Важливою особливість різних типів даних є їх первинний зовнішній вигляд, який підказує нам їх функціональне або смислове призначення. За допомогою CSS стилів ми маємо можливість змінювати вигляд будь-який елементів, приховувати їх та перемішувати між собою. Відключивши стилі та оглянувши сторінку в її первозданному вигляді, ми можемо переконатись в правильності або помилковості обраних нами HTML тегів. 
Для створення нейтральних за змістом блочних та вбудованих елементів використовуйте <div> та <span> відповідно, саме вони були створені для структурування інформації на сторінці, ще до появи семантичних HTML5 тегів.
 

 

Правила найменування елементів

 
 
Під найменування елементів в семантичному документі мається на увазі задавання назв класів та ідентифікаторів відповідно вмісту тега. Доречними на сторінці будуть блоки з класами menu, search, login, а не class1, class2, class3. На даний момент розвитку та значного поширення набула методологія БЭМ (https://ru.bem.info/methodology/), по котрій, окрім іншого, логічними повинні бути класи і внутрішніх елементів блоку, наприклад search__field, search__botton, search__icon. Правильність назв, окрім вимог з боку семантики, допоможе вам простіше орієнтуватись у власних файлах CSS, а також полегшить роботу та розуміння проекту вашим колегам.
 
 

Групування елементів

 
 
Групування елементів на сторінці слугує для візуального та функціонального поділу блоків. Більшість веб-документів мають шапку(header), підвал(footer), центральну частину, праву та/або ліву колонки. В залежності від призначення інформації її зазвичай розміщують у відповідному блоці, більш важливий контент знаходиться ближче до початку. 
Так хедер завжди містить логотип компанії, слоган, контактні дані, головне меню сайту. Досить часто в шапці сайту також знаходяться поле пошуку, форма авторизації, корзина інтернет-магазину. Унікальна, головна для даної сторінки, інформація розташована в центральній частині документу, в бік виносять її доповнення - схожі статті, меню категорій, додаткові дані. Футер в свою чергу містить логічне завершення сторінки - ще раз меню, ще раз логотип, копірайти, карту сайту. Футер виконує роль підсумку інформації на випадок, якщо користувач не виявив на сторінці того, за чим власне прийшов. 
Повторюючи на своїй сторінці подібну структуру, ви допомагаєте користувачам швидко знайти на необхідну інформацію, вловити суть контенту, зробити очікувані від нього дії. Не забувайте, що кожен веб-ресурс має свою мету та свої цілі, очікуючи певних дій користувача - покупки товару, підписки на новини, перехід за посиланням тощо. Даючи користувачу більш звичний та простіший для розуміння вигляд сторінки, ви допоможете йому та скоріше досягнете своєї власної мети. 
 
 

Валідність документа

 
 
Правильно виконаний з точки зору семантики документ, зазвичай, не має проблем і з валідністю. Власне, валідатор (https://validator.w3.org/) “свариться” на очепятки та нелогічні речі, типу лінк в лінку, інлайновий елемент в блочному. Також валідатору не подобається відсутність опису картинки в атрибуті alt, що не є проблемою, якщо картинка на сторінці розташована за змістом, а не для краси, але про це нижче. Тож слідуючи правилам семантики ви автоматично зробите собі добру послугу і в валідності документа, що не може не радувати.
 
 
 

Розподіл контенту та оформлення

 
 
Велике розмаїття тегів HTML та стилів CSS дозволяють створювати на сторінках веб-сайтів насправді неймовірні речі, які захоплюють своїми бездоганними лініями та зачаровують динамікою. Проте краса не є головною складовою документу, а призначено лише для доповнення текстової інформації. Тож за правилами семантики сам HTML-документ повинен містити контент (текст), а стилі та скрипти повинні бути винесені в окремі файли CSS та JavaScript відповідно. 
Маючи такі чудові можливості CSS як псевдоелементи та порядкові селектори, немає необхідності прописувати стилі в атрибуті style, набагато зручніше задати його серед решти стилів сайту. А можливість тонкого керування налаштуваннями фонового зображення елементу позбавляє необхідності додавати на сторінку зайву картинку, що не несе в собі смислового навантаження. Цьому також сприяє використання спрайтів для фонових зображень, що позитивно впливають на швидкість завантаження сторінки.
 

 

Важливість семантичної верстки сайті

 
 
Використання елементів за призначенням має два найважливіші наслідки. По-перше, форматування вмісту сторінки за допомогою різних тегів дає можливість машинам визначати типи наповнення, щоб правильно відтворювати текст. Прикладом можуть служити окремі програми, які зачитують контент сторінки для незрячих відвідувачів. Маючи на сторінці табличні дані у вигляді таблиці, такі програми можуть зчитувати текст відповідно до структури, а не просто перераховувати дані по мірі їх появи на сторінці.
 
Наприклад, маємо таблицю з цінами на товари:
 
 
  Роздрібна ціна Опт від 10 штук Опт від 100 штук
Товар 1 100 50 10
Товар 2 200 100 20
 
 
В даний момент фраза “Товар 1, роздрібна ціна 100, Опт від 10 штук 50, Опт від 100 штук 10” буде зрозуміліша, ніж “Товар 1, 100, 50, 10”.
 
Другим важливим наслідком правильного форматування тексту з використанням тегів за їх призначенням може слугувати зчитування інформації іншою машиною - пошуковим роботом. Найпростішим прикладом можуть слугувати заголовки тексту на сторінці, які вказують на важливість тексту всередині, виділення тексту тегами em або strong. Проте прикладів таких є дуже багато. Пошукові системи всіляко намагаються покращити результати пошуку користувачів, видаючи, на їх думку, найбільш релевантні дані, і окремі теги допомагають їх визначити актуальність інформації за її типом, який і визначають через її оточенням, тобто тегами. Тож семантика в HTML є не тільки правилом хорошого тону для HTML-coder’а або Front-end Developer’а, але й критичною необхідністю для кожного розробника веб-сторінок.

Висновок

 
 
Десятки років розвитку вебу та мільйони людей, що щоденно працюють над покращенням умов та розширенням можливостей кодерів та девелоперів не дозволяють нам нехтувати простими правилами створення сучасних, приємних на вигляд та корисних для користувачів веб-сторінок. Дотримання правил та слідування рекомендаціям будуть корисні як для відвідувачів наших сайтів, які зможуть швидше віднайти необхідну інформацію, так і для нас, бо ми при цьому, в ідеалі, досягнемо власної мети, для якої і створили дану сторінку та привабили користувача.  Крім того, семантика точно не стане зайвою при оптимізації сайту для пошукових систем. Значить вона є корисною з усіх боків! :)
 

Additional Info

Комментарии  

 
0 #2 kat-khmara 18.10.2016 22:41
Дякую! Справді, зараз семантика вже є необхідністю, а не просто правилом хорошого тону :)
 
 
0 #1 webdiz.com.ua 14.10.2016 18:33
Дуже гарний пост. Я вважаю що без семантики зараз неможливо себе уявити у сайт у сьгоденны
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов