Интернет имеет свойства меняться. Стандарты, которые были приняты в 90-х, постепенно отходят на задний план временного пространства.
В прошлом посте я сделал введение в HTML5. Сегодня разберем подробнее новые элементы в HTML5.
Преобладает мнение, что на сегодняшний день лучшим решением для формирования структуры страницы является именно элементы из языка HTML5.
Новые семантичеcкие элементы в html5
Элементы в HTML5 призванные улучшить понимание структуры.
| <article> | Определяет место расположения статьи |
| <aside> | Определяет отдельный блок контента, который не относится к основному. Например боковой сайдбар. |
| <bdi> | Сокращение от bi-directional isolation (двунаправленное экранирование). Используется в случаи если мы не знаем какой текст ожидается, традиционный с лева на право или с права на лева. |
| <command> | Определяет команду для чекбокса(флажка) или обычной кнопки. |
| <details> | Определяет дополнительные детали, могут быть видны для пользователя или скрыты. Например это может быть справочная информация. |
| <summary> | Определяет видимость для <details> элемента. |
| <figure> | Специальный контейнер для иллюстрации, диаграмм, фотографий, листинга, итд. С помощью него можно указывать название иллюстрации в HTML5. |
| <figcaption> | Определяет заголовок для <figure> элемента. |
| <footer> | Определяет блок нижней части документа, footer. |
| <header> | Определяет верх, header, нашего документа. Используется для заголовка (<header><h1>). |
| <hgroup> | Группирует набор тегов заголовка от <h1> до <h6> когда заголовки имеют вложенные уровни. |
| <mark> | Этот тег выделяет текст, для того чтобы подчеркнуть основной момент в тексте. |
| <meter> | Определяет скалярный размер в пределах заданного диапазона. Как пример используется для того что бы отобразить числовые значения, температуру, расстояния, объем, давления и др. |
| <nav> | Определяет блок с навигационными ссылками. |
| <progress> | Определяет прогресс завершения задачи. Например загрузка чего либо. |
| <ruby> | Это контейнер который дает возможность аннотацю к тексту, сверху или с низу. Можно использовать когда надо написать один текст над другим, например перевести иероглиф. |
| <rt> | Используется внутри блока <ruby>. Добавляет анотацию к тексту в уменьшенном виде. |
| <rp> | Используется в браузерах которые не поддерживают тег <ruby>. |
| <section> | Определяет секцию в документе. Которая может иметь внетри себя семантическую структуру, заголовок, подвал, шапку итд. |
| <time> | Используется для того что бы показать дату/время |
| <wbr> | Дает возможность показать конец строки, тем самым показывая браузеру где можно делать перенос строки, если это необходимо. |
Это были основные теги для построения семантической структуры в HTML5, дальше будут другие разделы.
