Html main: Тег | htmlbook.ru
Тег | htmlbook.ru
Тег <main> | htmlbook.ru
Основное
HTML
CSS
Сайт
- Статьи
- Блог
- Практикум
- Форум
- Самоучитель HTML
- Справочник по HTML
- XHTML
- HTML5
- Самоучитель CSS
- Справочник по CSS
- Рецепты CSS
- CSS3
- Вёрстка веб-страниц
- Макеты
- Веб-сервер
Теги HTML
- Все теги
- Валидация тегов
- <!— —>
- <!DOCTYPE>
- <a>
- accesskey
- charset
- coords
- download
- href
- hreflang
- name
- rel
- rev
- shape
- tabindex
- target
- title
- type
- <abbr>
- title
- <acronym>
- <address>
- <applet>
- align
- alt
- archive
- code
- codebase
- height
- hspace
- vspace
- width
- <area>
- accesskey
- alt
- coords
- href
- hreflang
- nohref
- shape
- tabindex
- target
- type
- <article>
- <aside>
- <audio>
- autoplay
- controls
- loop
- muted
- preload
- src
- <b>
- <base>
- href
- target
- <basefont>
- color
- face
- size
- <bdi>
- <bdo>
- dir
- <bgsound>
- balance
- loop
- src
- volume
- <big>
- <blink>
- <blockquote>
- <body>
- alink
- background
- bgcolor
- bgproperties
- bottommargin
- leftmargin
- link
- rightmargin
- scroll
- text
- topmargin
- vlink
- <br>
- clear
- <button>
- accesskey
- autofocus
- disabled
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- name
- type
- value
- <canvas>
- <caption>
- align
- valign
- <center>
- <cite>
- <code>
- <col>
- align
- char
- charoff
- span
- valign
- width
- <colgroup>
- align
- char
- charoff
- span
- valign
- width
- <command>
- <comment>
- <datalist>
- <dd>
- <del>
- cite
- datetime
- <details>
- <dfn>
- <dir>
- <div>
- align
- title
- <dl>
- <dt>
- <em>
- <embed>
- align
- height
- hidden
- hspace
- pluginspage
- src
- type
- vspace
- width
- <fieldset>
- disabled
- form
- title
- <figcaption>
- <figure>
- <font>
- color
- face
- size
- <footer>
- <form>
- accept-charset
- action
- autocomplete
- enctype
- method
- name
- novalidate
- target
- <frame>
- bordercolor
- frameborder
- name
- noresize
- scrolling
- src
- <frameset>
- border
- bordercolor
- cols
- frameborder
- framespacing
- rows
- <h2>
- align
- <h3>
- align
- <h4>
- align
- <h5>
- align
- <h5>
- align
- <h6>
- align
- <head>
- profile
- <header>
- <hgroup>
- <hr>
- align
- color
- noshade
- size
- width
- <html>
- manifest
- title
- xmlns
- <i>
- <iframe>
- align
Тег | HTML справочник
basicweb.ru- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
- JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
- jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Утилиты
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred
HTML
- HTML учебник
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Мнемоники
- Коды языков
- HTML цвета
- Тесты знаний
CSS
- CSS учебник
- Справочник свойств
- CSS селекторы
- CSS правила
- Flexbox генератор
- Grid генератор
- LESS учебник
JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math β
- Объект Number
- Объект Object
- Объект Promise
- Объект RegExp
- Объект String
jQuery
- jQuery селекторы
- jQuery события
- jQuery методы DOM
- jQuery перемещения
- jQuery утилиты
- jQuery эффекты
- jQuery AJAX
- jQuery объект Callbacks
- jQuery объект Deferred
HTML теги
- <!—…—>
- <!DOCTYPE>
- <a>
- <abbr>
- <address>
- <area>
- <article>
- <aside>
- <audio>
- <b>
- <base>
- <bdi>
- <bdo>
- <blockquote>
- <body>
- <br>
- <button>
- <canvas>
- <caption>
- <cite>
- <code>
- <col>
- <colgroup>
- <datalist>
- <dd>
- <del>
- <details>
- <dfn>
- <dialog>
- <div>
- <dl>
- <dt>
- <em>
- <embed>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h2>
- <h3>
- <h4>
- <h5>
- <h5>
- <h6>
- <head>
- <header>
- <hr>
- <html>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <keygen>
- <label>
- <legend>
- <li>
- <link>
- <main>
- <map>
- <mark>
- <menu>
- <menuitem>
- <meta>
- <meter>
- <nav>
- <noscript>
- <object>
- <ol>
- <optgroup>
- <option>
- <output>
- <p>
- <param>
- <pre>
- <progress>
- <q>
— Веб-технологии для разработчиков
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
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
main | Chrome Полная поддержка 26 | Edge Полная поддержка 12 | Firefox Полная поддержка 21 | IE Нет поддержки Нет | Opera Полная поддержка 16 | Safari Полная поддержка 7 | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 21 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 7 | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
Смотрите также
| 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
Редакторы: Влад Мержевич
Элемент | htmlbook.ru
Оригинал: http://html5doctor.com/the-main-element
Перевод: Влад Мержевич
Недавно <main> был официально добавлен в спецификацию W3C HTML. Теперь, когда осела пыль, настало время погрузиться и узнать, где и когда будет уместно использовать <main>. Давайте начнём.
История
Включение элемента <main> (или подобного) уже давно обсуждается в рабочих группах с авторами и часто возникал вопрос, почему мы добавили новые элементы вроде <header>, <article> и <footer>, но нет элемента, который бы точно описывал основное содержимое страницы.
Стив Фолкнер, консультант по удобству подхода и наш новый автор, взял на себя трудную работу по исследованию, сбору данных и применению, а также поговорил с заинтересованными разработчиками. Как объясняет сам Стив, он говорил…
…со многими разработчиками (разработчиками браузеров и разработчиками удобства подхода), веб-разработчиками, авторами и пользователями и получил от них информацию и рекомендации. Я был там, где болтается множество людей: на IRC-каналах, в списках рассылки, Твиттере, блогах, конференциях — везде.
Стив Фолкнер
Это привело к тому, что он написал расширение спецификации для <main> и тщательно обосновал варианты применения.
Предложение было принято в ноябре 2012 года и затем <main> вошёл в спецификацию HTML5.1. Недавно он был добавлен в спецификации HTML5 и это не вызвало никаких возражений. Давайте посмотрим на то, как спецификация описывает <main>.
Спецификация W3C
Основная цель <main> — выступать основным элементом в HTML в карте ролей ARIA (Accessible Rich Internet Applications Suite). Это поможет скринридерам и другим услужливым технологиям понять, где начинается основное содержимое. Спецификации W3C описывает <main> так.
Основное содержимое документа или приложения. Область основного содержимого состоит из контента, который напрямую расширяет центральную тему документа или центральную функциональность приложения или зависит от них.
W3C HTML Editors Draft
Поскольку элемент <main> теперь включен в спецификацию HTML, элемент <body> в HTML4 изменил своё определение.
Элемент body представляет собой содержимое документа.
W3C HTML Editors Draft
Подробнее
Важным аспектом <main> является то, что он может быть использован на странице только один раз. Джереми Кит написал в рабочую группу, чтобы понять, почему это так (вернее, допускается ли несколько <main>). Хотя я не буду останавливаться на этом, обсуждение прочитать интересно.
Согласно спецификации валидатор W3C выдаст сообщение об ошибке если вы попытаетесь использовать несколько элементов <main> в документе.
Другим условием <main> является то, что он не может быть использован как дочерний у элемента <article>, <aside>, <footer>, <header> или <nav>.
Поскольку <main> не относится к структурным элементам, он не влияет на структуру документа подобно <article>, <nav> или <section>.
Отправная то
| Справочник 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.0 | 12.0 | 4.0 | 5.0 | 11.1 |
Различий между HTML 4.01 и HTML5
Tег <main> новый в HTML5.
Глобальные атрибуты
Tег <main> также поддерживает Глобальный атрибут в HTML.
Атрибуты событий
Tег <main> также поддерживает Атрибуты событий в HTML.
— Веб-технологии для разработчиков
HTML-элемент
для основного контента (содержимого) документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа.Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https: // github.com / mdn / interactive-examples и отправте нам «запрос на перенос» (предложение кода в чужом репозитории).
Документ не должен иметь более одного элемента <основной> у которого не указан атрибут скрыто .
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Содержимое элемента
должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые, не должно добавляться формы за исключением формы поиска, если она является основной функцией страницы.
не вносит вклад в текст документа; то есть, в отличие от таких элементов, как , заголовков, таких как и т.п., не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер. Пример
<основной>
Яблоки
Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.
<статья>
Сорт "Ред Делишес"
Эти ярко-красные яблоки являются одними из самых популярных в Штатах.
...
...
не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.Пример
<основной>Яблоки
Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.
<статья>Сорт "Ред Делишес"
Эти ярко-красные яблоки являются одними из самых популярных в Штатах.
...
...
