Список тегів і атрибутів HTML5

  1. Нові теги HTML5
  2. Несумісні теги:
  3. Список атрибутів HTML5
  4. Структура розмітки сторінки в HTML5

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

У HTML5 додає багато нових синтаксичних особливостей - <video>, <audio>, <header> і <canvas>. Ці елементи розроблені для того, щоб зробити простіше впровадження та управління графічними і мультимедійними об'єктами в інтернеті без необхідності звертатися до власних плагінів і API. Інші нові елементи, такі як <section>, <article>, <header> і <nav> розроблені для того, щоб збагачувати семантичне вміст документа (сторінки).

Нові теги HTML5

  • 1. Теги розділів (article, aside, footer, header, hgroup, nav, section)
  • 2. Теги угруповання контенту (figure, figcaption)
  • 3. Теги для семантичного виділення тексту (bdo, mark, time, ruby, rt, rp, wbr)
  • 4. Теги для вставки контенту (audio, video, canvas, embed, source)
  • 5. Теги для елементів форм (datalist, keygen, output, progress, meter)
  • 6. Інтерактивні елементи (details, summary, command, menu)

Тег Короткий опис <article> Визначає статтю <aside> Визначає контент в стороні від основного контенту сторінки <audio> Визначає аудіо контент <canvas> Визначає графіком <command> Визначає командну кнопку <datagrid> Визначає дані в упорядкований список <datalist> Визначає, що випадає <datatemplate> Визначає шаблон даних <details> Визначає деталі елемента <dialog> Визначає діалог (розмова) <eventsource> Визначає мету події, що відправляється по серверу <figure> Визначає групу медіа-контенту, і їх підписи <footer> Визначає нижній колонтитул для розділу або сторінки <header> Визначає область заголовка розділу або сторінки <mark> Визначає виділений текст <meter> Визначає вимірювання протягом заздалегідь визначеного діапазону <nav> Визначає навігаційні посилання <nest> Визначає вкладену точку в шаблоні даних <output> Визначає деякі види результату <progress > Визначає хід виконання завдання будь-якого роду <rule> Визначає правила для поновлення шаблонів <section> Визначає розділ (секцію) <source> Визначає медіа-ресурси <time> Визначає дату / час <video> Визначає відео

Несумісні теги:

Тег Короткий опис

Список атрибутів HTML5

Атрибут Значення Короткий опис contenteditable true
false Визначає, чи може користувач редагувати вміст (контент) contextmenu menu_id Визначає контекстне меню елемента draggable true
false
auto Визначає, чи може користувач перетягнути елемент irrelevant true
false Визначає, що елемент не має значення. Елемент, що має значення не відображається ref URL / id Визначає посилання на інший документ / частина документа (використовується тільки тоді, коли значення атрибуту встановлено) registrationmark reg_mark Визначає зареєстрований знак елемента template URL / id Визначає посилання на інший документ / частина документа, які повинні бути застосовані до елементу

Структура розмітки сторінки в HTML5

Структура розмітки сторінки в HTML5

При використанні звичайної структури сторінки сайту можна виділити кілька типових блоків, описуваних тегом div з соответствущего класом (<div class = "header">, <div class = "nav">, <div class = "aside">, <div class = "section">, <div class = "footer"> та ін.).

При використанні верстки сторінки із застосуванням HTML5, ці блоки описуються структурними тегами <header>, <nav>, <aside>, <section>, <footer> та ін., що дуже спрощує життя розробникам. Дані теги є структурними еквівалентами і вони роблять розмітку більш наочною і простий в розумінні. Також, за замовчуванням, вони є інлайновимі, ​​тому їх треба Зробити блоковими за допомогою display: block.

Дані теги важливо застосовувати правильно. Щоб не заплутатися коли і який застосовувати, в мережі існує чудовий ресурс http://html5doctor.com/ , А також можна скористатися наступним алгорітом:

com/   , А також можна скористатися наступним алгорітом:

Всі сучасні браузери (Опера, Сафарі, Хром, мозила, ІЕ9 +) вже мають підтримку HTML5. Для браузерів IE8 і менше слід підключати javascript html5shiv , Який "навчить" їх розуміти нові теги. Код для його підключення нижче:

<! - [if lt IE 9]> <script type = "text / javascript" src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [Endif ] ->

У верстці макетів при створення сайтів ми перейшли на використання нового стандарту HTML5. Якщо ви хочете замовити сайт або окремо верстку сайту , Можете залишити заявку, написавши за допомогою одного з адрес, вказаних на сторінці контактів або через форму зворотного зв'язку. Будемо раді співпраці!