Від автора: це стаття, в якій будуть трохи описані нові теги html5. Вона дозволить вам познайомитися з цією новою специфікацією, якщо ви ще не встигли цього зробити.
Семантичні теги html5
Про деякі елементи цієї мови я вже писав в одній з минулих статей (дати посилання на статтю “елементи html5”), але все ж не буде зайвим і тут повторити, що це таке і з чим його їдять. Отже, основна мета семантичних тегів полягає в тому, щоб зробити розмітку сайтів більш зрозумілою для браузерів і пошукових машин.
Наприклад, в html5 з’явилися теги header і footer і тепер ці елементи веб-сторінки не потрібно створювати через звичайний div id, як це робили раніше. Крім цих тегів з’явилося ще багато нових. Наприклад, такі:
Nav – контейнер, в якому потрібно розташовувати найважливіші гіперпосилання на сторінці. Тепер в нього можна вкладати головне меню на сайті, хоча не заборонено використовувати кілька nav на сторінці.
Article – тег для контенту на сторінці. У нього потрібно поміщати статтю, новину, опис товару або щось інше, що є безпосередньо контентом на сторінці. Я хочу зазначити, що текст потрібно поміщати без заголовка і мета-даних. Принаймні, так рекомендується робити.
Section – елемент, який вже своєю назвою говорить нам – я окрема секція веб-сторінки, в якій може бути що завгодно. Наприклад, у такий контейнер можна укласти всю статтю на сайті, включаючи заголовок і побічну інформацію (на зразок дати публікації і кількості коментарів). Також допускається вкладати одну секцію в іншу.
Main – контейнер, в який, судячи з усього, потрібно укладати основний вміст сторінки. Саме текст (без заголовка і інших типових блоків). На даний момент все-таки не рекомендується його використання. Особисто я бачив його тільки в одному шаблоні, а сам елемент підтримується тільки в двох браузерах, навіть редактор коду не підсвічує цей тег. Можливо, його доля вирішиться у майбутньому.
Інші елементи мови html5
Audio, video – а ось це явне нововведення HTML5. Ці парні контейнери призначені для того, щоб вставляти в них аудіо та відеозапису, при цьому ніяких додаткових плагінів більше не потрібно. На даний момент ці теги вже непогано підтримуються в сучасних браузерах, тому при вставці медіафайлів їх використання вітається.
Всередину audio або video обов’язково вставляються одинарні теги source, в яких задається шлях до файлу. Потрібно записати кілька рядків, тому що різні браузери читають різні формати. Про це я вже писав у статті про елементи html5, де також навів приклад вставки медіафайлу.
Тег video з html5, рівно як і audio, серйозно спростив задачу додавання на сторінку подібних файлів. Ось приклад вставки відео:
Рис. 1. Відео та елементи керування до нього.
На простий html сторінці з’явився відеоролик про новому курсі з верстки з допомогою фреймворку Bootstrap. Ось він, до речі. Варто сказати, що на реальныйсайт краще не вставляти відео тим способом, який я використовував тільки що. Вірніше, не зовсім так. Зауважте, що тут я записав тільки один одинарний тег source, в якому вказав шлях до файлу mp4 і відповідні кодеки. Для повної кросбраузерності вам доведеться вказувати відео в трьох форматах (також ogg і webM).
Details – дуже цікавий елемент, який вперше дозволив приховувати якусь інформацію і розгортати її по кліку без використання javascript. Текст, який за замовчуванням записується в цей контейнер, не відображатися на сторінці. Замість цього з’являється рядок зі словом “Детальніше”, клік по якій і розгорне нашу інформацію.
Давайте я покажу приклад:
Натисни для перегляду
До речі, тег summary дозволяє змінити назву з “Докладніше” на свій, що ми і зробили. Далі розміщуємо якусь картинку, але вона стане видна тільки після кліка, спочатку при завантаженні сторінки вона відображатися не буде. Ось так все просто і цікаво, без всяких скриптів. Умільці в мережі вже знайшли вихід, як змінити картинку-маркер, прибрати синю рамку і т. д.
При повторному натисканні інформація знову зникає з екрану, що дуже зручно для користувача. З мінусів можна відзначити хіба тільки те, що тег не підтримується браузером Internet Explorer. Figure – елемент дозволяє групувати якісь елементи, а за допомогою figcaption їм можна давати загальний заголовок. Сьогодні найчастіше це використовують для того, щоб зробити опис зображення (підпис).
Підпис
За допомогою стилів ви легко можете змінити зовнішній вигляд заголовків фігур (відцентрувати, наприклад).
Canvas – елемент, який гідний окремої статті, а то й книги. За замовчуванням його називає хостом, на якому за допомогою javascript можна малювати різноманітні зображення. З допомогою canvas сьогодні створюють програми та ігри, різну анімацію і т. д.
Також з’явилися інші теги, типу output або progress. Робота з ними також безпосередньо пов’язана з javascript.
Нарешті, один елемент з html5 трохи виділяється від інших – він доданий для форматування тексту, а саме для його виділення – mark. Окресливши потрібний текст у нього поновіть сторінку і ви побачите, що фоновий колір такого тексту змінився на жовтий.
Це всього лише стиль за замовчуванням. За допомогою css ви можете легко змінити колір фону, а різні стильові класи допоможуть вам по-різному відзначати потрібний текст. В цілому, mark дійсно може стати в нагоді, хоча я дуже мало де бачив досі його використання.
Отже, в цій статті ми з вами подивилися на те, що з’явилося в HTML5 і як це покращує верстку вже зараз. Використовуйте ці нові речі при створенні сайтів, а також не забувайте стежити за оновленнями на Webformyself.
