Элемент <main>.

Перевод статьи:  The main element.
Автор:  Ian Devlin.

Ранее, в ноябре прошлого года я писал о предложенном HTML5 стандартом элементе <main>. И не так давно было официально заявлено о добавлении этого нового элемента в HTML5 спецификацию.

Вообще-то, <main> пока что добавлен лишь в W3C HTML5 спецификацию, чего WHATWG сообщество пока не сделало.

Он также был включен в следующую версию HTML стандарта — HTML 5.1.

Основа.

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

Определение.

W3C спецификация определяет элемент <main> для представления секции основного контента тела (элемента <body>) документа или приложения.

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

Факты.

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

Как уже упоминалось выше, целью элемента <main> является содержание основного контента документа или его тематики.

Если, к примеру, веб-документ содержит запись блога, то в таком случае она должна полностью заключаться в рамки элемента <main>:

<main role="main">
<h1>Нутрия</h1>
<section>
<h2>Знакомство</h2>
<p>Нутрия (или как в других местах её называют «болотный бобр») является
грызуном из рода дикобраза. Это водоплавающее животное, которое роет норы в берегах рек
и ручьев, и питается растущими в прилегающих к воде районах растениями.</p>
</section>
<section>
<h2>Место обитания</h2>
<p>Родиной нутрии является Южная Америка, но благодаря ее красивой и мягкой шкурке,
ее успешно разводят на фермах по всему миру, включая Британию. Случаи побегов нутрии из ферм
привели к тому, что этот зверек успешно обосновался в сельской местности Норфолка и
северного Саффолка, где прославился как злостный вредитель урожаев и берегов рек.</p>
</section>
<section>
<h2>Внешний вид</h2>
<p>Нутрия отчетливо напоминает выдру, а испанское слово «Nutria» в переводе
означает «выдра». Взрослая особь нутрии может весить до девяти килограмм
и вырастать до 60 сантиметров в длину. Этот зверек благодаря перепонкам на своих задних лапах
очень хорошо плавает. Он может держать и ловко перемещать предметы с помощью длинных
когтей передних лап. Его хвост длинный и чешуйчатый, но совсем не плоский.</p>
</section>
</main>

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

<main role="main">
<header>
<h1>Нутрия</h1>
<nav>
<a href="#intro">Знакомство</a>
<a href="#loc">Место обитания</a>
<a href="#app">Внешний вид</a>
</nav>
</header>
<section id="intro">
<h2>Знакомство</h2>
<p>Нутрия (или как в других местах её называют «болотный бобр») является
грызуном из рода дикобраза. Это водоплавающее животное, которое роет норы в берегах рек
и ручьев, и питается растущими в прилегающих к воде районах растениями.</p>
</section>
<section id="loc">
<h2>Место обитания</h2>
<p>Родиной нутрии является Южная Америка, но благодаря ее красивой и мягкой шкурке,
ее успешно разводят на фермах по всему миру, включая Британию. Случаи побегов нутрии из ферм
привели к тому, что этот зверек успешно обосновался в сельской местности Норфолка и
северного Саффолка, где прославился как злостный вредитель урожаев и берегов рек.</p>
</section>
<section id="app">
<h2>Внешний вид</h2>
<p>Нутрия отчетливо напоминает выдру, а испанское слово «Nutria» в переводе
означает «выдра». Взрослая особь нутрии может весить до девяти килограмм
и вырастать до 60 сантиметров в длину. Этот зверек благодаря перепонкам на своих задних лапах
очень хорошо плавает. Он может держать и ловко перемещать предметы с помощью длинных
когтей передних лап. Его хвост длинный и чешуйчатый, но совсем не плоский.</p>
</section>
</main>

Надеюсь все ясно?

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

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