Main тег – Правильная структура страницы на HTML5, новые семантические теги

Содержание

| HTML | WebReference

Элемент <main> (от англ. main — основной, главный) предназначен для основного содержимого документа. На странице может быть только один <main> и он не должен располагаться внутри элементов <article>, <aside>, <footer>, <header>, <nav> или <section>.

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

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>main</title>
 </head> 
 <body>
  <h2>Следы невиданных зверей</h2>
  <main>
    История о том, как возле столовой появились загадочные розовые 
    следы с шестью пальцами, и почему это случилось. 
  </main>
 </body> 
</html>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

— Веб-технологии для разработчиков

HTML-элемент <main> предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправте нам «pull request» (предложение изменения кода в чужом репозитории).

Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden.

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body>, заголовков, таких как <h3> и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.

Пример

<!-- другой контент -->

<main>
  <h2>Яблоки</h2>
  <p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p>
  
  <article>
    <h3>Сорт "Ред Делишес"</h3>
    <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h3>Сорт "Гренни Смит";/h3>
    <p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- другой контент -->

Проблемы доступности

Ориентир

Элемент <main> ведет себя как роль-ориентир main. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления

role="main", если не нужна поддержка старых браузеров.

Пропуск навигации

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

Добавление атрибута id в элемент <main> позволяет ему становится целью для ссылки пропуска навигации.

<body>
  <a href="#main-content">Перейти к основному контенту</a>

  <!-- навигация и заголовок контента -->

  <main>
    <!-- основной контент страницы -->
  </main>
</body>

Режим чтения

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

Спецификации

Поддержка браузерами

Элемент <main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA "main" в элемент <main>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <main> после добавления атрибута role).

<main role="main">
  ...
</main>
Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам «pull request» (предложение изменения кода в чужом репозитории). Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
mainChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 21IE Нет поддержки НетOpera Полная поддержка 16Safari Полная поддержка 7WebView Android
Полная поддержка
Да
Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 21Opera Android Полная поддержка ДаSafari iOS Полная поддержка 7Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также

| Справочник HTML



Элемент <main> (от англ. «main» ‒ «главный, основной») определяет основное содержимое документа (его информационную часть).

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

Элемент <main> не должен располагаться внутри элементов <article>, <aside>, <footer>, <header> или <nav>.

Примечание: Допускается использование элемента <main> только один раз в одном документе.

Синтаксис

<main>...</main>

Закрывающий тег

Обязателен.

Атрибуты

Элемент поддерживает глобальные атрибуты и события

.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Тег <main> был добавлен в HTML5.

Пример использования:

Пример HTML:

Попробуй сам
<main>
<h2>Основная тема документа</h2>
<p>Коротко об основной теме.</p><br>
<article>
<h3>Тема 1</h3>
<p>Текст по теме 1.</p>
</article>
<hr>
<article>
<h3>Тема 2</h3>
<p>Текст по теме 2.</p>
</article>
</main>

Спецификации

Поддержка браузерами

Элемент
<main> 12+ 26+ 15+ Да 6.1+ 21+
Элемент
<main> 4.4+ 2.1+ 15+ 7.1+

Учебник HTML

HTML уроки: HTML Элементы



HTML Тег главный


Основное содержание текста:

Пример


  Веб браузеры
  Google Chrome, Firefox и Internet Explorer сегодня наиболее используемые браузеры .

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome — бесплатный веб браузер с открытым исходным кодом, разработанный Google,
    выпущен в 2008.</p>
  </article>

  <article>
    <h2>Internet Explorer</h2>
    <p>Internet Explorer свободный браузер от Майкрософт, выпущенный в 1995.</p>
  </article>

  <article>

    <h2>Mozilla Firefox</h2>
    <p>Firefox — бесплатный веб браузер с открытым исходным кодом от Mozilla, выпущенный в 2004.</p>
  </article>
</main>

Попробуйте сами »

Определение и использование

Tег <main> определяет основное содержание документа.

Содержимое элемента <main> должно быть уникальным для документа. Элемент не должен содержать никакого контента, который повторяется между документами, такими как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайтов и формы поиска.

Примечание: В документе должно быть не более одного элемента <main>. Тег <main> не должен быть потомком элементов <article>, <aside>, <footer>, <header> или <nav>.


Поддержка браузеров

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

Элемент
<main>6.012.04.05.011.1

Различий между HTML 4.01 и HTML5

Tег <main> новый в HTML5.


Глобальные атрибуты

Tег <main> также поддерживает Глобальный атрибут в HTML.


Атрибуты событий

Tег <main> также поддерживает Атрибуты событий в HTML.


Тег HTML5 main | Pixel.com

Давно мы не видели новых элементов HTML5, до этого момента было всего лишь девять новых структурных тегов, и они были стабильными на протяжении нескольких лет, это:  section article aside hgroup header footer nav figure  и figcaption .  Есть еще около двадцати элементов для содержания, а именно  video audio canvas progress  и т.д.

Сегодня мы встречаем новый структурный элемент: <main> . Согласно  последней спецификации W3C :

Элемент является главным для содержания в теле документа или приложения.
Авторы не должны использовать более одного элемента <main> в документе.

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

Тег main можно использовать в шаблоне, теме или в макете перед content, wrapper: он заменит теги, такие как <div> , <div> или <div> . Если вы используете ARIA, тогда применить элемент <main> , где определяется role="main"



<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Новый тег HTML5 main</title>
</head>
<body>
	<header>Имя приложения</header>
	<nav>
		<a href=
http://www.pixelcom.crimea.ua/"#">Главная</a>
	</nav>
	<main>
		<article>
			<h2>Статьи</h2>
			<p>Содержание</p>
		</article>
		<aside>
			<p>Новости</p>
		</aside>
	</main>
	<footer>Copyright 2013</footer>
</body>
</html>


Поддержка браузеров

В то время как <main> является новым, большинство браузеров поддерживают новые теги. Однако, вы должны будете применить в стиле CSS block , вот так:



main
{
	display: block
}


Хотя может это станет ненужным, поскольку браузеры развиваются ( <main> поддерживается в Chrome и Firefox новых сборок).

Элемент также был добавлен в html5shiv поэтому он будет работать в IE6, 7 и 8. Возможно, вам придется загрузить новую версию, если вы используете файлы локально.

Можно ли вы использовать сегодня тег <main> ?

Элемент был на удивление противоречивым. Многие доказывали, что в этом элементе нет необходимости. Но его утвердили, и я думаю, что он будет полезен.

Правильная структура страницы на HTML5, новые семантические теги

Создано: 06.07.18 Обновлено: 06.07.18 Категория: HTML

С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно.

Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

  • Мета,
  • Заголовочное,
  • Текстовое,
  • Потоковое,
  • Секционное,
  • Встроенное,
  • Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer и address, а также в сам тег header.

Тег nav (потоковое, секционное)

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

Тег article (потоковое, секционное)

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

Тег section (потоковое, секционное)

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

Тег aside (потоковое, секционное)

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

Тег footer (потоковое)

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

Тег address (потоковое)

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

Тег main (потоковое)

Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.

Тег figure (потоковое, корневое)

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

Тег figcaption (-)

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

Тег time (потоковое, текстовое)

Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.

Тег mark (потоковое, текстовое)

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

Тег bdi (потоковое, текстовое)

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

Тег wbr (потоковое, текстовое)

Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку.

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

HTML5 | htmlbook.ru



HTML5 | htmlbook.ru

Определяет содержание сайта вроде новости, статьи, записи блога, форума или др.

Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.

Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста.

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

Создает команду в виде переключателя, флажка или обычной кнопки.

Создает список вариантов, которые можно выбирать при наборе в текстовом поле.

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

Используется для загрузки и отображения объектов.

Содержит описание для тега <figure>.

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

Определяет «подвал» сайта или раздела.

Определяет «шапку» сайта или раздела.

Используется для группирования заголовков веб-страницы или раздела.

Используется для генерации пары ключей — закрытого и открытого.

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

Помечает текст как выделенный.

Отображает список меню.

Используется для вывода значения в некотором известном диапазоне.

Группирует ссылки навигации по сайту.

Определяет область для вывода, преимущественно с помощью скриптов.

Используется для отображения прогресса завершенности задачи.

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.

Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.

Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.

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

Вставляет звуковой или видеофайл для тегов <audio> и <video>.

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации.

Помечает текст внутри тега как дату, время или оба значения.

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.

Указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *