Всякие полезности
Теги <figure> и <figcaption> приняты для разметки изображения на веб-странице. Нет, старый добрый <img> никуда не делся, но теперь устраняется досадное недоразумение, заключающееся в том, что рисунок и подпись к нему представляют два совершенно различных и не связанных по умолчанию элемента разметки. Теперь их можно поместить в один контейнер, не сдерживая форматирования в подписи, а само изображение может состоять из нескольких частей. Пример использования <figure>:
<figure>
<img src=”logo. png” alt=”HTML5 logo” />
<figcaption>
Логотип HTML5<br>
<a href=”Http://upload. wikimedia. org/wikipedia/commons/6/6e/HTML5-logo. svg”> Вариант в svg формате </a>
</figcaption>
</figure>
Тег <details> создан для отображения скрытого, а вернее разворачиваемого контента. Он представляет из себя простейший виджет-«аккордеон», конструкцию, обычно реализуемую на javaScript. Пример такой конструкции показан в листинге ниже:
<details>
<summary>Ccbmra по теме</summary>
<a href =”Http://whatwg. org/htm” >WHATWG</a><br>
<a href =”Http://www. w3.org/TR/html5” >W3C/HTML5</a><br>
<a href =”Http://dev. w3.org/html5/spec/” >Стандарты</a><br> </details> <details>
<summary open >Логотип</summary>
<img src = ”Http://upload. wikimedia. org/wikipedia/commons/thumb/6/6e/HTML5-Logo. svg/120px-HTML5-logo. svg. png’ />
</details>
<details>
<summary>Описание</summary>
Введение в HTML5<br>
<details>
<summary>Новые теги</summary>
Article<br>
Aside<br>
Audio<br>
Canvas<br>
Command<br>
Details<br>
<details>
Geolocation API<br>
</details>
Результат можно видеть на рис. 8. Элемент <summary> — еще один новый тег, он используется для задания заголовка содержимому details. Булевый атрибут open отвечает за начальное раскрытое по-
Рис. 8. Работа элементов details и summary
Ложение «аккордеона». Из примера видно, что внутри контейнера можно использовать различного рода содержимое, а теги <details> могут быть вложены друг в друга.
Использование тега <embed> для flash-контента практиковалось давно, правда, не совсем правомерно. Теперь это легализовано — этот элемент в HTML5 служит для представления содержимого нативно не поддерживаемых браузером форматов, обычно требующих установки дополнительных плагинов. Адрес такого плагина уточняется значением необязательного атрибута р luginspage:
<embed src= ”stray_cats. swf” width=”200” height=”100”
Type=”application/x-shockwave-flash”
Pluginspage=”Http://www. macromedia. com/go/getflashplayer”>
Тег p menu>, строго говоря, не нов — он присутствовал ранее в спецификации HTML, но в четвертой версии был признан устаревшим, уступив место списку (<lu>). Теперь он получил новую жизнь и используется совместно с новым тегом — <command>, создающим команду в виде переключателя, флажка или обычной кнопки:
<menu>
<command onclick=”alert(‘Старт’)” label=”Старт”>Старт</command>
<command onclick="alert(‘CTon’)" label="CTon">CTon</command> <command onclick="alert(‘nay3a’)" label="nay3a">nay3a</command> </menu>
К сожалению, эта конструкция работает только в браузере Internet Explorer 9.0. Следующий новый элемент, <mark>, поддерживается всеми, и его полезность, в отличие от предыдущего, не вызывает вопросов. Он предназначен для выделения фрагмента текста:
Поддерживается <mark>BceMn</mark> и его полезность
В общем случае такое обрамление не должно никак проявляться внешне, предоставив менять свой вид и поведение JavaScript и CSS, но в браузерах Google Chrome и Mozilla Firefox такие фрагменты подсвечены желтым фоном. Должно быть, на всякий случай.
Еще один полезный элемент, <ruby>, в русскоязычном сегменте Сети вряд ли будет сильно востребован. Но современный мир со страшной скоростью глобализуется, и ко всему надо быть готовым. Вообще, тег предназначен для добавления небольшой аннотации сверху (как правило) от нужного текста. Сам элемент обрамляет анотируемый текст (обычно один или два символа) и контейнер <tr></tr>, содержащий саму аннотацию. Зачем это все нужно? В русском языке незачем, а вот в японском есть такое понятие, как фуригана — фонетические подсказки, поясняющие произношение. Выглядит это так:
<p lang="zh-CN">
<ruby>
<rt>han</rt>
<rt>zi </rt>
<rt>tokyo</rt><rp>tokyo</rp>
</ruby>
</p>
Результат — на рис. 9.
Необязательный тег <rp> показывает текст, отображаемый браузером в случае отсутствия поддержки <ruby>.
Наконец, последний новый тег общего назначения — <wbr>. Он несет довольно простую функциональность — указывает браузеру место, где допускается делать перенос строки в тексте, если тот не помещается в родительском элементе.
Рис. 9. Загадочная фуригана
На этом с новыми тегами HTML5 мы закончили. Правда, осталось еще более десятка новых элементов, имеющих свое специальное назначение, мы познакомимся с ними по мере освоения различных аспектов технологии.
Впрочем, и эта глава еще не закончена — у тегов, как правило, есть атрибуты, и там тоже появилось много нового.
Добавить комментарий