HTML5 Новые теги, поддержка браузерами p.2

<mark>текст</mark>

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Пример

 

 

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>mark</title>
  <style>
   mark {
    background: #ffec82;
    padding: 0 3px;
    border: 1px dashed #333;
   }
  </style>
 </head>
 <body>
  <header>
    <h1>Следы невиданных зверей</h1>
  </header>
  <article>
    История о том, как возле столовой появились загадочные розовые
    следы с <mark>шестью пальцами</mark>, и почему это случилось.
  </article>
 </body>
</html>

 

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <mark>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору MARK.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

 

<menu>
...
</menu>

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Атрибуты


label - Устанавливает видимую метку для меню.
type - Задает тип меню.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <p><strong>В этом выпуске:</strong></p>
  <menu>
   <li>Русская кухня. Уха бурлацкая</li>
   <li>Украинская кухня. Вареники</li>
   <li>Молдавская кухня. Паприкаш</li>
   <li>Кавказская кухня. Суп-харчо</li>
   <li>Прибалтийская кухня. Вертиняй</li>
  </menu>
 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег MENU</title>
 </head>
 <body>
  <menu type="toolbar">
   <li>
    <menu label="Файл">
      <button type="button">Новый...</button>
      <button type="button">Открыть...</button>
      <button type="button">Сохранить</button>
    </menu>
   </li>
   <li>
     <menu label="Правка">
      <button type="button">Копировать</button>
      <button type="button">Вырезать</button>
      <button type="button">Вставить</button>
     </menu>
    </li>
  </menu>
 </body>
</html>

Браузеры

Поддерживают полностью.

 

<meter value="значение">текст</meter>

Используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.

Атрибуты


value - Устанавливает значение. Обязательный атрибут.
min - Задает минимально возможное значение.
max - Задает максимально возможное значение.
low - Определяет предел, при достижении которого значение считается низким.
high - Определяет предел, при достижении которого значение считается высоким.
optimum - Определяет наилучшее или оптимальное значение.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>meter</title>
 </head>
 <body>
  <p>Температура воды</p>
  <meter value="0" max="100" low="10" high="60">Низкая</meter>
  <meter value="30" max="100" low="10" high="60">Нормальная</meter>
  <meter value="80" max="100" low="10" high="60">Горячая</meter>
  <meter value="100" max="100">Кипяток</meter>
 </body>
</html>

Браузеры

Браузеры, которые поддерживают тег <meter>, отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри тега <meter>.

 

Internet Explorer -

Chrome 10.0-13.0

Opera 11.0

Safari -

Firefox -

 

<nav>ссылки</nav>

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head> 
 <body>
  <header>
    <h1>Чебурашка и крокодил Гена</h1>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h2>Добро пожаловать!</h2>
  </article>
 </body> 
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

<output>
</output>

Определяет область в которую выводится информация, преимущественно с помощью скриптов.

Атрибуты


for - Определяет идентификатор одного и более элементов для связывания с тегом <output>.
form - Задает имя формы, которой принадлежит область для вывода.
name - Задает уникальное имя элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>output</title>
 </head>
 <body>
  <form>
   <p>Введите длину в сантиметрах: <input type="number" name="cm" autofocus="autofocus" /></p>
   <p>Длина в дюймах: <output name="result" 
      onforminput="this.value=(this.form.cm.value/2.54).toFixed(2)">0</output></p>
  </form>
 </body>
</html>

Браузеры

 

Internet Explorer -

Chrome -

Opera 9.6-11.0

Safari -

Firefox -

 

<progress value="<число>" max="<число>">
Текст
</progress>

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Атрибуты


value - Текущее значение прогресса.
max - Максимальное значение прогресса.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>progress</title>
 </head> 
 <body>
  <p>Пожалуйста, подождите, фотографии загружаются.</p>
  <progress max="100" value="25">
    Загружено на <span id="value">25</span>%
  </progress>
 </body>
</html>

 

Браузеры

Internet Explorer -

Chrome 10.0-13.0

Opera 11.0

Safari -

Firefox 6.0-7.0

<ruby>
текст
<rp>текст</rp><rt>аннотация</rt><rp>текст</rp>
</ruby>

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rt>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>rp</title>
 </head> 
 <body>
  <p>
   <ruby>
    字 <rp>(</rp><rt>zì</rt><rp>)</rp>
   </ruby>
  </p>
 </body>
</html>

 

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

 

<ruby>
текст
<rt>аннотация</rt>
</ruby>

Тег <rt> добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>rt</title>
  <style>
   .date { font-size: 1.5em; }
   .date ruby { background: #0078c9; color: #fff; }
   .date rt { background: #a0dae8; color: #000; padding: 2px; }
  </style>
 </head> 
 <body>
  <p class="date">
   <ruby>
    23<rt>ноябрь</rt></ruby>
  </p>
 </body>
</html>

 

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

 

<ruby>
текст
<rt>аннотация</rt>
</ruby>

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

Сам тег <ruby> выступает контейнером для тега <rt>, он и формирует аннотацию к тексту, после которого идет; а также <rp>, этот тег предназначен для браузеров, которые не поддерживают <ruby>.

Название тега происходит от слова «рубин», которым в типографии обозначается небольшой шрифт.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ruby</title>
  <style>
   p:lang(zh-CN) {
    font-size: 2em;
   }
  </style>
 </head> 
 <body>
  <p lang="zh-CN">
   <ruby>
    汉<rt>hàn</rt>
    字<rt>zì</rt>
   </ruby>
  </p>
 </body>
</html>

 

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

Браузеры, которые не поддерживают этот тег, отобразят текст рядом по горизонтали и без изменения его размеров.

<section>
</section>

Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Допускается вкладывать один тег <section> внутрь другого.

Атрибуты


cite - Адрес раздела, если он берется с другого сайта

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section</title>
 </head> 
 <body>
  <section>
   <h1>Съёмки фильма Полипропилен</h1>
   <p>История о том, как снимали фильм, где герои отдыхали на пляже, 
   потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, 
   и что из этого получилось.</p>
  </section>
  <section>
   <h1>Хороший язык</h1>
   <p>История о том, как проходила студия изучения языка эсперанто, 
   в то время, как над ней, на веранде велась студия приколистов, 
   где травились анекдоты, и что из этого получилось.</p>
  </section>
 </body>
</html>

 

Браузеры

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0


Internet Explorer до версии 8.0 включительно игнорирует тег <section>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору SECTION.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

 

<audio>
<source src="URL">
</audio>
<video>
<source src="URL">
</video>

Атрибуты


media - Определяет устройство, для которого будет воспроизводиться файл.
src - Адрес файла.
type - MIME-тип медийного источника.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>source</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

 

 

Браузеры

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 11.0

Safari 3.1-5.0

Firefox 4.0-6.0

 

<details>
<summary>Текст</summary>
</details>

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации. Тег <summary> должен идти первым внутри <details>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>summary</title>
 </head> 
 <body>
  <details>
   <summary>Информация об авторе</summary>
   <p>Бендер Родригез</p>
  </details>
 </body> 
</html>

 

Браузеры

Internet Explorer -

Chrome 12.0-13.0

Opera -

Safari -

Firefox -

 

<time>дата и время</time>
<time datetime="<дата и время>">текст</time>

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Атрибуты


datetime - Задает дату, время или оба значения для текста.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>time</title>
  <style>
   time { background: #f0f0f0; }
  </style>
 </head> 
 <body>
  <article>
   <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
   <p><time>1960-08-19</time> первый полет собак в космос.</p>
   <p><time>1961-04-12</time> первый полет человека в космос.</p>
   <p><time>1963-06-16</time> первый полет женщины-космонавта.</p>
   <p><time>1969-07-21</time> высадка человека на Луну.</p>
  </article>
 </body> 
</html>

Браузеры

Браузеры, которые не поддерживают тег <time> отображает его содержимое. Браузеры с поддержкой тега могут устанавливать для элемента стилевое оформление.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

<video>
<source src="URL">
 </video>

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в таблице.

Аудио кодеки/Браузеры Internet Explorer Chrome Opera Safari Firefox
ogg/vorbis - + + - +
wav /p - - + + +
mp3 + + - + -
AAC + + - + -

 

Видео кодеки/Браузеры Internet Explorer Chrome Opera Safari Firefox
ogg/theora - + + - +
H.264 + + - + -
WebM - + + - +

 

Атрибуты


autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.
controls - Добавляет панель управления к видеоролику.
height - Задает высоту области для воспроизведения видеоролика.
loop - Повторяет воспроизведение видео с начала после его завершения.
poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится.
preload - Используется для загрузки видео вместе с загрузкой веб-страницы.
src - Указывает путь к воспроизводимому видеоролику.
width - Задает ширину области для воспроизведения видеоролика.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

 

 

Браузеры

 Firefox поддерживает кодек WebM начиная с версии 4.0.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 10.50-11.0

Safari 3.1-5.0

Firefox 4.0-6.0

 

Текст<wbr>текст

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег WBR</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <p>Самое длинное слово из химии</p>
  <p class="word">метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
 </body>
</html>

 

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса &shy;.

Internet Explorer 8 и Opera не делают переносы длинной строки, пока в стилях для WBR не указано свойство display со значением inline-block, как показано в примере.

Internet Explorer 6.0-9.0 (8.0 возможны баги)

Chrome 10.0-13.0

Opera 9.6-11.0 (возможны баги)

Safari 3.1-5.0

Firefox 3.0-6.0

 

Информация взята с htmlbook.ru

 

test