Главная / Верстка / Теги html / main тег html

main тег html


07.02.2015 13:453046

Описание

Тег main в html появился относительно недавно, поэтому многие его еще не используют, но всё когда-то начиналось, и новые html теги не являются исключением.

В html 5 появились семантические теги для лучшего представления содержимого документа. В предыдущих версиях html разработчики сайтов были вынуждены использовать определенные классы и идентификаторы для обозначения основных блоков на сайте (структура, скелет, каркас).

Верхней части html каркаса присваивали класс или id с именем header , например <div class="header"> или <div id="header"> , но это были лишь условные обозначения, и какого-либо смысла для поисковых роботов не несли, как и остальные, с именами для боковых блоков (сайдбаров), контентной части, и нижней части (футер).

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

Основное содержимое - в тег main,  примерно так можно охарактеризовать появление <main></main>. Проще говоря, то что раньше находилось внутри центральной части сайта, в основном это была контентная часть, теперь нужно выводить между открывающим и закрывающим main. Если раньше при верстке вы использовали обыкновенный div, например <div class="main"> или <div id="content">, то теперь у вас есть main.

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

Только уникальное содержимое main - это еще одно обязательное правило, которого нужно придерживаться с самого начала. Все что является повторяющимся дополнительным элементом, например навигация или поиск, не должно находиться внутри main, для этого можно найти другие блоки. Лучше всего внутри main выводить контент и основные заголовки (h1, h2), тег article тоже будет очень уместен внутри.

Не размещайте main как дочерний у элементов <article>, <aside>, <footer>, <header> или <nav>. На данный момент <main> не относится к структурным элементам и не влияет на структуру документа подобно article aside nav section.

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

Пример


1. Сделать main блочным с помощью css:

main { 
       display:block; 
    }

2. Создать объект в скрипте или просто подключить  html5shiv (на выбор):

 

<script>document.createElement('main');</script>

или

<!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>
      Тег main
    </title>
    <!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  
  <body>

        <main>
            <h1>Тег main</h1>
        </main>

  </body>

</html>


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

 


Синтаксис html и наличие закрывающего тега

Синтаксис Закрывающий тег
<main>...</main>

Браузеры поддерживающие <main>

Element
<main> 6.0 12.0 4.0 5.0 11.1


Html , Main , Тег , Тег Main





«main тег html» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям