Main html что это
HTML-элемент предназначен для основного контента (содержимого) документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам «pull request» (предложение изменения кода в чужом репозитории).
| Категории контента | Основной поток, явный контент. |
|---|---|
| Разрешённое содержимое | Основной поток. |
| Пропуск тега | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Разрешённые родительские элементы | Те, в которых разрешается контент основного потока в качестве содержимого, но только если это иерархически корректный main элемент. |
| Разрешённые ARIA роли | Роль main применяется к по умолчанию, и роль presentation также разрешена. |
| DOM-интерфейс | HTMLElement |
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Содержимое элемента должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые формы, не должно добавляться, за исключением формы поиска, если она является основной функцией страницы.
Элемент
Перевод: Влад Мержевич
История
Стив Фолкнер, консультант по удобству подхода и наш новый автор, взял на себя трудную работу по исследованию, сбору данных и применению, а также поговорил с заинтересованными разработчиками. Как объясняет сам Стив, он говорил.
. со многими разработчиками (разработчиками браузеров и разработчиками удобства подхода), веб-разработчиками, авторами и пользователями и получил от них информацию и рекомендации. Я был там, где болтается множество людей: на IRC-каналах, в списках рассылки, Твиттере, блогах, конференциях — везде.
Это привело к тому, что он написал расширение спецификации для и тщательно обосновал варианты применения.
Спецификация W3C
Основная цель — выступать основным элементом в HTML в карте ролей ARIA (Accessible Rich Internet Applications Suite). Это поможет скринридерам и другим услужливым технологиям понять, где начинается основное содержимое. Спецификации W3C описывает так.
Основное содержимое документа или приложения. Область основного содержимого состоит из контента, который напрямую расширяет центральную тему документа или центральную функциональность приложения или зависит от них.
Поскольку элемент теперь включен в спецификацию HTML, элемент в HTML4 изменил своё определение.
Элемент body представляет собой содержимое документа.
Подробнее
Важным аспектом является то, что он может быть использован на странице только один раз. Джереми Кит написал в рабочую группу, чтобы понять, почему это так (вернее, допускается ли несколько ). Хотя я не буду останавливаться на этом, обсуждение прочитать интересно.
Согласно спецификации валидатор W3C выдаст сообщение об ошибке если вы попытаетесь использовать несколько элементов в документе.
Отправная точка
Подобно многим другим новым элементам HTML5, не все браузеры понимают или содержат набор стилей для него. Вам следует убедиться, что он отображается в CSS как блочный элемент.
В настоящее время вы также должны использовать JavaScript, чтобы создать элемент для старых версий IE.
Конечно, если вы используете html5shiv, то обновится напрямую.
Реализация на HTML5 Doctor
Самый простой способ внедрения заключается в замене
И вот как это теперь.
Да, это действительно так просто. Если повезёт, то реализация займёт меньше пяти минут.
Версия WHATWG
Определение от WHATWG отличается от версии W3C; элемент не несёт особого смысла. Это всего лишь стилевая обманка (как
Элемент main может быть использован как контейнер для главного содержимое другого элемента. Он содержит дочерние элементы.
Мы рекомендуем использовать версию W3C для как описано выше.
Поддержка браузеров
Резюме
Как использовать семантические теги HTML5?
Правильно сверстанный сайт будет лучше ранжироваться поисковыми роботами и с большей вероятностью попадет на первые страницы поисковых систем.
И если для вас это важно, то предлагаю почитать статью, в которой я объясню, как использовать семантические теги.
Что такое семантические теги
Это теги, которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.) понимали, какой тип информации заложен в данных тегах.
Проще говоря, это как таблички в супермаркетах, которые указывают, где и какой находится отдел. Таким образом клиент быстрее найдет то, что ему нужно.
И если на вашем сайте будут такие же правильно расставленные таблички в виде тегов, поисковым роботам не составит труда найти информацию, которую запросил пользователь, и вывести в результат именно ваш сайт.
Семантика HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Она делает веб-страницы более информативными, позволяя браузерам и поисковым системам лучше ориентироваться на сайте.
Список новых тегов в HTML5
Если вдруг вы еще не знакомы с новыми тегами HTML5, предлагаю быстренько пробежаться и познакомиться
Как использовать семантические теги
На самом деле ничего сложного в использовании нет, главное – применять теги там, где они будут лучше всего отражать суть контента.
Давайте разберем простой пример:
Если внимательнее изучить структуру, вроде как понятно, что
Чтобы исправить ситуацию, давайте сверстаем страницу, используя семантические теги.
Ну или например блок статьи.
Тут даже без особых знаний верстки можно сразу определить, что это за блок и какая у него роль. И теперь вам не нужно добавлять атрибут id или class, чтобы хоть как-нибудь обозначить элемент на странице.
И напоследок давайте пройдемся по некоторым тегам, к которыми могут возникнуть вопросы.
Возможно, у вас сразу возник вопрос: “В чем разница между этими тегами?”
Оба служат для разделения контента путем группировки логически связанных элементов и могут использоваться как взаимозаменяемые. Вопрос только в том, в какой ситуации.
Если в пример взять статью, то обычно используют теги в таком порядке
Думаю суть уловили.
И если попробуем поменять теги местами,
Его можно не только использовать как подвал страницы, как может показаться на первый взгляд, но и добавить, например, в нижнюю часть статьи, где будет информация об авторе, дате публикации или какие-то ссылки.
То же самое можно сказать и про этот тег. Его можно располагать в начале страницы, над основным контентом, или в секции – размещать в нем, например, заголовок или навигацию.
Предназначен для контента, который не является частью основного потока на сайте, однако все равно имеет к нему какое-то отношение. Обычно выступает в качестве боковой панели к вашему основному содержимому.
Обычно располагается около тега
Заключение
Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем 🙂
Если подвести итог, можно определить два основных плюса:
На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.
Узнать больше о новых элементах HTML5 можно тут:
w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.
MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.
Структура в HTML
При написании содержимого в HTML, такого как абзацы, списки или ссылки, вы наделяете смыслом свой текст. Но вы, возможно, захотите сгруппировать некоторые из этих элементов вместе.
Например, веб-страницу блога можно разделить на четыре части:
Существуют некоторые структурные элементы HTML, которые можно использовать в качестве контейнеров для других элементов.
, как правило, идёт первым элементом в коде HTML. Он действует как введение в веб-страницу, с логотипом, слоганом и навигационными ссылками.
Элемент содержит, как предполагает его название, наиболее важное содержание страницы, то, что определяет назначение страницы.
В то время как все веб-страницы сайта содержат общие элементы (такие как шапка, навигация, подвал и др.), элемент фокусируется на уникальном содержании.
Например, статья, которую вы сейчас читаете, находится внутри на этой странице, потому что её содержание является уникальным на всём сайте.
Элемент позволяет группировать элементы в разделы. Сами по себе разделы не несут определённого смысла. Это больше об отношении между его дочерними элементами, а не свой собственный смысл на странице в целом.
Все они находятся внутри элемента главной страницы, но разделены логически на группы похожего содержания и обеспечивают большее значение для структуры страницы.
Основы HTML
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
Вложенные элементы
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
. Приведённое ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
