HTML5 елементи – нові теги

23

Від автора: вітаю вас на цьому блозі. У цьому уроці я хотів би познайомити вас із основами html5, а саме з самими основними тегами, які з’явилися в ньому і вже використовуються при створенні сучасних сайтів. Елементи html5 значно розширюють можливості цієї мови, давайте з ними познайомимося.

Нові елементи в html5 — семантика

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

До того ж, самі сучасні веб-стандарти орієнтовані на простоту і зрозумілість коду. Нові елементи, зокрема, включають в себе такі теги:

Header – парний тег, що позначає шапку сайту, статті або чогось іншого. Особисто я спочатку подумав, що цей тег потрібно використовувати тільки для позначення безпосередньо шапки сайту.

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

Footer – низ сайту, підвал, чи як там його ще можна назвати. Зазвичай містить інформацію про авторські права, іноді додаткове меню і контактну інформацію. У випадку з цим тегом ситуація така ж, як і з header – він може бути і не одним на сторінці, цим тегом можна позначити, наприклад, нижню секцію в сайдбарі, якщо вона дійсно відрізняється від інших.

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

Article – контейнер для вмісту сторінки, будь то стаття, новина, нова тема на форумі і т. д.

Aside – все ще точаться суперечки, для чого ж повинен використовуватися цей тег. Спочатку хтось вважав, що ним прийнято формувати бічну колонку, де розташовуються різні віджети. Більш павильным вважається таке твердження – цим тегом слід оздоблювати всю інформацію, яка є побічною на веб-сторінці. Наприклад, цитата, блок з навігацією по документу або блок з контекстною рекламою.

HTML5 елементи – нові теги

Рис. 1. Семантичні елементи і нова розмітка з їх допомогою.

Це були основні семантичні елементи html5, а тепер давайте розберемо інші, які додають додаткові можливості веб-сторінці.

Вставка медіафайлів

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

Це робиться для кросбраузерності. Достатньо прописати шлях до аудиофайлу також ogg і mp3. Також audio має певні атрибути. Наприклад, атрибут controls додає до аудіозаписи елементи управління – так ви зможете змінювати гучність і зупиняти відтворення.

Video – абсолютно ідентичний минулого елемент, за винятком того, що він виводить відео. У нього також поміщають теги source, де в атрибутах src прописуються шляхи до файлів.

Варто сказати, що з відео ситуація трохи складніша. Щоб воно відтворювалося у всіх браузерах, потрібно додати його відразу в трьох форматах – це ogg, mp4 і webm.

В цілому, тег має такі ж атрибути, як і audio. Додатково у нього є атрибут poster, за допомогою якого ви можете задати шлях до картинки, яка буде видно, якщо відео не програється. Також за допомогою атрибутів width і height можна визначити розміри області, в якій буде відтворюватися відео. Але мені все-таки здається, що це краще робити через css.

Щось я прикладів не наводжу, а от зі вставкою відео це треба зробити.

Тег video не підтримується вашим браузером.

Як бачите, у нас один і той же файл – movie. Просто він у різних форматах. Також потрібно вказати MIME-тип і кодеки. Але це не варто заучувати і намагатися тримати в пам’яті – просто копіюйте.

Figure – тег створений для групування якихось елементів. Він нерозривно пов’язаний з figcaption. З появою цих елементів ми можемо реалізувати те, що раніше робилося іншими шляхами. Наприклад, вставити підпис до зображення. Це можна зробити так:

HTML5 елементи – нові теги
Підпис до зображення

HTML5 елементи – нові теги

Рис. 2. Підпис до зображення.

Datalist – цікавий тег, який можна вписати за допомогою тегів option можливі варіанти при наборі користувачем слів в текстовому полі input. Це ви можете спостерігати в пошуковику – він сам підказує вам можливі варіанти. Тут, звичайно, не настільки геніальна – ви просто можете записати пару найбільш частих слів, які люди можуть шукати у вас на сайті. Елемент зв’язується з текстовим полем з допомогою атрибута list, в якому потрібно вказати ідентифікатор, який ми визначили для тега datalist.

Мабуть, про html5 елементах потрібно писати книгу, а не статтю, адже ми не розглянули з вами і половини всього, що можна робити за допомогою цієї технології. Але, я сподіваюся, вам стало зрозуміло – HTML5 це сила і це технологія, яка значно розширює арсенал можливостей веб-розробника.

HTML5 елементи – нові теги

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

Як бачите, HTML5 дає багато нових можливостей, тому з цією технологією зобов’язаний ознайомитися будь-яка людина, яка цікавиться сайтобудування. Бажаю вам успіхів у навчанні і не забувайте поглядати до нас на блозі.