Семантические элементы HTML5. Часть 2
Продолжим изучение темы семантические элементы HTML5. Если пропустили прошлую статью, то вот ссылка на нее: Семантические элементы HTML5. Часть 1
Описание HTML5-элементов
Содержание:
Часть 1
1. Элемент <header>
2. Элемент <nav>
3. Элемент <article>
4. Элемент <section>
5. Элемент <aside>
Часть 2
6. Элемент <footer>
7. Элемент <address>
8. Элемент <main>
9. Элемент <figure>
10. Элемент <figcaption>
Часть 3
11. Элемент <time>
12. Элемент <mark>
13. Элемент <bdi>
14. Элемент <wbr>
15. Элементы для описания Восточно-Азиатских символов
6. Элемент <footer>
Категории контента: потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
HTML
<footer> <address>...</address> <small>@2014...</small> </footer>
7. Элемент <address>
Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.
8. Элемент <main>
Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
HTML
<body> <header> <h1>Пудель</h1> <nav> <ul> <li><a href="index.html">Главная</a></li> <li><a href="about.html">О породе</a></li> <li><a href="health.html">Здоровье</a></li> </ul> </nav> </header> <main> <section> <header> <h2>О породе</h2> <nav> <ul> <li><a href="#basic">Разновидности</a></li> <li><a href="#app">Внешний вид</a></li> <li><a href="#temp">Характер</a></li> </ul> </nav> </header> <section id="basic"> <h3>Разновидности</h3> <p>...</p> </section> <section id="app"> <h3>Внешний вид</h3> <p>...</p> </section> <section id="temp"> <h3>Характер</h3> <p>...</p> </section> <footer> <a href="#basic">Разновидности</a> <a href="#app">Внешний вид</a> <a href="#temp">Характер</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small> </footer> </body>
9. Элемент <figure>
Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.
HTML
<figure> <img src="picture.jpg" alt="Осень"> <figcaption>Осенний лес</figcaption> </figure>
Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
CSS
margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em;
10. Элемент <figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.
Продолжение в следующей статье!