HTML5 нові елементи
Нові елементи в HTML 5
Інтернет значно змінився відколи HTML 4.01 став стандартом у 1999 році.
На сьогоднішній день деякі елементи в HTML 4.01 вже застаріли, не використовуються взагалі або використовуються не так, як вони були покликані. Ці елементи будуть видалені або переписані в HTML5.
Щоб краще використовувати всі можливості сьогоднішнього Інтернету, HTML5 включає в себе нові елементи для поліпшення структури, графіки, медіа-контенту, і кращої обробки форм внесення даних.
Нові елементи розмітки
Нові елементи для поліпшення структури:
|
Теги: |
Опис |
|
<article> |
Для зовнішнього вмісту, такого як текст статті з новинами , блог, форум, або будь-який інший контент із зовнішніх джерел |
|
<aside> |
Для вмісту, розміщеного збоку від основного контенту сайту |
|
<command> |
Кнопка, або перемикач, або прапорець |
|
<details> |
Для опису подробиць про документ або частину документа |
|
<summary> |
Підпис, або резюме, всередині елемента деталі |
|
<figure> |
Для групування розділу з автономним змістом, це може бути, наприклад, відео |
|
<figcaption> |
Заголовок розділу фігури |
|
<footer> |
Для колонтитула документа або розділу, може включати ім'я автора, дату документа, контактну інформацію, або інформацію про авторські права |
|
<header> |
Для введення документа або розділу, може включати навігацію |
|
<hgroup> |
Для розділу рубрик, використовуючи теги <h1> - <h6>, де найбільшим є основний заголовок розділу, та решта є підзаголовками |
|
<mark> |
Для роботи з текстом, який повиннен бути виділений |
|
<meter> |
Для вимірювання, можна використовувати, тільки якщо відоме максимальне і мінімальне значення |
|
<nav> |
Для розділу навігації |
|
<progress> |
Стан в ході роботи |
|
<ruby> |
Для Ruby анотації (китайські нотатки або символи) |
|
<rt> |
Для пояснення Ruby анотації |
|
<rp> |
Що показувати браузерам, які не підтримують елемента Rubi |
|
<section> |
Для розділів в документі, таких як глави, заголовки, колонтитули, або будь-які інші розділи документа |
|
<time> |
Для визначення часу або дати, або обох даних |
|
<wbr> |
Перенесення слів. Для визначення можливості розриву рядка. |
Нові медіа елементи
HTML5 забезпечує новий стандарт для медіа-контенту:
|
Теги: |
Опис |
|
<audio> |
Для мультимедійного контенту, звуків, музики або інших аудіо потоків |
|
<video> |
Для відео контенту, такого як кліп або інших відео потоків |
|
<source> |
Для медіа-ресурсів для медіа-елементів, визначених усередині відео або аудіо елементів |
|
<embed> |
Для вбудованого змісту, такого як плагін |
Елемент canvas
Елемент canvas використовує JavaScript, щоб створити малюнки на веб-сторінці.
|
Теги: |
Опис |
|
<canvas> |
Для створення графіки за допомогою скрипта |
Нові елементи форми
HTML5 пропонує більше елементів форми, з великою кількістю функціональних можливостей:
|
Теги: |
Опис |
|
<datalist> |
Список варіантів вхідних значень |
|
<keygen> |
Генерація ключів для аутентифікації користувачів |
|
<output> |
Для різних видів продукції, таких, як вихідні дані написані за допомогою скрипта |
Нові значення вхідних атрибутів, що вводяться
Крім того, елементи вхідних даних здобули багато нових рис, для кращого контролю перед відправкою на сервер:
|
Дані |
Опис |
|
tel |
Вхідне значення в формі номера телефону |
|
search |
Поле введення в поле пошуку |
|
url |
Вхідне значення URL |
|
|
Вхідне значення являє собою одну або декілька адрес електронної пошти |
|
datetime |
Вхідне значення дати і / або часу |
|
date |
Вхідне значення дати |
|
month |
Вхідне значення місяця |
|
week |
Вхідне значення тижня |
|
time |
Вхідне значення типу часу |
|
datetime-local |
Вхідне значення місцевих дати / часу |
|
number |
Вхідне значення числа |
|
range |
Вхідне значення числа в заданому діапазоні |
|
color |
Вхідне значення кольору, в формі шістнадцяткового коду, наприклад #FF8800 |