Все записи автора Андрей Семенов

Тег header — заголовок документа

Новые теги HTML5

header элемент представляет группу вводных или навигационных средств.

Note: header элемент предназначен обычно для включения названия раздела (h1 - h6 элемент или hgroup  элемент), но это не требуется. header  элемент также может быть использован для упаковки таблицы разделяемого содержания, формы поиска, или любых логотипов.

Вот некоторые примеры заголовков. Это первая для игры:

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

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

<header>
 <hgroup>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <h2>W3C Working Draft 27 October 2004</h2>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>
Note: header элемент не вводит новый раздел.

В этом примере страница имеет заголовок страницы в виде h1 элемента и два подраздела  в виде h2 элементов. Содержание после header  элемента все еще является частью последнего пункта начатого в header элементе, потому что header  элемент не принимает участие в схеме алгоритма.

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

Тэг footer — нижний колонтитул

Новые теги HTML5

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

Note: Контактную информацию автора или редактора раздела помещают в тег address, возможно, сам footer.

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

Note: footer элемент не вводит новый раздел.

Вот страница с двумя нижними колонтитулами, один вверху и один внизу, с тем же содержанием:

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

Вот пример, который показывает как footer используется для веб-узла в целом и для статьи отдельно.

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a K?f.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

Некоторые дизайны сайтов включают то, что иногда называют «жирные нижние колонтитулы» — подвалы, которые содержат большое количество материалов, включая изображения, ссылки на другие статьи, ссылки на страницы для отправки обратной связи, специальные предложения… В некотором роде исполняя роль «главной страницы» в подвале.

В этом фрагменте показан низ страницы на сайте с «жирным подвалом»:

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/1">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

Тег command — команда пользователя

Новые теги HTML5

Тег command — команда пользователя

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

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

Тег command, который использует type, label, icon, disabled, checked, radiogroup, и title атрибуты определяет новую команду. Тег command, который использует атрибут command определяет команду со ссылкой на другой тег. Это позволяет авторам определить команду один раз, и установить его состояние (например, является ли он active или disabled) в одном месте, и все ссылки на эту команду пользовательского интерфейса, изменятся одновременно.

Атрибут type указывает на тип команды: это либо нормальная команда связанная с действием либо состояния или опции, которые могут быть переключены, либо выбор одного элемента из списка элементов.

Атрибут является перечислимым типом с тремя ключевыми словами, т. е. состояниями. Ключевое слово «command» сопоставляется нормальной команде, ключевое слово «checkbox» соответствует состоянию, когда опции или состояния могут быть переключены и «radio» соответствует выбору одного элемента из списка. Отсутствующее значение атрибута — по умолчанию командный режим.

  • Командный режим — Элемент представляет собой нормальную команду связаную с действием.
  • Checkbox — Элемент представляет собой состояния или опции, которые могут быть отключены.
  • Radio — Элемент представляет собой выбор одного элемента из списка элементов.

Атрибут label дает имя команды, которое будет показано пользователю. Атрибут должен быть определен и должен иметь значение — не пустая строка.

Атрибут title подсказывает описание команды, которое может быть показаны пользователю, чтобы помочь ему.

Атрибут icon дает рисунок, который представляет команда. Если атрибут указан, значение атрибута должно содержать корректный непустой URL потенциально окруженный пробелами. Для получения абсолютного URL иконки, когда значение атрибута не является пустой строкой, значение атрибута должно быть разрешено по отношению к элементу. Если атрибут отсутствует или его значение является пустой строкой, или разрешение его значения вызывает сбой — иконка не отображается.

Атрибут disable — логический атрибут, который, если он присутствует, указывает, что команда недоступна в текущем состоянии.

Note: Есть тонкое различие между disable и hidden. Команда может быть отключена, если в том же контексте, она может быть включена, если только некоторые аспекты ситуации были изменены. Команда будет отмечена как скрытая, если в этой ситуации, команда никогда не будет включена. Например, в контекстном меню для водопроводного крана, команда «открыт» может быть отключена, если кран уже открыт, но команда «съесть» будет отмечена как скрытая, так как кран никогда не может быть съеден.

Атрибут checked — логический атрибут, который, если он присутствует, указывает, что команда выбрана. Атрибут может быть применен, если атрибут type либо в состоянии checkbox, либо radio.

Атрибут radiogroup дает имя (label) для группы команд, которые будут переключаться, когда команда сама переключается, для команд, чей атрибут type имеет значение «radio«. Область действия этого имени — список дочерних элементов. Атрибут должен быть опущен, если атрибут type в radio состоянии.

Если тег command Раб имеет command атрибут и Раб находится в документе, то в документе присутствует элемент ID которого по значеню равно значению коммандного аттрибута раба и первый такой элемент в древе, в дальнейшем является мастером, сам себе назначает комманду, либо не является командным элементом, либо сам не имеет атрибута command, вот после всего этого «Master comand» Раба сам является мастером.

Вот пример панели инструментов с тремя кнопками, которая представляет пользователям команды выравнивания. Можно применить такую панель инструментов как часть редактора текста. На панели инструментов также за сепаратором hr есть кнопка, «Publish», хотя эта кнопка — инвалиды.

<menu type="toolbar">
 <command type="radio" radiogroup="alignment" checked="checked"
          label="Left" icon="icons/alL.png" onclick="setAlign('left')">
 <command type="radio" radiogroup="alignment"
          label="Center" icon="icons/alC.png" onclick="setAlign('center')">
 <command type="radio" radiogroup="alignment"
          label="Right" icon="icons/alR.png" onclick="setAlign('right')">
 <hr>
 <command type="command" disabled
          label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>

Теги details и summary

Новые теги HTML5

Теги details и summary

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

Note: Тег details не подходит для сносок. Пожалуйста, обратитесь к разделу примечаний для получения подробностей о том, как помечать сноски.

Тег summary представляет собой резюме, заголовок, или легенда для остального содержания родительского элемента details, если таковой имеется.

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

Остальное содержимое элемента представляет дополнительную информацию или элементы управления.

Атрибут open boolean типа (логический). Если он присутствует, то это означает, что резюме и дополнительная информация должны быть показана пользователю. Если этот атрибут отсутствует, то только резюме и требовалось показать.

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

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

В следующем примере показано как тег details используется, чтобы скрыть технические детали в докладе:

<section>
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
 <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
 <dl>
 <dt>Transfer rate:</dt> <dd>452KB/s</dd>
 <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
 <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
 <dt>Duration:</dt> <dd>01:16:27</dd>
 <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
 <dt>Dimensions:</dt> <dd>320?240</dd>
 </dl>
 </details>
</section>

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

<details>
 <summary><label for=fn>Name & Extension:</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details>

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

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

Поскольку атрибут open добавляется и удаляется автоматически, когда пользователь взаимодействует с контролем, он может быть использован в CSS стилях элемента по-разному в зависимости от его состояния. Здесь стиль используется для анимации цвета резюме, если элемент будет открыт или закрыт:

<style>
 details > summary { transition: color 1s; color: black; }
 details[open] > summary { color: red; }
</style>
<details>
 <summary>Automated Status: Operational</summary>
 <p>Velocity: 12m/s</p>
 <p>Direction: North</p>
</details>

Теги figure и figcaption

Новые теги HTML5

Теги figure и figcaption

Тег figure представляет некоторый поток, возможно, с заголовком, который является самодостаточным и, как правило, ссылается как единое целое от основного потока документа.

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

Первый дочерний элемент тега figure тег figcaption, если таковой имеется, представляет заголовок, содержание элемента. Если нет дочернего элемента figcaption, то нет никакой подписи.

Этот пример показывает элемент figure для разметки кода:

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

а здесь мы видим применение элемента figure для разметки фотографии:

<figure>
 <img src="bubbles-work.jpeg"
 alt="Bubbles, sitting in his office chair, works on his
 latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>

В этом примере мы видим образ, который не является фигурой, а также изображения и видео, которое есть:

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

Здесь часть стихотворения отмечено, используя figure:

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

В этом примере, который может быть частью более крупной работы обсуждается замок, figure имеет три изображения в нем:

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
 alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
 alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
 alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

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

Новые теги HTML5

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 — врезка дополнительного контента.

Новые теги HTML5

Тег 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 — звук или аудио-поток в интернет-странице.

Новые теги HTML5

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

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

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

src

crossorigin

preload

autoplay

mediagroup

loop

muted

controls

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

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

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

Новые теги HTML5

Тег 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 — явное указание направления письма.

Новые теги HTML5

Тег 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 в конце элемента.