Что такое main в html
Перейти к содержимому

Что такое main в html

  • автор:

Что такое main в html

Блок с главным контентом страницы.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  • Алёна Батицкая ,
  • Вадим Макеев

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 
Сайт об архитекторах Санкт-Петербурга

Несколько фактов о Растрелли

Франческо Растрелли — российский архитектор итальянского происхождения.

Он был ярким представителем елизаветинского барокко.

Подписывайтесь на нас в Инстаграме
header>Сайт об архитекторах Санкт-Петербургаheader> main> h1>Несколько фактов о Растреллиh1> p>Франческо Растрелли — российский архитектор итальянского происхождения.p> p>Он был ярким представителем елизаветинского барокко.p> main> footer>Подписывайтесь на нас в Инстаграмеfooter>

Как понять

Скопировать ссылку «Как понять» Скопировано

Тег помогает собрать самую важную информацию на странице в одном контейнере. — один из ориентиров (landmark), к которому скринридер может удобно перейти. Также считают основным содержимым встроенные в браузеры режимы для чтения: они отбрасывают ваши стили и прячут всё остальное, кроме главного контента.

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

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

На странице может быть только один . Однако спецификация уточняет:

В документе не должно быть больше одного , у которого нет атрибута hidden

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

Этот тег парный, обязательно закрывать его с помощью < / main>.

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

У нет своих атрибутов: к нему можно применить все глобальные атрибуты.

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

   Бургерочная «Минутка»   

О команде

Мы готовим бургеры с 2011 года. Это долго.

header> Бургерочная «Минутка» header> main> h1>О командеh1> p>Мы готовим бургеры с 2011 года. Это долго.p> main>

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

�� С виду — это обычный , но он семантически более важен для поисковиков. Обычно это блок, в котором расположен самый основной и важный блок страницы, чтобы поисковик индексировал его с повышенным приоритетом.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Тег появился в HTML не так давно. Поэтому даже опытные разработчики не всегда понимают его предназначение и не добавляют его в код.

Я всегда оборачиваю в этот тег всё, кроме , и . Таким образом поисковый робот быстрее найдёт основную информацию на сайте и лучше его проиндексирует.

main

Следы невиданных зверей

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

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

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

Браузеры

13 26 16 7 21
4.4 21 14 7

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

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

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

См. также

  • Структура в HTML
  • Элемент

Элемент main

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

Условия использования

  1. В данный элемент запрещено вкладывать следующие элементы со статичным, не меняющимся из документа в документ (в рамках сайта) содержанием: article , aside , footer , header , nav . То есть вышесказанное подразумевает, что допустим мы можем в данный элемент вложить элемент header в качестве заголовка для вложенной, уникальной (не повторяющейся более на сайте) статьи, но не можем вложить туда элемент header , который у нас выполняет роль визуального заголовка (с логотипом и именем) сайта (т.е. ‘шапку’ документа).
  2. Так же использование элемента main в документе более одного раза запрещено, так как в документе не может быть двух (трёх и более) основных содержаний.

HTML тег

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

Синтаксис

Содержимое тега размещается между открывающим (

) и закрывающим (
) тегами.

Пример

html> html> head> title>Заголовок документа title> head> body> main> h1>Языки программирования h1> p>Языки HTML и CSS предназначены для верстки сайтов. p> article> h2>HTML h2> p>HTML (Hyper Text Markup Language) - язык гипертекстовой разметки, который используется для создания веб-страниц. p> p>. p> p>. p> article> article> h2>CSS h2> p>CSS это язык стилей, определяющий отображение HTML-документов. p> p>. p> article> main> body> html>

Результат

mainexample1

Атрибуты

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

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

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

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