Ещё раз про article. Анонс поста

Теперь добавим пост в блок с последними постами.

Так как пост — это цельный, законченный и самостоятельный фрагмент информации, то для его разметки идеально подойдёт тег <article>.

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

Это означает, что у нашего поста будет своя собственная структура (шапка, подвал, разделы) и иерархия заголовков, которая будет начинаться с заголовка первого уровня.

Собственная иерархия заголовков у <article> — это очень удобная вещь, так как нам не нужно больше задумываться об окружении поста и подстраивать уровень заголовков в посте под это окружение, как часто приходится делать сейчас.

Внутренняя страница: структура поста

В этом задании мы начинаем работу над внутренними страницами блога, то есть над самими постами.

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

Как вы уже догадались, в качестве контейнера поста мы используем <article>. У каждого поста будет шапка с заголовком и датой публикации, а также раздел введения и раздел с основным содержанием. Получается, внутри поста будут один <header> и два <section>.

Давайте договоримся для краткости называть <article> словом «статья», а <section>словом «раздел»

Даты для людей и машин. Тег time

В HTML5 добавили специальный тег для обозначения даты и времени — <time>. У этого тега есть атрибут datetime — для указания даты в машиночитаемом формате ISO 8601.

С помощью <time> можно описывать даты одновременно и для человека, и для машины, например:

<time datetime="2014-04-20">Вчера</time> мы готовили курс к публикации.

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

Кстати, в этом задании вы не только добавите дату, но и наполните пост настоящим содержанием.

Раньше в спецификации указывалось, что у тега <time> может быть ещё один атрибут — pubdate. Сейчас этот атрибут из спецификации убран, и использовать его больше не нужно.

Картинки с подписями. Теги figure и figcaption

Теперь, когда шаблон поста готов, можно добавить в блог ещё несколько коротких записей. А начнём с фотопоста.

Один из новых тегов — это <figure>.

Вспомните в книжках или учебниках изображения-выноски с подписями. Вот это и есть аналог <figure>. Цельный и независимый блок содержания. Внутри этого тега размещают демонстрационный материал: изображения, схемы, куски кода и так далее.

Обычно каждый такой материал сопровождает разъясняющий комментарий или «легенда». Для обозначения этого комментария и предназначен ещё один новый тег — <figcaption>, который размещается первым или последним элементом внутри <figure>. Пример:

<figure> схема, график, диаграмма и так далее <figcaption>Легенда</figcaption></figure>

Мы используем этот тег для более прозаичных целей.

Видео. Тег video

В HTML с самого начала было очень просто вставлять изображения, но очень сложно видео и аудио. В HTML5 эту проблему попытались решить, добавив специальные теги.

Для вставки видео предназначен тег <video>. Его основные атрибуты:

⇐ Предыдущая1234567Следующая ⇒

Поделиться: