- Семантична верстка в HTML
- Приклади семантичної верстки HTML5
- Поширені теги HTML5 для семантичної верстки
Привіт, шановні читачі блогу.
Ми з вами вже не раз торкалися теми верстки сайту, зокрема, розглядали основи роботи з html-кодом і редагування css-стилів . Сьогодні ми підемо далі і розберемося з тим, що таке семантична верстка сайту, для чого вона потрібна і як її застосовувати на практиці. Для розуміння даної теми важливо попередньо вивчити хоча б основні принципи html і css, або ж осягати нову інформацію по ходу прочитання сьогоднішньої статті, звертаючись за роз'ясненнями до більш раннім статей на моєму блозі.
зміст:
- Що таке семантична верстка: суть і значення
- приклади використання
- Основні теги HTML5
Семантична верстка в HTML
Семантика в мовознавстві означає сенс, значення слова або мовного обороту. Ми вже зустрічали цей термін, коли розглядали збір семантичного ядра для сайту . І в тому контексті, і в сьогоднішній статті визначення «семантичний» вказує на те, що в основі лежить сенс. А отже, семантична верстка - це верстка, побудована на смисловій структурі. На відміну від так званої верстки на дівах (div - html-тег), всі елементи семантичної верстки підпорядковані смисловий ієрархії. І найбільш наочний приклад для пояснення - це використання тегів заголовків і підзаголовків h1, h2, h3 і т.д. 
Це теги семантичної розмітки. І якщо спочатку в html для виділення підзаголовків використовувалися теги <b> або <strong>, то сьогодні таке акцентування для заголовків майже не вживається. Замість цього теги h1 і h2 увібрали всі необхідні функції для виділення назв розділів жирним збільшеним шрифтом. Крім того, ці теги дають набагато більше інформації про текст, як самим веб-розробникам, так і роботам, що обробляють веб-сторінки. Тобто раніше html-верстка була більш описової, приділялася увага зовнішнім атрибутам елементів, які складали загальну структуру окремими блоками. У семантичній ж верстці - основний акцент робиться на підпорядкуванні структурних елементів загальної смислової ієрархії, де кожен блок має своє призначення для цілого.
Вживання тегів семантичної верстки дозволяє зменшити кількість коду сторінки, прискорити обробку, а відповідно і завантаження документа. Також зрозуміла структура коду набагато швидше розпізнається, а тому і вище котирується пошуковими системами. Нагадаю, як ми використовували мікророзмітки для розширеного опису сайту у видачі .
Коли кожному структурному елементу сайту відповідає певний тег, код стає впорядкованим і зрозумілим. При цьому опис стилів елементів виводяться в окремий css-файл. Для того, щоб побачити наскільки сторінки вашого сайту структуровані можна виконати простий експеримент. Вимкніть на час в браузері підтримку CSS і JavaScript і подивіться, де на вашому ресурсі назви статей, зміст, підзаголовки і т.д. Чи можете ви розібратися в структурі вашого сайту, використовуючи тільки html-розмітку?
Приклади семантичної верстки HTML5
Ще один наочний приклад, де ясно видно відміну семантичної верстки від минулих стандартів html, - використання тега <em> (від англійського emphasis - акцент). Тег <em> замінив тег <i> (виділення курсивом). Для тега <em> в файлі стилів може здаватися відображення курсивом, підкресленням, напівжирним. Але значення даного тега - саме акцентування тексту, наприклад, для виділення нового терміна. Однак, в разі, коли потрібно вжити цитату, в семантичної верстки буде вже використовуватися тег <cite>, хоча раніше обидва ці елементи (і новий термін, і цитата) були б укладені в тег <i> (виділені курсивом).
А тепер наведемо приклад, як верстка дивами замінюється семантичної.
Приклад звичайної верстки:
1 2 3 4 5 6 <div class = "new"> <div class = "article"> <div class = "title"> Тема поста </ div> <div class = "text"> Текст поста </ div> </ div> </ div>
<Div class = "new"> <div class = "article"> <div class = "title"> Тема поста </ div> <div class = "text"> Текст поста </ div> </ div> </ div>
Заміна на семантичну:
1 2 3 4 5 6 <section class = "new"> <article> <h1> Тема поста </ h1> <p> Текст поста </ p> </ article> </ section>
<Section class = "new"> <article> <h1> Тема поста </ h1> <p> Текст поста </ p> </ article> </ section>
Тут ми використовували теги семантичної верстки: section, article, h1, p.
Стилі прописуються, як правило, в окремому в файлі (у випадку з WordPress в style.css) наступним чином:
1 2 3 4 5 6 7 8 9 10 11 12 header {width: 90%; margin: auto; } H1 {text-align: center; font-size: 2em; } Nav {background: # f1f1f1; color: # 777; }
header {width: 90%; margin: auto; } H1 {text-align: center; font-size: 2em; } Nav {background: # f1f1f1; color: # 777; }
У разі верстки з div, дане опис виглядало б так:
1 2 3 4 5 6 7 8 9 10 11 12 div.header {width: 90%; margin: auto; } Div .header span {text-align: center; font-size: 2em; } Div .menu {background: # f1f1f1; color: # 777; }
div.header {width: 90%; margin: auto; } Div.header span {text-align: center; font-size: 2em; } Div.menu {background: # f1f1f1; color: # 777; }
Однак всі переваги семантичної верстки не скасовують можливості вживання старих напрацювань. Важливо, підійти до побудови текстової розмітки з розумом, щоб кожен елемент вписувався в загальну структуру.
Поширені теги HTML5 для семантичної верстки
Для того, щоб глибше зрозуміти сьогоднішню тему розглянемо деякі теги, які використовуються при семантичної верстки в html5. А потім застосуємо їх на практиці.
<Header> - задає шапку сайту або розділу, в нього зазвичай включений заголовок, а також всередину можуть поміщатися інші теги, крім вищих по ієрархії (html, body, head і т.п.)
<Article> - тег, в який укладають елементи статті: безпосередньо текст, зображення, коментарі
<Section> - розділяє веб-документ на смислові секції, є можливість вкладати один тег section в інший
<Footer> - підвал сайту, де міститься інформація про контакти, адреси, посилання, авторство та інше
<Nav> - тег html5 для навігації по сайту, в нього поміщаються найбільш пріоритетні посилання, хоча допустимо використання декількох тегів на сторінці
<Aside> - блок неосновного контенту, як правило, бічна панель (сайдбар): рекламні блоки, рубрики, мітки і т.д.
Тепер, знаючи вищенаведені теги, подивимося, як вони працюють на прикладі нижче.
Прописуємо такий код в редакторі Notepad або Блокнот:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <header> Шапка сайту </ header> <nav> Навігація <ul> <li> <a href="#"> Посилання 1 </a> </ li> <li> <a href="#"> Посилання 2 </a> </ li> </ ul> </ nav> <section> Секція 1 <article> <h1> Заголовок статті </ h1> <p> Контент </ p> <h2> Підзаголовок статті </ h2> </ article> </ section> <footer> <p> Дата, адреса, авторство </ p> </ footer>
<Header> Шапка сайту </ header> <nav> Навігація <ul> <li> <a href="#"> Посилання 1 </a> </ li> <li> <a href="#"> Посилання 2 </a> </ li> </ ul> </ nav> <section> Секція 1 <article> <h1> Заголовок статті </ h1> <p> Контент </ p> <h2> Підзаголовок статті </ h2> </ article> </ section> <footer> <p> Дата, адреса, авторство </ p> </ footer>
Тепер запустимо документ, як html-файл.
Далі нам необхідно задати стилі для кожного елемента. У нашому випадку, додамо тег <style> з описами в уже створений html-файл. Якщо ж ви вносите зміни на сайті на WordPress, додавайте правки в файл стилі style.css.
Отже, загальний вигляд нашого файлу style.css буде таким:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 header {text-align: center; background: # FF0000; } Nav {float: right; width: 300px; background: # 3CB371; } Section {float: right; margin: 10px auto; width: 1250px; background: # 808080} section h1 {color: # 800000; padding: 10px; text-align: center; } Article {float: left; width: 595px; margin: 5px; padding-left: 5px; text-align: center; background: # 800080; } Article h2 {width: 250px; margin: 10px auto; text-align: center; background: # D2691E; } Footer {clear: both; height: 40px; padding: 10px; background: # 00FFFF; } Footer p {font-size: 14px; text-align: center; }
header {text-align: center; background: # FF0000; } Nav {float: right; width: 300px; background: # 3CB371; } Section {float: right; margin: 10px auto; width: 1250px; background: # 808080} section h1 {color: # 800000; padding: 10px; text-align: center; } Article {float: left; width: 595px; margin: 5px; padding-left: 5px; text-align: center; background: # 800080; } Article h2 {width: 250px; margin: 10px auto; text-align: center; background: # D2691E; } Footer {clear: both; height: 40px; padding: 10px; background: # 00FFFF; } Footer p {font-size: 14px; text-align: center; }
Детально вивчивши наведений код, ви побачите, що для кожного тега (header, section, article, footer) задані розташування, ширина, колір заливки або шрифту.
Такого ж виду веб-сторінки можна було б досягти, зверстати документ за допомогою тегів <div>, проте використавши теги семантичної верстки ми наочно дізналися про її переваги. Переглянувши код, відразу стає зрозумілим значення того чи іншого блоку, що дає можливість веб-розробникам ефективніше працювати з документами. У свою чергу структурованість семантичної верстки дозволяє пошуковим роботам швидко обробляти сторінки, що дає фору в ранжируванні, створеного таким чином, ресурсу.
Крім наведених основних тегів html5 для семантичної верстки, існує також безліч спеціальних, виконують важливе призначення. Наведемо короткий список найбільш використовуються семантичних тегів html5:
- <Video> - відтворення і управління відео;
- <Audio> - додавання і управління аудіо на сторінці;
- <Canvas> - область для створення зображень і інших об'єктів Javascript;
- <Command> - кнопка або перемикач всередині тега <menu>;
- <Menu> - створення меню і контейнер для тега <command>;
- <Datalist> - список варіантів, доступний після введення в текстовому полі (приклад такого списку - підказки Google);
- <Figure> - групування елементів (наприклад, зображення з підписами);
- <Hgroup> - групування заголовків і підзаголовків;
- <Mark> - смислове виділення тексту;
- <Meter> - висновок значень в заданому діапазоні, як правило, числові дані;
- <Ruby> - додавання анотації зверху або знизу основного тексту (приклад - транскрипція під словами);
- <Source> - вставка аудіо- або відеофайлу всередині тегів audio, video;
- <Time> - текст всередині тега набуває значення дати, часу;
Наостанок, дивіться пізнавальний відео-урок з основ html5, його тегами і прикладами їх використання:
При належній спрямованості, ви обов'язково зможете освоїти необхідні знання. Вірте в свої сили.
До нової зустрічі!
Чи можете ви розібратися в структурі вашого сайту, використовуючи тільки html-розмітку?