Структурные html теги: HTML5. Структурные элементы и другие новшества

Содержание

HTML5. Структурные элементы и другие новшества

HTML5 — это язык для структурирования и представления содержимого веб страниц. Чем же он так хорош? В данной спецификации для структуры кода введено несколько новых тегов, которые в некоторых случаях могут заменять тег div и это пожалуй самое ключевое нововведение. Эти теги ориентированы на поисковых-роботов. Поисковые системы начинают лучше индексировать сайт сверстаный с использованием технологии HTML5, потому что чётко отделяют контент страницы от вспомогательных элементов.

Да и вообще понять чужой код стало намного проще, так как появился некий стандарт. Давайте разберемся что же такого принципиально нового и важного в нем появилось.

Доктайп

Любой код разметки начинается с объявления типа документа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. До появления спецификации HTML5 существовало несколько типов доктайпа, различающихся в зависимости от версии языка. Все они были довольно блинными и запомнить их было нереально. Теперь же у нас есть единый, коротенький тип доктайпа:

<!doctype html>

Структурные теги разметки HTML5

Тег <header> задает «шапку» сайта или раздела. То есть данный тег может относиться как и ко всей шапке веб-сайта, так и к отдельным его элементам, разделяющим страницу на разделы, тогда он семантически подразумевает заголовок или введение для содержимого своего родительского элемента.

Пример:

<div> <header><h2>Вставка включаемых областей в Битрикс</h2></header> <p>Включаемая область — это специально выделенная область на странице сайта, которую можно редактировать отдельно от основного содержания страницы. Реализуется она с помощью компонента «Включаемая область».</p> </div>

<div>

<header><h2>Вставка включаемых областей в Битрикс</h2></header>

<p>Включаемая область — это специально выделенная область на странице сайта, которую можно редактировать отдельно от основного содержания страницы. Реализуется она с помощью компонента «Включаемая область».</p>

</div>

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

Пример:

<nav> <a href=»/»>Главная</a> <a href=»/contact»>Контакты</a> <a href=»/about»>О нас</a> </nav>

<nav>

<a href=»/»>Главная</a>

<a href=»/contact»>Контакты</a>

</nav>

Тег <main > предназначен для основного содержимого документа. Его содержимое должно быть уникальным и не включать типовые блоки шаблона(шапку, подвал, сайтбар).

<main> <h2>Заголовок</h2> Текст основного контента </main>

<main>

<h2>Заголовок</h2>

Текст основного контента

</main>

Тег <aside>

— определяет положение «сайтбара»(боковой панели) на сайте.

<aside> <header>Рубрики</header> <p>Рубрика1</p> <p>Рубрика2</p> <p>Рубрика3</p> <p>Рубрика4</p> <p>Рубрика5</p> </aside>

<aside>

<header>Рубрики</header>

<p>Рубрика1</p>

<p>Рубрика2</p>

<p>Рубрика3</p>

<p>Рубрика4</p>

<p>Рубрика5</p>

</aside>

Тег <section> — определяет тематический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле, блок новостей и так далее.

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

<section> <article> <h3>Заголовок статьи</h3> <p>Текст статьи</p> </article> <article> <h3>Заголовок статьи</h3> <p>Текст статьи</p> </article> <article> <h3>Заголовок статьи</h3> <p>Текст статьи</p> </article> </section>

<h3>Заголовок статьи</h3>

<p>Текст статьи</p>

</article>

<h3>Заголовок статьи</h3>

<p>Текст статьи</p>

</article>

<h3>Заголовок статьи</h3>

<p>Текст статьи</p>

</article>

</section>

Новые теги для работы с мультимедиа

Тег <figure> — используется для группировки изображений и подписей к ним.

<figure> <p>Изображение</p> <figcaption>Подпись к изображению</figcaption> </figure> <figure>

<p>Изображение</p>

<figcaption>Подпись к изображению</figcaption>

</figure>

Тег <audio> — используется для добавления аудио-файлов.

<audio src=»путь к аудиофайлу» autoplay=»autoplay» loop=»5″>Здесь можно разместить информацию о мелодии</audio>

Где атрибут autoplay — сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы, а loop — указывает, сколько раз необходимо проиграть файл.

Тег <video> — используется для добавления на страницу видео-файлов.

<video src=»путь к файлу»>Описание фильма</video>

Атрибут для ссылок download — позволяет скачать файл указанный в ссылке.

<a href=»docs/instrukcia.pdf» download>скачать инструкцию</a>

Атрибуты для работы с полями формы

Атрибут placeholder — выводит текст внутри поля формы, который исчезает при получении фокуса.

Атрибут autofocus позволяет установить фокус в поле сразу при загрузке страницы.

Атрибут required позволяет сделать поле обязательным для заполнения.

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

Автозаполнение может быть отключено в настройках браузера, в таком случае атрибут autocomplete работать не будет.

[ 0-9]+$Любое число.[0-9]{6}Почтовый индекс.\d+(,\d{2})?Число в формате 1,34 (разделитель запятая).\d+(\.\d{2})?Число в формате 2.10 (разделитель точка).

Стоит отметить тег <datalist> позволяющий создать список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

<input type=»text» list=»team_list»> <datalist> <option>Варианты ответа</option> <option>Варианты ответа</option> <option>Варианты ответа</option> <option>Варианты ответа</option> </datalist>

<option>Варианты ответа</option>

</datalist>

Для атрибута type добавлен ряд новых значений:

Тип	Описание
color	Виджет для выбора цвета.
date	Поле для выбора календарной даты.
datetime	Указание даты и времени.
datetime-local	Указание местной даты и времени.
email	Для адресов электронной почты.
number	Ввод чисел.
range	Ползунок для выбора чисел в указанном диапазоне.
search	Поле для поиска.
tel	Для телефонных номеров.
time	Для времени.
url	Для веб-адресов.
month	Выбор месяца.
week	Выбор недели.

И последнее что стоит отметить, это метатег viewport.

Он сообщает браузеру, что ширина просмотра равна ширине устройства. Это поможет сделать ваш сайт более презентабельным на мобильных устройствах.

Вот пожалуй и все ключевые нововведения спецификации HTML5.

nav, section, article, header, footer, примеры использования

Главная » Html и Css

Структурные теги Html5 указывают, какой контент они содержат, а не то, как он должен быть отформатирован при отображении в браузере. Это дает совершенно новые возможности по разработке и оптимизации страниц.

слева показана верстка прежними методами, справа с помощью новых тегов Html5

Содержание

Как используются структурные теги?
Структурные метки и семантические уровни
Как семантическая верстка влияет на оптимизацию?

Как используются структурные теги?

В рамках семантической маркировки особо интересен набор тегов, которые используются для определения основной схемы документа и деления его на логические части:

Main: применяется для создания основного блока страницы. Это контент, внутри которого могут быть такие теги, как: Header, Section, Article и т. д. Содержимое Main должно быть уникальным. Это достигается двумя путями: выносом из блока контента, который повторяется на других страницах, или добавление к тегу Main идентификатора aria-labelledby.
Header: или шапка внутри документа(не путать с <head> ), используется для заглавия статей или разделов. Хедер может содержать, помимо заголовка, дату публикации контента или оглавление статьи.
Nav: используется для включения меню в разные части сайта и содержит данные навигации. Тег nav является лишь оболочкой списков меню, поэтому между <nav> и </nav> должны вставляться <ul> и <ol>. Google может включать в расширенные сниппеты с быстрыми ссылками меню сайта, заданное через тег Nav.
Section: служит для выделения разделов сайта. Типичный пример применения — лендинг или одностраничное портфолио, где элемент section вкупе с Id используется для перехода к разделам «Портфолио», «Контакты» и т. п. Этот элемент HTML5 создан специально для того, чтобы избежать чрезмерного употребления div class или div id со слишком глубокой вложенностью дочерних элементов. Все секции могут применяться как контейнеры для организации контента внутри них. Допустимо даже использование section внутри section, когда необходимо разделение на подразделы в рамках родительской секции или для сайта целиком, если речь об одностраничнике. Если разместить section внутри article, тег будет подчиняться семантике и контентным правилам статейных блоков. Бытует мнение, что подобное использование section может нарушить приоритеты структуры, но спецификация w3 содержит примеры таких вложений, поэтому конструкция считается валидной.
Article: каждая статья сайта. Статьи в данном контексте — это блоки информации. Они могут быть новостями, лонгридами, инструкциями, постами блога, услугами и продуктами, но не обязаны ими являться. Суть идеи состоит в том, что в одном разделе присутствуют разные материалы article, сгруппированные с учетом некой логики внутри родительских тегов. Важный момент — тег может быть неуникальным в рамках сайта, содержать вложенные элементы того же или более высокого уровня — на новостных сайтах часто встречаются примеры article внутри article.
Aside: боковая панель или сайдбар. На самом деле здесь можно разместить любой контент, косвенно связанный с основным содержанием страницы; категории, статьи, облако тегов, последние комментарии, связанные записи и т. д. Тег aside может быть дополнением материала страницы, либо содержать отдельную общую информацию в рамках сайта, например, боковое меню.
Footer: представляет краткую информацию о разделе, авторах или сайте — авторские права, ссылки на служебные страницы и т. п. Футер должен располагаться внизу страницы, раздела, статьи и т. д.

Элементы header и footer — так называемые шапка и подвал обычно содержат неуникальную в рамках сайта информацию, кроме случаев, когда хэдер индивидуален для статьи.

Современные браузеры по умолчанию интерпретируют структурные теги в качестве блочных элементов. Для более старых версий, которые не поддерживают Html5, практикуется прямое указание display: block в CSS.

Структурные метки и семантические уровни

Если в XHTML (или более ранних версиях Html) было рекомендовано использовать h2 для заголовка страницы и h3 для заголовка записи или раздела, то в Html5 нет подобной необходимости. Можно делать заголовки на каждом семантическом уровне, чтобы h2 был в хедере, в каждой статье или секции.

Семантические теги не имеют стиля по умолчанию. То есть, браузер не разместит Header в верхней части документа, хоть и понимает, что тег означает заголовок. Именно через CSS следует назначить стили, которые нужно применить к каждому из структурных элементов.

Как семантическая верстка влияет на оптимизацию?

Идея структурных тегов заключается в добавлении в интернет такой информации, как семантические метаданные, которые могут быть интерпретированы любой компьютерной системой. Каждый паук-индексатор сможет определить, к какой типичной части документа принадлежит конкретный фрагмент кода.

Это новшество позволяет забыть о старых методах SEO с закрытием от индексации навигационных ссылок, футера и других вспомогательных блоков. Контентные приоритеты теперь задаются напрямую структурными тегами, независимо от места расположения на странице.

Поисковые системы при использовании семантической верстки явным образом оповещаются о том, что является основным контентом страницы — это позволяет корректно классифицировать тексты. Хотя и нет доказательств того, что наличие новых тегов улучшает поисковые позиции сайта напрямую, но возможно это дело ближайшего будущего.

Автор Ложников АндрейВремя чтения 5 мин.Просмотры 930Опубликовано 03.12.2019Обновлено 03.12.2019

Теги структуры документа

: MGA

Об DoITHTML TutorialJavaScript TutorialXML TutorialPHP Tutorial

Глава 1. Создание веб-страницГлава 2. Базовый макет документаГлава 3. Основные стили документаГлава 4. Форматирование текстаГлава 5. Графические изображенияГлава 6. Применение специальных стилейГлава 7. Связывание страницГлава 8.9 Использование таблиц Воспроизведение мультимедиаГлава 10. Создание формГлава 11. Дизайн веб-сайтовHTML/CSS Приложение

Структурирование содержимого страницыТеги структуры документаАбзацыРазрывы строкЗаголовкиГоризонтальные правилаСписковые структурыСвязывание страницОтображение изображений

HTML 5 включает новый набор семантических структурных тегов документа для определения различных частей или структуру веб-страницы. Семантический элемент четко описывает свое значение как для браузера, так и для веб-разработчика.

Рис. 2-5.

Простой шаблон

Ниже описаны некоторые из наиболее распространенных структурных элементов HTML 5.

Тег

Элемент

используется в качестве контейнера для содержимого заголовков страниц.

Тег обычно содержит теги заголовков ( —

), изображение логотипа или другое содержимое, знакомящее с содержание. На странице может быть более одного тега

; Однако <заголовок> не может быть закодирован в <нижний колонтитул> или другой тег

Тег

— это элемент уровня блока, используемый для определения основных блоков навигационных ссылок или навигационных меню.

Тег

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

элемент. Кроме того, он не может быть включен как дочерний элемент внутри

, footer> ,

или

тег.

Тег

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

Тег

Элемент

представляет полную или автономную композицию в документ, страница, приложение или сайт, которые, в принципе, могут распространяться независимо друг от друга или повторно использоваться.

Тег

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