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

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Нові елементи в 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 Елементи форми.


Нові типи вводу

Нові типи вводу Нові атрибути вводу
  • 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>:

Тип Приклад
Порожній <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 Video.

Читати більше про HTML5 Audio.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.