| |
HTML 5 определяет пятую главную версию базового языка всемирной паутины - HTML. Эта статья HTML 5 отличия от HTML 4 описывает отличия между HTML 4 и HTML 5 и предоставляет некоторые объяснения изменений. Эта статья не может предоставить точную информацию, так как спецификация HTML 5 находится все еще в активной разработке.
Что такое HTML 5
В 1997 HTML4 был рекомендован огранизацией W3C. Хотя он продолжает служить в качестве приблизительного ориентира для многих из основных спецификаций html, это не дает достаточно информации, чтобы создать реализации, которые взаимодействуют друг с другом. То же самое касается XHTML1, который определяет сериализацию XML для HTML4 и DOM Level 2 HTML, которые определяют API JavaScript и для HTML и для XHTML. Спецификация HTML 5 заменит эти спецификации.
Проект HTML 5 отражает усилия, начавшиеся в 2004 году, чтобы изучить современные реализации HTML.
Проект HTML 5:
- Определяет единственный язык под названием HTML 5, который может быть записан в синтаксисе HTML и в синтаксисе XML.
-
Определяет детализированные модели обработки, чтобы способствовать совместимости реализаций.
- Улучшает разметку для документов.
Представляет разметку и API интерфейс для новых идиом, такие как веб-приложения.
HTML 5 - все еще проект. Спецификация html 5 до сих пор обсуждается в рабочей группе HTML и в списках рассылки WHATWG.
HTML 5 примеры
HTML 5 определяет синтаксис HTML, который является совместимым с HTML 4 и XHTML 1, но не является совместимым со скрытыми функциями SGML HTML4, таких как инструкции по обработке и сокращению разметки, поскольку они не поддерживаются большинством браузеров. Документы использующие синтаксис HTML почти всегда имеют MIME тип text/html. Спецификация HTML 5 также определяет детальный разбор правил (в том числе "обработку ошибок"). Браузеры должны использовать эти правила для MIME типа text/html.
Вот пример html 5 документа, который соответствует синтаксису HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример документа</title>
</head>
<body>
<p>Пример параграфа</p>
</body>
</html>
HTML 5 также определяет MIME тип text/html-sandboxed для документов с использованием синтаксиса HTML. Это может быть использовано при хостинге непроверенного контента.
Другой синтаксис, который может быть использован в HTML 5 - это XML. Этот синтаксис является совместимым с документами XHTML1 и его реализациями. Документы использующие такой синтаксис должны использовать MIME тип XML и элементы должны быть выстроены в соответствии со спецификацией XML (http://www.w3.org/1999/xhtml).
Ниже приведен пример документа, который соответствует синтаксису XML из HTML 5. Обратите внимание, что XML-документы должны иметь MIME тип XML, такой как application/xhtml+xml или application/xml.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример документа</title>
</head>
<body>
<p>Пример параграфа</p>
</body>
</html>
Кодировка символов в HTML 5
Для HTML синтаксиса в HTML 5 есть три способа установки кодировки:
- На транспортном уровне. При использовании HTTP заголовка Content-Type.
- Используя Unicode Byte Order Mark (BOM) символ в начале файла. Этот символ дает сигнатуру для кодировки.
- Используя meta элемент с атрибутом charset , который определяет кодировку в пределах первых 512 байтов документа. Например, <meta charset="UTF-8"> может быть использован для указания кодировки UTF-8. Это заменяет необходимость в <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, хотя тот синтаксис все еще допускается.
Для синтаксиса XML необходимо использовать правила указанные в спецификации XML, чтобы установить кодировку символов.
DOCTYPE в HTML 5
HTML синтаксис в HTML 5 требует, чтобы DOCTYPE был определен, чтобы гарантировать, что браузер представляет страницу в режиме стандартов. DOCTYPE не имеет никакой другой цели и поэтому является дополнительным для XML. Документы XML всегда обрабатываются в режиме стандартов.
MathML и SVG
HTML синтаксис в HTML 5 позволяет MathML и SVG элементы, которые будут использоваться в документе. Например, очень простой документ, используя некоторые из минимальных особенностей синтаксиса может выглядеть следующим образом:
<!doctype html>
<title>SVG в text/html</title>
<p>
Зеленый круг:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
Более сложные комбинации также возможны.
Новые элементы в HTML 5
Следующие элементы были введены для улучшения структуры:
section - представляет собой универсальный раздел документа или раздел. Он может использоваться вместе с H1, H2, H3, H4, H5 и H6 элементами для обозначения структуры документа.
<section>
<h1>Заголовок 1</h1>
<p>Парагаф 1</p>
</section>
<section>
<h1>Заголовок 2</h1>
<p>Параграф 2</p>
</section>
article - представляет самостоятельную часть контента документа, такого как запись в блоге или газетная статья.
<body>
<header>
<h1>Заголовок 1</h1>
</header>
<article>
Пример записи
</article>
aside - представляет часть контента, который только немного связан с остальной частью страницы.
<aside>
<h1>Страна</h1>
<p>Справка о стране</p>
</aside>
hgroup - представляет заголовок раздела.
<hgroup>
<h1>Заголовк раздела</h1>
<h2>Заголовок раздела</h2>
</hgroup>
footer - представляет нижний колонтитул для раздела и может содержать информацию об авторе, информацию об авторском праве и так далее.
<FOOTER> <!-- нижний колонтитул сайта -->
<NAV>
ссылка навигации 1
...
ссылка навигации N
</NAV>
<P>Copyright © Авторские права</P>
</FOOTER>
nav - представляет раздел документа, предназначенного для навигации.
<nav>
<h1>Навигация</h1>
<ul>
<li>ссылка навигации 1</li>
...
<li>ссылка навигации N</li>
</ul>
</nav>
figure - представляет часть автономного контента, на который обычно ссылаются как единый блок в основном документе.
<figure>
<video src="ogg"></video>
<figcaption>Пример</figcaption>
</figure>
figcaption - может использоваться в качестве заголовка (это необязательно).
video и audio для мультимедийного контента. Оба обеспечивают API, таким образом, авторы приложения могут написать сценарий своего собственного пользовательского интерфейса, но есть также способ инициировать пользовательский интерфейс, обеспеченный браузером. Элемент source используется вместе с этими элементами, если есть несколько потоков имеющие различный тип.
embed - используется для контента plugin'ов.
mark - представляет фрагмента текста в одном документе, отмеченном или выделенное для справочных целей, из-за своей уместности и в другом контексте.
progress - представляет завершение задачи, такой как загрузка или при выполнении ряда ресурсоемких операций.
<section>
<h2>Прогресс бар</h2>
<p>Выполнено: <progress id="p" max=100><span>0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</section>
meter - представляет измерения, такое как использование диска.
time - представляет дату и/или время.
ruby, rt и rp позволяют для разметки Ruby аннотаций.
bdi - представляет промежуток текста, который должен быть изолирован от его среды в целях двунаправленного форматирования текста.
wbr - представляет возможность разрыва строки.
canvas - используется для того, чтобы представить динамическую растровую графику на лету, такую как графики или игры.
command - представляет команду, которую может вызвать пользователь.
details - представляет дополнительную информацию или средства управления, которые пользователь может получить по требованию. Элемент summary обеспечивает свою сводку, легенду или заголовок.
datalist - вместе с новым атрибутом list для input может использоваться, чтобы сделать поля комбинированного списка:
<input list="browsers">
<datalist id="browsers">
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
keygen -используется для управления пары ключей.
output - представляет некоторый тип вывода, такой как от вычисления, сделанного посредством сценариев.
Элемент input атрибут type получил следующие новые значения:
- tel
- search
- url
- email
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
Идея этих новых типов состоит в том, что браузер пользователя может обеспечить пользовательский интерфейс, такой как средство выбора календарной даты или интеграция с адресной книгой пользователя, и представить определенный формат серверу. Пользователь получает лучшее впечатление поскольку его ввод проверен перед отправкой на сервер, что означает меньшее время ожидания ответа от сервера.
Новые атрибуты в HTML 5
Спецификация HTML 5 ввела ряд новых атрибутов для различных элементов, которые уже были частью HTML4:
Несколько атрибутов от HTML4 теперь применяются ко всем элементам. Их называют глобальными атрибутами: class, dir, id, lang, style, tabindex и title.
Есть также несколько новых глобальных атрибутов:
- атрибут contenteditable указывает, что элемент - доступная для редактирования область. Пользователь может изменить содержимое элемента и управлять разметкой.
- атрибут contextmenu может использоваться, чтобы указать на контекстное меню, представленное разработчиком.
- data-* набор определенных разработчиком атрибутов. Разработчики могут определить любой атрибут, который они хотят, пока они его снабжают префиксом data-, чтобы избежать коллизий с будущими версиями HTML. Единственное требование к этим атрибутам - то, что они не используются для расширений браузеров.
- draggable и dropzone атрибуты могут использоваться вместе с новым drag & drop API.
- hidden указывает, что элемент пока/еще или больше не актуален.
- role и aria-* атрибуты коллекции, которые могут использоваться для указания вспомогательных технологий.
- атрибут spellcheck позволяет вывод подсказок, может быть использован для проверки орфографии.
HTML 5 также делает все атрибуты обработчика событий от HTML4, которые принимают форму onevent-name, глобальными атрибутами и добавляет несколько новых обработчиков событий атрибутов для новых событий, которые он определяет. Например событие play , которое используется API для медиа-элементов (video и audio).
Измененные элементы HTML 5
Эти элементы немного изменили свои значения в HTML 5, чтобы лучше отразить, как они используются в Интернете или для того что бы сделать их более полезными:
- Элемент a без атрибута href в настоящее время представляет собой заглушку. Это может также содержать поточный контент, а не ограничиваться содержимым фразы.
- Элемент address теперь имеет ограничение области действия в соостветствии с новый концепцией секционирования.
- Элемент b теперь представляет промежуток текста, который будет стилистически смещен от нормальной прозы, не передавая дополнительной важности, такой как ключевые слова в кратком обзоре документа, названия продукта в обзоре или другие промежутки текста.
- Элемент cite теперь исключительно представляет заголовок работы (например, книга, газета, эссе, стихотворение, счет, песня, сценарий, фильм, сериал, игра, скульптура, рисование, театральное производство, игра, опера, мюзикл, выставка, отчет судебного дела, и т.д.). Именно в примере HTML4, где он используется для обозначения имени человека больше не считается соответствующим.
- Элемент hr теперь представляет тематический разрыв на уровне абзаца.
- Элемент i теперь представляет промежуток текста с альтернативной речью или настроением, или смещенный от нормальной прозы, такой как таксономическое обозначение, технический термин, идиоматическая фраза с другого языка, мысли, имени поставки, или некоторой другой прозы, типичное типографское представление которой выделено курсивом. Использование значительно различается в зависимости от языка.
- Для элемента label браузер больше не должен перемещать фокус от метки до элемента управления, если такое поведение не является стандартным для базового пользовательского интерфейса платформы.
- Элемент menu переопределен, чтобы быть полезным для панелей инструментов и контекстных меню.
- Элемент s теперь представляет содержание, которое больше не точно или больше релевантно.
- Элемент small теперь представляет мелкий шрифт (для комментариев стороны и правовой печати).
- Элемент strong теперь представляет важность, а не сильный акцент.
- Элемент head больше не позволяет элемент object как дочерний.
Измененные атрибуты HTML 5
Атрибут type на script и style больше не требуется, если язык сценария ECMAScript и язык стилей CSS соответственно.
Следующие атрибуты допускаются, но разработчикам не рекомендуется использовать их и вместо этого настоятельно рекомендуется использовать альтернативные решения:
- Атрибут border на img. Если существует, обязан иметь значение "0". Разработчики могут использовать вместо него CSS.
- Атрибут language на script. Когда существует, ообязан иметь значение"JavaScript" (нечувствительный к регистру), и не может конфликтовать с атрибутом type. Разработчики могут просто опустить его, поскольку у этого атрибта нет никакой полезной функции.
- Атрибут name на a. Разработчики могут использовать атрибут id вместо этого.
- Атрибут summary на table. Спецификация HTML 5 определяет несколько альтернативных решений.
Отмененные элементы HTML 5
Элементы в этом разделе не должны использоваться разработчиками. Браузеры по-прежнему должны их поддерживать и, каким образом, определить различные разделы в HTML 5. Например, устаревший элемент isindex должен быть обработан разделом синтаксического анализатора.
Следующие элементы не входят в спецификацию HTML 5, потому что их эффект является чисто презентационным, и их функции лучше обрабатываются CSS:
- basefont
- big
- center
- font
- strike
- tt
- u
Следующие элементы не входят в спецификацию HTML 5, поскольку их использование причиняет ущерб удобства и доступности для пользователя:
Следующие элементы не входят в спецификацию HTML 5, поскольку они часто не использовались, создавали путаницу или их функции могут быть обработаны с помощью других элементов:
- acronym более не используется, потому что это создавало много беспорядка. Разработчики должны использовать abbr для сокращений.
- applet устарел в пользу object.
- isindex использование может быть заменено использованием средств управления формой.
- dir устарел в пользу ul.
И наконец элемент noscript соответствует только синтаксису HTML 5, но не соответствует синтаксису XML, поскольку его использование полагается на синтаксический анализатор HTML.
Отмененные атрибуты HTML 5
Некоторые атрибуты из HTML4 больше не допустимы в HTML 5.
- accesskey для a, area, button, input, label, legend и textarea
- rev и charset для link и a
- shape и coords для a
- longdesc для img и iframe
- target для link
- nohref для area
- profile для head
- version для map, img, object, form, iframe, a
- scheme для meta
- archive, classid, codebase, codetype, declare и standby для object
- valuetype и type для param
- charset и language для script
- summary для table
- headers, axis и abbr для td и th
- scope для td
Кроме того, в HTML 5 нет ни одного из представляемых атрибутов, которые были в HTML4, поскольку их функции лучше обрабатываются CSS:
- align для caption, iframe, img, input, object, legend, table, hr, div, h1-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr и body
- alink, link, text и vlink для body
- background для body
- bgcolor для table, tr, td, th и body
- border для table, img и object
- cellpadding и cellspacing для table
- char и charoff для col, colgroup, tbody, td, tfoot, th, thead и tr
- clear для br
- compact для menu, ol и ul
- frame на table
- frameborder приписывают на iframe
- height для iframe, td и th
- hspace и vspace для img и object
- marginheight, marginwidth и scrolling для iframe
- noshade для hr
- nowrap для td и th
- rules для table
- size для hr, input и select
- style для всех элементов
- type для li, ol и ul
- valign для col, colgroup, tbody, td, tfoot, th, thead и tr
- width для hr, table, td, th, col, colgroup, iframe и pre
^^вверх^^ |
