НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Place for your advertisement!
HTML5. Уроки для початківців. W3Schools українською

HTML5 Нові елементи


Нові елементи в HTML5

Нижче наведений список нових елементів HTML5 і опис того, для чого вони використовуються.


Нові семантичні/структурні елементи

HTML5 пропонує нові елементи для кращої структури документа:

Тег Опис
<article> Визначає статтю в документі
<aside> Визначає зміст, крім змісту сторінки
<bdi> Ізолює частину текста, який може бути відформатований в іншому напрямку від іншого текста за його межами
<details> Визначає додаткові деталі, які користувач може переглядати або ховати
<dialog> Визначає діалоговий бокс або вікно
<figcaption> Визначає заголовок для елемента <figure>
<figure> Визначає автономний зміст
<footer> Визначає нижній колонтитул для документа або розділу
<header> Визначає заголовок для документа або розділу
<main> Визначає основний зміст документа
<mark> Визначає помічений / виділений текст
<meter> Визначає скалярне вимірювання в межах визначеного діапазону (датчик)
<nav> Визначає навігаційні посилання
<progress> Представляє хід виконання завдання
<rp> Визначає, що відображати в браузерах, які не підтримують ruby анотації
<rt> Визначає пояснення / вимову символів (для східноазійської типографіки)
<ruby> Визначає анотацію ruby (для східноазійської типографіки)
<section> Визначає розділ в документі
<summary> Визначає видимий заголовок для елемента <details>
<time> Визначає дату / час
<wbr> Визначає можливе розірвання рядка

Дізнатись більше про HTML5 Семантика.


Нові елементи форми

Тег Опис
<datalist> Визначає список попередньо визначених параметрів для елементів управління введенням
<output> Визначає результат розрахунку

Дізнатись більше про старі та нові елементи форми в HTML Елементи форми.


Нові типи введення / input type

Нові типи введення Нові атрибути введення
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Дізнайтесь все про старі і нові типи введення в HTML Типи введення.

Дізнайтесь все про атрибути введення в HTML Атрибути введення.


HTML5 - Синтаксис нових атрибутів

HTML5 допускає чотири різних синтаксиса для атрибутів.

Цей приклад демонструє різні синтаксиси, що використовуються в тезі <input>:

Type Приклад
Пустий <input type="text" value="John" disabled>
Без лапок <input type="text" value=John>
Подвійні лапки <input type="text" value="John Doe">
Одинарні лапки <input type="text" value='John Doe'>

В HTML5 можуть використовуватись всі чотири синтаксиса, в залежності від того, що потрібно для атрибута.


HTML5 Графіка

Тег Опис
<canvas> Малювання графіки на ходу за допомогою скриптів (зазвичай JavaScript)
<svg> Малювання векторної графіки, що масштабується

Дізнатись більше про HTML5 Canvas.

Дізнатись більше про HTML5 SVG.


Нові медіа елементи

Тег Опис
<audio> Визначає звуковий контент
<embed> Визначає контейнер для зовнішнього (не HTML) додатку
<source> Визначає декілька медіа-ресурсів для медіа-елементів (<video> та <audio>)
<track> Визначає текстові доріжки для медіа-елементів (<video> та <audio>)
<video> Визначає відео або фільм

Дізнатись більше про HTML5 Відео.

Дізнатись більше про HTML5 Аудіо.


Place for your advertisement!