Архив рубрики: Новые теги HTML5

Тэг article — статья в web-документе

article — статья в web-документе

Тег article — это автономный элемент в составе документа, страницы, приложения или сайта. Это может быть пост форума, статья журнала или газеты, запись в блоге, комментарий пользователя , интерактивный виджет или гаджет, или любой другой независимый элемент.

Когда article элементы вложены, внутренние теги article представляют собой статьи, которые, в принципе, связанные с содержанием внешней статьи. Например, запись в блоге на сайте, который принимает замечания пользователей в виде комментариев, article элементов, вложенных в article элемент для записи в блоге.

Автор информации, связанной с article элементом (см. в глоссарии тег address) не распространяется на вложенные теги article.

Этот пример показывает блог c использованием тега article, с некоторыми schema.org аннотациями:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
 <h1 itemprop="headline">The Very First Rule of Life</h1>
 <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
 <link itemprop="url" href="?comments=0">
 </header>[
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
 <footer>
 <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

Вот в том же блоге показаны некоторые комментарии:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
 <h1 itemprop="headline">The Very First Rule of Life</h1>
 <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
 <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
 <section>
 <h1>Comments</h1>
 <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
 <link itemprop="url" href="#c1">
 <footer>
 <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
 <span itemprop="name">George Washington</span>
 </span></p>
 <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
 </footer>
 <p>Yeah! Especially when talking about your lobbyist friends!</p>
 </article>
 <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
 <link itemprop="url" href="#c2">
 <footer>
 <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
 <span itemprop="name">George Hammond</span>
 </span></p>
 <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
 </footer>
 <p>Hey, you have the same first name as me.</p>
 </article>
 </section>
</article>

Обратите внимание на использование тега footer, чтобы дать информацию для каждого комментария (например, кто его написал и когда). Тег footer может находиться в начале своего участка в случае необходимости, например, в этом случае. (Использование header в этом случае было бы неправильно, но в принципе это вопрос авторских предпочтений.)

Тег aside — врезка дополнительного контента.

Тег aside — врезка дополнительного контента.

Тег aside представляет раздел страницы, который состоит из контента имеющего косвенное отношение к содержанию всего остального содержания страницы. Такие участки часто представлены в виде врезки в печатной типографии.

Элемент может быть использован для типографских эффектов, таких как цитаты или боковые панели, для рекламы, для группы навигационных элементов, и для другого контента, который считается отдельно от основного содержания страницы.

Note: Это нецелесообразно использовать теги aside только для вставки побочных материалов, ведь они являются частью основного потока документа.

Следующий пример показывает, как aside применяется для разметки справочных материалов по Швейцарии на Европейской ленте новостей.

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>
Следующий пример показывает, как aside применяется для разметки цитаты в большой статье. 
...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
 <q> People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. </q>
</aside>
 <p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...

Следующий отрывок показывает, как aside может быть использован для анонсирования статей блога и другого контента:

<body>
 <header>
 <h1>My wonderful blog</h1>
 <p>My tagline</p>
 </header>
 <aside>
<!-- this aside contains two sections that are tangentially related
 to the page, namely, links to other blogs, and links to blog posts
 from this blog -->
 <nav>
 <h1>My blogroll</h1>
 <ul>
 <li><a href="http://blog.example.com/">Example Blog</a>
 </ul>
 </nav>
 <nav>
 <h1>Archives</h1>
 <ol reversed>
 <li><a href="/last-post">My last post</a>
 <li><a href="/first-post">My first post</a>
 </ol>
 </nav>
 </aside>
 <aside>
<!-- this aside is tangentially related to the page also, it
 contains twitter messages from the blog author -->
 <h1>Twitter Feed</h1>
 <blockquote cite="http://twitter.example.net/t31351234">
 I'm on vacation, writing my blog.
 </blockquote>
 <blockquote cite="http://twitter.example.net/t31219752">
 I'm going to go on vacation soon.
 </blockquote>
 </aside>
 <article>
<!-- this is a blog post -->
 <h1>My last post</h1>
 <p>This is my last post.</p>
 <footer>
 <p><a href="/last-post" rel=bookmark>Permalink</a>
 </footer>
 </article>
 <article>
<!-- this is also a blog post -->
 <h1>My first post</h1>
 <p>This is my first post.</p>
 <aside>
<!-- this aside is about the blog post, since it's inside the
 <article> element; it would be wrong, for instance, to put the
 blogroll here, since the blogroll isn't really related to this post
 specifically, only to the page as a whole -->
 <h1>Posting</h1>
 <p>While I'm thinking about it, I wanted to say something about
 posting. Posting is fun!</p>
 </aside>
 <footer>
 <p><a href="/first-post" rel=bookmark>Permalink</a>
 </footer>
 </article>
 <footer>
 <nav>
 <a href="/archives">Archives</a> —
 <a href="/about">About me</a> —
 <a href="/copyright">Copyright</a>
 </nav>
 </footer>
</body>

Тег audio — звук или аудио-поток в интернет-странице.

Тег audio — звук или аудио-поток в интернет-странице.

Тег audio представляет звук или аудио-поток.

Глобальные атрибуты:

src

crossorigin

preload

autoplay

mediagroup

loop

muted

controls

Содержимое может быть предоставлено в теге audio. Агенты пользователей не должны показывать этого контента для пользователя, он предназначен для новых веб-браузеров, те же которые не поддерживают audio, могут использовать аудио-плагины, или показать текст для пользователей информируя их о том, как получить доступ к аудио контенту.

В частности, это содержание не предназначено для решения проблемы доступности. Для того, чтобы аудио контент был доступным для глухих или с другими физическими или когнитивными расстройствами, доступны различные функции. Это подписи или видео сурдоперевода. Видео элемент может быть использован вместо звукового элемента для воспроизведения аудио, что предоставляет пользователям визуальные альтернативы. Заголовок раздела может быть представлен для навигацией, используя track элемент и файл WebVTT. Естественно, протоколы или другие текстовые альтернативы могут быть предоставлена ввиде ссылки в тексте рядом с аудио элементом.

Тег bdi — оба направления текста в одном документе.

Тег bdi — оба направления текста в одном документе.

bdi элемент представляет отрывок текста, который должен быть изолирован от окружающей среды в целях двунаправленного форматирования текста.

Note: dir по умолчанию глобальный атрибут автоматически (он никогда не наследуется от родительского элемента, как с другими элементами).

Для целей применения двунаправленного алгоритма содержимое тега bdi агенты пользователей (ПА, броузеры) должны рассматривать как элемент пункта уровня контейнера.

Для целей применения алгоритма двунаправленного вывода в пункте уровня контейнера, bdi элемент должен рассматриваться как U + FFFC OBJECT REPLACEMENTCHARACTER (в том же порядке, что изображение или другой встроенный объект).

Требования по обращению с bdi элементом может быть реализовано косвенно, через стиль слоя. Например, HTML + CSS ПА сможет выполнить эти требования путем реализации преимущества CSS «Юникод-BIDI» .

Этот элемент особенно полезен при внедрении пользовательского контента с неизвестной направленностью.

В этом примере, имена отображаются вместе с числом сообщений, которые пользователь подал. Если бы bdi элементы не были использованы в имени пользователя арабский пользователь был бы введен в заблуждение (двунаправленный алгоритм может поставить двоеточие и номер «3″ рядом со словом «Пользователь», а не рядом со словом «сообщения»).

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>????</bdi>: 3 posts.
</ul>

Тег bdo — явное указание направления письма.

Тег bdo — явное указание направления письма.

bdo элемент представляет явную направленность текста. Это позволяет авторам изменить двунаправленный алгоритм Unicode, явно указав направление коррекции .

Авторы должны указать dir атрибут этого элемента со значением ltr указав тем самым на письмо слева-направо и значением rtl определяющем письмо cправа-налево.

Если dir атрибут элемента в RTL состоянии, то с целью соблюдения двунаправленного алгоритма, пользовательский агент должен действовать, как если бы встретил U+202 D LEFT-TO-RIGHT OVERRIDE символ юникод в начале элемента и U +202 C POP DIRECTIONAL FORMATTING в конце элемента.

Если dir атрибут элемента в LTR состоянии, то с целью соблюдения двунаправленного алгоритма, пользовательский агент должен действовать, как если бы встретил U+202 Е RIGHT-TO-LEFT OVERRIDE символ юникод в начале элемента и U +202 C POP DIRECTIONAL FORMATTING в конце элемента.

Тег canvas — растровый холст.

Тег canvas — растровый холст.

Тег canvas предоставляет растровый холст, который может быть использован для рендеринга графики, игровой графики и других визуальных образов на лету.

Авторы не должны использовать canvas элемент в документе, когда доступен более подходящий элемент. Например, нецелесообразно использовать canvas элемент для отображения заголовкa страницы: если желаемое представление заголовка должно быть размечено с использованием соответствующих элементов (как правило, h1), а затем с помощью стилей CSS и поддержкой таких технологий, как XBL.

Когда авторы используют тег canvas, они также должны отдавать контент который передает по существу ту же функцию или цель как и растровые изображения. Эти материалы могут быть размещены внутри canvas элемента. Контент canvas элемента, если таковой имеется, является резервным содержимым.

В интерактивных визуальных медиа средствах, если поддержка сценариев включена для canvas элемента он представляет встроенный контент, состоящий из динамически создаваемых изображений.

В неинтерактивных, статических визуальных средствах массовой информации, если canvas элемент был ранее отрисован (например, если страница была просмотрена в интерактивной визуальной среде и в настоящее время находится в печати, или если некоторые сценарии находятся в процессе отрисовки страницы), то canvas элемент представляет встроенный контент с текущим изображением и размером. В противном случае, элемент представляет свой резервный контент .

В не-визуальных средствах массовой информации, и в визуальных средствах массовой информации, с отключеной поддержкой сценариев для графического элемента или если поддержка canvas элементов была отключена, canvas элемент представляет резервный контент.

Когда canvas элемент представляет встроенный контент, пользователь может сосредоточиться на вложенном контенте (в резервном содержании). Если элемент находится в фокусе, он является объектом взаимодействия с клавиатурой (хотя сам элемент не виден). Это позволяет авторам сделать интерактивное полотно (холст) с клавиатурным доступом. Авторы должны иметь разметку один-к-одному в виде интерактивных регионов в резервном содержании. (Фокус не оказывает никакого влияния на события мыши.)

Графический элемент имеет два атрибута для управления размером пространства координат: width и height(ширина и высота). Эти атрибуты, когда указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. Правила для разбора целых неотрицательных должны быть использованы для получения их числовых значений. Если атрибут отсутствует, или если разбор его значений возвращает ошибку, то должно использоваться значение по умолчанию. width атрибут по умолчанию 300, а height атрибут по умолчанию до 150.

Новые атрибуты HTML5

Новые атрибуты

Некоторые атрибуты были введены в различные элементы, которые уже были частью HTML4:

  • a и area элементы теперь имеют атрибут media для соответствия link элемента. WHATWG HTML также имеют download и ping атрибуты.
  • Элемент area, для соответствия a и link элементам, теперь также имеет hreflang, type и rel атрибуты.
  • Элемент base теперь может иметь атрибут target, главным образом, для согласования с элементом a.(Это уже широко поддерживается.)
  • Элемент meta теперь имеет атрибут charset, что обеспечивает хороший способ указать кодировку документа.
  • Новый autofocus атрибут может быть указан для тэгов input (кроме случаев, когда атрибут typehidden), select, textarea и button. Он обеспечивает декларативный способ указания на активный элемент формы во время загрузки страницы. С помощью этой функции можно повысить эффективность работы пользователей.
  • Новый атрибут placeholder может быть указан для тэгов input и textarea. Он представляет собой намек предназначеный помочь пользователю при вводе данных.
    <input type=email placeholder="a@b.com">
  • Новый атрибут form для inputoutputselecttextareabuttonlabelobject и fieldset элементов управления позволяет связать их с формой. Эти элементы теперь можно разместить в любом месте на странице, а не только как потомков тэга form, и все еще ??быть связаными с формой.
    <label>Email:
          <input type=email form=foo name=email>
         </label>
        <form id=foo></form>
  • Новый атрибут require относится к input (кроме случаев, когда type атрибут hiddenimage или кнопка типа, таких как submit), select и textarea. Это означает, что пользователь должен заполнить значение для того, чтобы отправить форму. Для select, первый вариант элемента должен быть с пустым значением.
    <label>Color:
          <select name=color required>
           <option value="">Choose one
           <option>Red
           <option>Green
           <option>Blue
          </select></label>
  • fieldset элемент теперь имеет disabled атрибут, который отключает все дочерние элементы управления, а также атрибут name, который может быть использован для сценария доступа.
  • Тэг input имеет несколько новых атрибутов для указания ограничений: autocompleteminmaxmultiplepattern и step. Как упоминалось ранее он также имеет новый атрибут list, которые можно использовать вместе с datalist тэгом. Кроме того, в настоящее время width и height атрибуты, определяющие размеры изображения при использовании type = image.
  • Тэги input и textarea имеют новый атрибут dirname.
  • textarea элемент имеет два новых атрибута, maxlength и wrap, которые управляют максимальной длиной входных данных и представлением поведения при переносе строк, соответственно.
  • Тэг form получил NOVALIDATE атрибут, который может быть использован для отключения проверки формы перед отправкой (т.е. форма всегда может быть отправлена).
  • input и button элементы получили новые атрибуты formactionformenctypeformmethodformnovalidate и formtarget. Если они есть, они заменят собой actionenctypemethodnovalidate и target атрибуты тэга form.
  • Тэг menu имеет два новых атрибута: type и label. Они позволяют преобразовать элемент в меню, которые содержатся в типичных пользовательских интерфейсах, а также предоставление для контекстного меню в сочетании с глобальным contextmenu атрибутом.
  • Тэг style получил новый атрибут scope, который может быть использован для разрешения области видимости таблиц стилей.
  • Тэг script получил новый атрибут async, что влияет на загрузку и выполнение сценариев.
  • тэг html имеет новый атрибут manifest, который указывает на манифест приложения кэш используется в сочетании с API для автономных веб-приложений.
  • тэг link получил новый атрибут sizes. Он может быть использован в сочетании с icon, чтобы указать размер значка.Таким образом, указывая на иконки различных размеров.
  • Тэг ol получил новый атрибут reversed. Если он присутствует, это означает, что список идет в порядке убывания.
  • iframe элемент имеет три новых атрибутов sandboxseamless и srcdoc.
  • Тэг object получил новый атрибут typemustmatch который позволяет безопасно использовать вложение внешних ресурсов.
  • Тэг img новый атрибут crossorigin, чтобы использовать CORS в запросе, и если он окажется успешным, выдает данные изображения для чтения API canvas.

Некоторые атрибуты HTML4 теперь распространяется на все элементы. Это так называемые глобальные атрибуты: аccesskey, class, diridlangstyle, tabindex и title. Кроме того, XHTML 1.0 разрешает только XML:space на отдельные элементы, которые в настоящее время допускаются на все элементы в документах XHTML. Есть также несколько новых глобальных атрибутов:

  • сontenteditable атрибут указывает, что элемент является редактируемой областью. Пользователь может изменить содержимое элемента и манипулировать разметкой.
  • сontextmenu атрибут может использоваться, чтобы указать на контекстное меню, представленные автором.
  • data-* коллекция автора определенных атрибутов. Авторы могут определить любой атрибут какой захотят, с префиксом data-, чтобы избежать столкновения с будущими версиями HTML. Единственное требование этих атрибутов является то, что они не используются в расширениях пользовательского агента.
  • dragable и dropzone атрибуты могут быть использованы вместе с новой  API drag&drop.
  • hidden атрибут указывает, что элемента еще нет, или он не актуален.
  • role и area-* коллекция атрибутов, которые можно использовать для указания вспомогательных технологий.
  • spellcheck атрибут намекает может ли содержание  быть проверено на наличие орфографических ошибок или нет.
  • translate атрибут подсказывает переводчикам, что содержимое должно быть переведено.

HTML5 также использует все атрибуты обработчиков событий из HTML4,  и добавляет несколько новых обработчиков событий атрибутов для новых событий. Например, onplay обработчик события, которое используется API для элементов мультимедиа.

Язык HTML5

Этот раздел разделен на несколько подразделов, чтобы более наглядно
иллюстрировать какие различия существуют между HTML4 и HTML5

Новые элементы

Следующие элементы были введены для улучшения структуры:

  • section представляет собой общий документ или раздел приложения. Он может быть использован вместе с h1, h2, h3, h4, h5 и h6 элементами для обозначения структуры документа.
  • article представляет собой самостоятельную часть содержимого документа, например, в блоге или газетной статье.
  • aside представляет собой часть контента, который лишь немного связан с остальной частью страницы.
  • hgroup представляет заголовок раздела.
  • header представляет собой группу из вступительных или навигационных средств.
  • footer представляет собой подвал для раздела и может содержать информацию об авторе, информацию об авторских правах и т.д.
  • nav представляет раздел документа, предназначенный для навигации.
  • figure представляет собой часть автономного содержимого потока, как правило, ссылаются как единое целое с основным потоком документов.
     <figure> <video src="example.webm" controls></video> <figcaption>Example</figcaption> </figure> 

    figcaption может быть использован как заголовок (это по желанию).

Кроме того, есть ряд других новых элементов:

  • video и audio для мультимедийного контента. Оба предоставляют API поэтому применение Авторы сценария может их собственный пользовательский интерфейс, но есть способ, чтобы вызвать пользовательский интерфейс, предоставленный пользователем агента. source элементы используются вместе с этими элементами, если есть несколько потоков доступно различных типов.
  • track предоставляет текст треков для video элемент.
  • embed используется для вставки плагина.
  • mark представляет собой фрагмент текста в одном документе отмеченый и выделеный в справочных целях, в связи с его значимость в другом контексте.
  • progress представляет собой завершение задачи, например, загрузки или при выполнении ряда длительнотекущих операций.
  • meter представляет собой измерения, такие как использование дискового пространства.
  • time представляет собой дату и/или времени.
  • WHATWG HTML data, который позволяет интегрировать машиночитаемые значения.
  • rubyгt, и rp позволяют интегрировать разметки в ruby аннотации.
  • bdi представляет собой отрывок текста, который должен быть изолирован от окружающей среды в целях двунаправленного форматирования текста.
  • wbr представляет возможность разрыва строки.
  • canvas используется для предоставления динамической графики на лету, таких как графики или игры.
  • comand представляет собой команду, которую пользователь может вызвать.
  • 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 представляет определенный тип вывода.

Атрибут type элемента input теперь имеет следующие новые значения:

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Идеей этих новых типов является то, что агент пользователя может предоставить пользователю интерфейс, например, выбора календарной даты или интеграция с адресной книгой пользователя, и представить определенный формат на сервер.

Введение от W3C

Введение

HTML находится в непрерывной эволюции, так как она была введена в Интернете в начале 1990-х годов. Некоторые функции были введены в спецификациях, а другие были введены в версий программного обеспечения. В некоторых отношениях, реализации и практики авторы сошлись друг с другом и со спецификациями и стандартами, но в других отношениях, они разошлись.

HTML4 был представлен в виде рекомендации W3C в 1997 году. В то время как он продолжает служить в качестве приблизительного ориентира для многих основных особенностей HTML, она не дает достаточно информации для создания реализаций, которые взаимодействуют друг с другом и, что более важно, с критической массой развернутых web-приложений. То же самое касается XHTML1, который определяет XML-сериализацию для HTML4, и DOM Level 2 HTML, JavaScript, который определяет API-интерфейсы для HTML и XHTML. HTML5 призван заменить эти документы.

HTML5, как проект, отражает усилия, начатые в 2004 году для изучения современных реализаций HTML и web-приложений. В проекте:

  1. Определяет единый язык под называнием HTML, который может быть описаны в синтаксисе HTML и синтаксисе XML.
  2. Определяет подробные модели обработки способствующих совместимости реализаций.
  3. Улучшает разметку документов.
  4. Представляет разметки и API-интерфейсы для новых идиом, таких как веб-приложения.

Открытые вопросы

HTML5 еще проект. Содержание HTML5, а также содержание этого документа, которые зависят от HTML5, до сих пор обсуждается на рабочей группе HTML и WHATWG. Открытые вопросы, связанные с проектом HTML5.

Обратная совместимость

HTML5 определен таким образом, что он обратно совместим с тем, как ПА (пользовательские агенты, браузеры) обрабатывают контент. Чтобы сохранить авторский язык относительно простым для авторов, некоторые элементы и атрибуты, которые не включены, как это указано в других разделах этого документа, такие, как презентационные элементы, которые лучше решать с помощью CSS.

Агенты пользователей, однако, всегда будут поддерживать эти устаревшие элементы и атрибуты, и именно поэтому в спецификации HTML5 четко разделяются требования для авторов и пользователей средств. Например, это означает, что авторы не могут использовать ISINDEX или текст элемента, но ПА должны поддерживать их таким образом, совместимым с тем, как эти элементы должны вести себя для совместимости с развернутыми содержанием.

С HTML5 имеет отдельные требования соответствия для авторов и пользователей средств больше нет необходимости для обозначения черты «устарела».

Модель развития

Спецификации HTML5, не будет рассматриваться законченной по крайней мере две полные реализации спецификации. Наборы тестов будут использоваться для оценки полноты реализации. Этот подход отличается от предыдущих версий HTML, где окончательная спецификация, как правило, утверждаются комитетом, прежде чем на самом деле реализована.

Синтаксис

HTML5 определяет HTML-синтаксис, который совместим с HTML4 и XHTML1 документов, опубликованных в Интернете, но не совместима с более эзотерические SGML особенности HTML4, например, инструкции по обработке и сокращение разметки , как это не поддерживается большинством броузеров. Документы  HTML почти всегда отдаются с text/html типом.

HTML5 также определяет подробные правила разбора (в том числе «Обработка ошибок») для этого синтаксиса, который в значительной степени совместим с популярными реализациями. Агенты пользователей должны использовать эти правила для ресурсов, которые имеют text/html тип. Вот пример документа, соответствующего HTML синтаксису:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Пример документа </ title> </ HEAD> <body> пункт <p> Пример </ P> </ Body> </ Html>

Другой синтаксис, который может быть использован для HTML5 является XML. Этот синтаксис совместим с XHTML1 документов и реализации. Документы, используя следующий синтаксис необходимо отдавать с типом XML средствами массовой информации и элементы должны быть помещены в http://www.w3.org/1999/xhtml имен в соответствии с правилами, изложенными в XML-спецификаций. [XML]

Ниже приведен пример документа, соответствующего XML-синтаксису HTML5. Обратите внимание, что XML-документы должны быть поданы с типом XML-носителей, таких как application/XHTML + XML или application/XML.

<? XML-версия = "1.0" кодирования = "UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Пример документа </ title> </ HEAD> <body> пункт <p> Пример </ P> </ Body> </ Html>

Кодировка

Для HTML-синтаксиса HTML5 авторы имеют три способа настройки кодировки:

  • На транспортном уровне. При использовании HTTP Content-Type заголовка, например.
  • Использование Unicode Byte Order Mark (BOM) символ в начале файла. Этот символ представляет собой подпись в используемую кодировку.
  • Использование мета элемент с кодировкой атрибут, который определяет кодировку в течение первых 1024 байт документа. Например, <meta charset="UTF-8"> могут быть использованы для определения UTF-8 кодировке. Это заменяет необходимость <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> хотя этот синтаксис все еще ??разрешен.

Для XML-синтаксиса, авторы должны использовать правила, изложенные в XML-спецификаций, чтобы установить кодировку.

Doctype

HTML синтаксис HTML5 требует тип документа который должен быть указан для того, чтобы браузер отображал страницу в стандартном режиме. Тип документа не имеет другой цели, и, следовательно, обязателен для XML. Документы с типом XML СМИ всегда обрабатываются в стандартном режиме. [DOCTYPE]

DOCTYPE декларации <! DOCTYPE html> и без учета регистра в HTML синтаксисе. DOCTYPEs от предыдущих версий HTML были длиннее, потому что язык HTML был создан на SGML основе и, следовательно, требовал ссылку на DTD. В HTML5 это не так и типа документа необходимо лишь включить режим стандартов для документов, написанных с использованием HTML синтаксис. Обозреватели уже делают это для <! DOCTYPE HTML> .

MathML и SVG

HTML синтаксис HTML5 позволяет интегрировать MathML и SVG элементы, которые будут использоваться в документе. Например, очень простой документ, используя некоторые минимальные функции синтаксис может выглядеть следующим образом:

<! DOCTYPE html> <title> SVG в text/html документе </ title> <p> Зеленый круг: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </ SVG> </ P>

Более сложные комбинации также возможны.

Разное

Есть несколько других изменений синтаксиса достойных упоминания:

  • HTML теперь имеет встроенную поддержку для IRI, хотя они могут быть полностью использованы, если документ кодирован UTF-8 или UTF-16.
  • < и > имени ссылки на символы в настоящее время расширить до U +27 E8 и U +27 E9 вместо U +2329 и U +232, соответственно.

Вместо предисловия

Следуя своим непосредственным предшественникам HTML 4.01 и XHTML 1.1, HTML5 отвечает всем требованиям, для которых HTML и XHTML в основном используются во всемирной паутине. HTML5 также считается микстурой будущего с введёнными различными спецификациями, вместе с тем введёнными продуктами программного обеспечения, такими как веб-браузеры, установленными для использования в общей практике, а также исправления множества синтаксических ошибок, возникающих в существующих веб-документах. HTML5 — также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.

В HTML5 появляется множество синтаксических особенностей. Например, элементы <video><audio> и <canvas>, а также возможность использованияSVG. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам и API. Другие новые элементы, такие как<section><article><header> и <nav> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например, <a> <menu> и <cite> были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами.