<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

HTML 5 Элементы уровня блока

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 уровня блока. Надеюсь, что для Вас многое прояснилось, а если нет, то с удовольствием отвечу на любые вопросы на форуме или лично на письма. Но, наверняка, Вы поняли новые возможности при создании сайта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

Anna Troyan Anna Troyan 28.07.2015 00:32:28

dialog в Chrome не работает. Пустая страница отображается и всё.

Ответить

norvegg norvegg 11.03.2016 13:39:43

В опере тоже самое.

Ответить

Bagi Bagi 14.03.2016 01:48:54

Да у меня также, а работает только в IE и Mozilla!

Ответить

pajeroby pajeroby 26.03.2016 13:02:43

А скажите, для подписи тега <figure> вроде бы предназначен тег <figcaption>? или <legend> тоже можно использовать? и что лучше?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.