HTML 5 теги – огляд основних елементів нової технології

24

Від автора: це стаття, в якій будуть трохи описані нові теги html5. Вона дозволить вам познайомитися з цією новою специфікацією, якщо ви ще не встигли цього зробити.

Семантичні теги html5

Про деякі елементи цієї мови я вже писав в одній з минулих статей (дати посилання на статтю «елементи html5»), але все ж не буде зайвим і тут повторити, що це таке і з чим його їдять. Отже, основна мета семантичних тегів полягає в тому, щоб зробити розмітку сайтів більш зрозумілою для браузерів і пошукових машин.

Наприклад, в html5 з’явилися теги header і footer і тепер ці елементи веб-сторінки не потрібно створювати через звичайний div id, як це робили раніше. Крім цих тегів з’явилося ще багато нових. Наприклад, такі:

Nav – контейнер, в якому потрібно розташовувати найважливіші гіперпосилання на сторінці. Тепер в нього можна вкладати головне меню на сайті, хоча не заборонено використовувати кілька nav на сторінці.

Article – тег для контенту на сторінці. У нього потрібно поміщати статтю, новину, опис товару або щось інше, що є безпосередньо контентом на сторінці. Я хочу зазначити, що текст потрібно поміщати без заголовка і мета-даних. Принаймні, так рекомендується робити.

Section – елемент, який вже своєю назвою говорить нам – я окрема секція веб-сторінки, в якій може бути що завгодно. Наприклад, у такий контейнер можна укласти всю статтю на сайті, включаючи заголовок і побічну інформацію (на зразок дати публікації і кількості коментарів). Також допускається вкладати одну секцію в іншу.

Main – контейнер, в який, судячи з усього, потрібно укладати основний вміст сторінки. Саме текст (без заголовка і інших типових блоків). На даний момент все-таки не рекомендується його використання. Особисто я бачив його тільки в одному шаблоні, а сам елемент підтримується тільки в двох браузерах, навіть редактор коду не підсвічує цей тег. Можливо, його доля вирішиться у майбутньому.

Інші елементи мови html5

Audio, video – а ось це явне нововведення HTML5. Ці парні контейнери призначені для того, щоб вставляти в них аудіо та відеозапису, при цьому ніяких додаткових плагінів більше не потрібно. На даний момент ці теги вже непогано підтримуються в сучасних браузерах, тому при вставці медіафайлів їх використання вітається.

Всередину audio або video обов’язково вставляються одинарні теги source, в яких задається шлях до файлу. Потрібно записати кілька рядків, тому що різні браузери читають різні формати. Про це я вже писав у статті про елементи html5, де також навів приклад вставки медіафайлу.

Тег video з html5, рівно як і audio, серйозно спростив задачу додавання на сторінку подібних файлів. Ось приклад вставки відео:

HTML 5 теги – огляд основних елементів нової технології

Рис. 1. Відео та елементи керування до нього.

На простий html сторінці з’явився відеоролик про новому курсі з верстки з допомогою фреймворку Bootstrap. Ось він, до речі. Варто сказати, що на реальныйсайт краще не вставляти відео тим способом, який я використовував тільки що. Вірніше, не зовсім так. Зауважте, що тут я записав тільки один одинарний тег source, в якому вказав шлях до файлу mp4 і відповідні кодеки. Для повної кросбраузерності вам доведеться вказувати відео в трьох форматах (також ogg і webM).

Details – дуже цікавий елемент, який вперше дозволив приховувати якусь інформацію і розгортати її по кліку без використання javascript. Текст, який за замовчуванням записується в цей контейнер, не відображатися на сторінці. Замість цього з’являється рядок зі словом «Детальніше», клік по якій і розгорне нашу інформацію.
Давайте я покажу приклад:

Натисни для перегляду
HTML 5 теги – огляд основних елементів нової технології

HTML 5 теги – огляд основних елементів нової технології

До речі, тег summary дозволяє змінити назву з «Докладніше» на свій, що ми і зробили. Далі розміщуємо якусь картинку, але вона стане видна тільки після кліка, спочатку при завантаженні сторінки вона відображатися не буде. Ось так все просто і цікаво, без всяких скриптів. Умільці в мережі вже знайшли вихід, як змінити картинку-маркер, прибрати синю рамку і т. д.

HTML 5 теги – огляд основних елементів нової технології

При повторному натисканні інформація знову зникає з екрану, що дуже зручно для користувача. З мінусів можна відзначити хіба тільки те, що тег не підтримується браузером Internet Explorer. Figure – елемент дозволяє групувати якісь елементи, а за допомогою figcaption їм можна давати загальний заголовок. Сьогодні найчастіше це використовують для того, щоб зробити опис зображення (підпис).

HTML 5 теги – огляд основних елементів нової технології
Підпис

За допомогою стилів ви легко можете змінити зовнішній вигляд заголовків фігур (відцентрувати, наприклад).

Canvas – елемент, який гідний окремої статті, а то й книги. За замовчуванням його називає хостом, на якому за допомогою javascript можна малювати різноманітні зображення. З допомогою canvas сьогодні створюють програми та ігри, різну анімацію і т. д.

Також з’явилися інші теги, типу output або progress. Робота з ними також безпосередньо пов’язана з javascript.

Нарешті, один елемент з html5 трохи виділяється від інших – він доданий для форматування тексту, а саме для його виділення – mark. Окресливши потрібний текст у нього поновіть сторінку і ви побачите, що фоновий колір такого тексту змінився на жовтий.

Це всього лише стиль за замовчуванням. За допомогою css ви можете легко змінити колір фону, а різні стильові класи допоможуть вам по-різному відзначати потрібний текст. В цілому, mark дійсно може стати в нагоді, хоча я дуже мало де бачив досі його використання.

Отже, в цій статті ми з вами подивилися на те, що з’явилося в HTML5 і як це покращує верстку вже зараз. Використовуйте ці нові речі при створенні сайтів, а також не забувайте стежити за оновленнями на Webformyself.