HTML 5 Элементы уровня блока
В HTML 5 появились три новых элемента уровня блока.
Собственно, вот они:
1) aside.
2) dialog.
3) figure.
Элемент aside используют, как правило, для выделения неосновного текста внутри основного, например, для выделения различных примечаний или цитат.
Например, так:
<html>
<head>
</head>
<body>
<h3>Заголовок</h3>
<p>Основное повествование...</p>
<aside>
<p>Например, цитата...</p>
</aside>
</body>
</html>Можно посмотреть в браузере, но разницы особой не заметите, что с <aside>, что без, что говорит о том, что данный элемент используется лишь для создания структуры. А хорошая структура удобна разработчику и поисковым машинам.
Элемент dialog используется для создания диалога между собеседниками.
Давайте напишем такой код:
<html>
<head>
</head>
<body>
<dialog>
<dt>Собеседник 1</dt>
<dd>Сообщение собеседника 1</dd>
<dt>Собеседник 2</dt>
<dd>Сообщение собеседника 2</dd>
</dialog>
</body>
</html>Внутри элемента dialog ставятся два HTML-тега: <dt> и <dd>. Первый тег означает имя собеседника, а второй тег означает его сообщение. Вот и всё, что касается элемента dialog.
И, наконец, тег figure в HTML 5 позволяет описать изображение вместе с подписью. Например, так:
<html>
<head>
</head>
<body>
<figure>
<legend>Подпись</legend>
<img alt="Изображение" src="image.jpg" width="200" height="200">
</figure>
</body>
</html>Здесь внутри <figure> объединяются подпись (внутри тега <legend>) и само изображение в теге <img>. Тем самым, элемент <figure> позволяет связать подпись и изображение в одно целое.
Вот и все новые элементы HTML 5 уровня блока. Надеюсь, что для Вас многое прояснилось, а если нет, то с удовольствием отвечу на любые вопросы на форуме или лично на письма. Но, наверняка, Вы поняли новые возможности при создании сайта.
-
Создано 20.05.2010 14:16:19
-
Михаил Русаков
Комментарии (5):
dialog в Chrome не работает. Пустая страница отображается и всё.
Ответить
В опере тоже самое.
Ответить
Да у меня также, а работает только в IE и Mozilla!
Ответить
А скажите, для подписи тега <figure> вроде бы предназначен тег <figcaption>? или <legend> тоже можно использовать? и что лучше?
Ответить
Видимо Хром и Опера решили диалоги игнорировать))
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.