Элемент main


Содержание
Илон Маск рекомендует:  Размеры блока

HTML тег

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

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

Илон Маск рекомендует:  Фиксированная ширина, навигация слева

Элемент не должен располагаться внутри элементов , , , или .

Примечание: Допускается использование элемента только один раз в одном документе.

Синтаксис

Закрывающий тег

Атрибуты

Элемент поддерживает глобальные атрибуты и события.

Элемент

Тег определяет основное содержимое документа.

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

Примечание: В документе не должно быть более одного элемента . Элемент не должен быть потомком элемента , , , , или элементов.

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

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

Элемент

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

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

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

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

Основа.

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

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

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

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

Факты.

  • В рамках веб-документа допускается применение только одного элемента .
  • Он не приводит к секционированию контента и поэтому не оказывает никакого влияния на структуру документа.
  • Для элемента рекомендуется применять WAI-ARIA атрибут role=»main» до тех пор, пока пользовательские агенты не начнут учитывать семантику нового элемента.

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

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

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


Нутрия

Знакомство

Нутрия (или как в других местах её называют «болотный бобр») является
грызуном из рода дикобраза. Это водоплавающее животное, которое роет норы в берегах рек
и ручьев, и питается растущими в прилегающих к воде районах растениями.

Место обитания

Родиной нутрии является Южная Америка, но благодаря ее красивой и мягкой шкурке,
ее успешно разводят на фермах по всему миру, включая Британию. Случаи побегов нутрии из ферм
привели к тому, что этот зверек успешно обосновался в сельской местности Норфолка и
северного Саффолка, где прославился как злостный вредитель урожаев и берегов рек.

Внешний вид

Нутрия отчетливо напоминает выдру, а испанское слово «Nutria» в переводе
означает «выдра». Взрослая особь нутрии может весить до девяти килограмм
и вырастать до 60 сантиметров в длину. Этот зверек благодаря перепонкам на своих задних лапах
очень хорошо плавает. Он может держать и ловко перемещать предметы с помощью длинных
когтей передних лап. Его хвост длинный и чешуйчатый, но совсем не плоский.

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

Нутрия

Знакомство

Нутрия (или как в других местах её называют «болотный бобр») является
грызуном из рода дикобраза. Это водоплавающее животное, которое роет норы в берегах рек
и ручьев, и питается растущими в прилегающих к воде районах растениями.

Место обитания

Родиной нутрии является Южная Америка, но благодаря ее красивой и мягкой шкурке,
ее успешно разводят на фермах по всему миру, включая Британию. Случаи побегов нутрии из ферм
привели к тому, что этот зверек успешно обосновался в сельской местности Норфолка и
северного Саффолка, где прославился как злостный вредитель урожаев и берегов рек.

Внешний вид

Нутрия отчетливо напоминает выдру, а испанское слово «Nutria» в переводе
означает «выдра». Взрослая особь нутрии может весить до девяти килограмм
и вырастать до 60 сантиметров в длину. Этот зверек благодаря перепонкам на своих задних лапах
очень хорошо плавает. Он может держать и ловко перемещать предметы с помощью длинных
когтей передних лап. Его хвост длинный и чешуйчатый, но совсем не плоский.

Как пользоваться секционными элементами HTML5

Дата публикации: 2014-03-28

От автора: В HTML5 представлены несколько секционных элементов, которые можно применять для разметки веб-страниц. Использование таких элементов передает страницам больше семантического смысла, позволяя компьютерным программам лучше понимать ваш контент.

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

Элемент main

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

В нижеприведенном примере элемент main применяется для представления основного содержимого страницы.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Заметьте: мы применили здесь атрибут ARIA role=”main” для указания на значимость этого элемента для программ, которые пока не поддерживают элемент main (таких как некоторые screen reader-ы).

На странице следует использовать всего один элемент main, и его нельзя размещать внутри элементов article, aside, header, footer или nav.

Элемент article

В элементе article должен содержаться фрагмент автономного содержимого, которое можно распределять вне контекста страницы. Оно включает в себя новые статьи, посты блогов или комментарии пользователей.

Элементы article можно размещать один в другом. В данном случае подразумевается, что вложенные элемент связаны с внешним элементом article.

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

Элемент section

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

Для определения темы раздела советуем пользоваться элементом заголовков (h1 – h6).


Воспользуемся данным постом блога как примером: можно взять элементы section, представляющие внутри поста каждый раздел по отдельности.

Здесь мы применили элемент article, чтобы представить пост как одно целое, а затем множеством элементов section, чтобы представить каждый из обсуждаемых в посте подразделов. Если вам нужно просто сгруппировать содержимое с целью назначения ему стилей, вам следует воспользоваться элементом div, а не section.

Элемент nav

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

Разметка ссылок внутри списка заметно облегчает использование навигации, однако не является необходимым условием использования элемента nav.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Элемент aside

Элемент aside применяется для представления содержимого, четко связанного с окружающим его контентом, но которое можно счесть отдельным. Это включает боковые колонки (такие, как можно видеть в книге), группы элементов nav, цифровые данные и извлеченные цитаты.

В этом примере для разметки информации о Google внутри новостной статьи мы воспользовались элементом aside. Пользователь может счесть информацию о компании в aside полезной, но с новостями она напрямую не связана.

Элемент header

Элемент header применяется для представления вводного содержимого к статье или веб-странице. Обычно он содержит элемент заголовка, а также существенные для содержимого метаданные, такие как дата поста или новостной статьи, например. В нем также может содержаться оглавление (в элементе nav) более длинного документа.

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

В данном примере элемент header содержит заголовок и дату новостной статьи.

Элемент footer используется для представления информации о разделе: автор, копирайт или ссылки на связанные веб-страницы.

Как и в случае с header, элемент footer связывается с ближайшим элементом секционирования.

Элемент address

Элемент address — один из самых неверно понимаемых элементов HTML. Он предназначен не для разметки почтового адреса, а для представления контактной информации статьи или веб-страницы. Это может быть ссылка на сайт автора или его электронный адрес.

Этот элемент часто используется внутри footer для article.

Последние размышления об элементах секционирования

Из этого поста вы узнали, как пользоваться элементами секционирования HTML5 при разметке веб-страниц. Их применение гарантирует массу преимуществ. Одно из основных – передача определенным областям страницы более семантического значения, создание возможности для компьютерных программ идентифицировать ключевые элементы, такие как основной контент и страничная навигация. Эта информация чрезвычайно важна для таких приложений, как screen reader-ы.

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

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

Мне интересно узнать, что вы думаете об элементах секционирования HTML5. Поделитесь своим мнением в разделе комментариев под постом.

Автор: Matt West

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Атрибут role в HTML5

Да зачем он нужен?!

С приходом HTML5, появилось множество семантических тегов предназначенных для «понимания» кода поисковиками и людьми ( чтобы было легче разобраться в назначении тех или иных блоков страницы ), так вот атрибут role, позволяет наиболее четко указать назначение блока/элемента страницы при взаимодействии пользователя с сайтом.

Излишне злоупотреблять, конечно, атрибутом не стоит, если разметка и так проста, и можно обойтись использованием элементов section, article, nav, aside и др. Но, допустим если сайт имеет множество таких блоков, то здесь стоит задуматься об использовании role.


Основные
и наиболее часто используемые значения role

  • banner — содержит главный заголовок или внутренний заголовок страницы. Например логотип и название сайта. Рекомендуется использовать не больше одного раза на странице.
  • complementary — информационный блок, отделенный от основного содержания ресурса.
  • contentinfo — обобщающая информация о содержании страницы ( к примеру футер сайта ). Рекомендуется использовать не больше одного раза на странице.
  • definition — указывает определение термина или понятия.
  • main — выступает в качестве основного содержания документа. Рекомендуется использовать не больше одного раза на странице.
  • navigation — набор элементов предназначенных для навигации по документу или связанным документам. Рекомендуется использовать не больше одного раза на странице.
  • note — заметка ( вспомогательная информация) к основному содержанию ресурса.
  • search — указывает область для поиска по содержимому.

Упрощенный пример использования

Как я уже говорил, при простой разметке атрибут role — смысла использовать нет, по сути вышеприведенный пример нисколько неоправдан, но ведь это пример :)

Возможные значения role

В следующей таблице приведены другие возможные значения атрибута role:

HTML :: Подробнее о структуре html-документа

Основные элементы разметки html-документа

Как мы уже знаем, любой html -документ содержит заголовок документа ‘head’, предназначенный для хранения служебной информации, и тело документа ‘body’, в котором располагается информация, предназначенная для вывода на экран пользователя. Однако с развитием языка HTML он все больше стал отвечать за логическую разметку документа, что привело к появлению ряда новых тегов и сформированных ими элементов: ‘header’, , ‘footer’, ‘aside’, ‘nav’, ‘section’, ‘article’ (см. пример. №1). Все они находятся в теле документа и по необходимости делят его на логические блоки, которые соответствующим образом воспринимаются поисковыми машинами. Отметим, что своих атрибутов, за исключением глобальных, данные элементы не имеют, а браузеры по умолчанию отображают их, как блочные элементы.

Пример №1. Использование элементов структурной разметки

Шапка сайта, тег

Элемент ‘header’ формируется парным тегом (от англ. header – шапка, верхний колонтитул) и устанавливает шапку веб-страницы или раздела. Если он выступает в роли шапки сайта, то в нем обычно располагаются имя сайта, логотип, меню, поисковая панель или дополнительная информация (см. пример №1). Кроме того, он может формировать заголовки разделов (секций) html -страницы. Внутри данного элемента запрещается располагать элемент ‘main’ или другой элемент ‘header’ . При этом сам элемент ‘header’ запрещается вкладывать внутрь элементов ‘footer’ и ‘address’.

Основное содержимое страницы, тег

Элемент ‘main’ формируется парным тегом (от англ. main – главный, основной) и предназначен для выделения основного содержимого веб-страницы (см. пример №1). На странице разрешается использовать только один элемент ‘main’ , внутри которого нужно размещать уникальную информацию текущей страницы, а не повторяющиеся разделы вроде поисковой или навигационной панели сайта. Кроме того, запрещается располагать элемент внутри элементов ‘header’, ‘footer’, ‘section’, ‘article’, ‘nav’ или ‘aside’.

‘Подвал’ сайта, тег

Для размещения сведений об авторских правах, контактной информации, даты последнего обновления документа или раздела, дополнительной навигации и прочей информации, относящейся к служебной информации всего сайта или раздела, а не к основному контенту страницы или раздела, используется элемент ‘footer’ , который формируется соответствующим парным тегом (от англ. footer – нижний колонтитул, подвал). На жаргоне веб-разработчиков элемент ‘footer’ называют ‘подвалом’ сайта или раздела (см. пример №1).

Боковая панель сайта. Тег

Элемент ‘aside’ формируется парным тегом (от англ. as >’aside’ в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент ‘nav’, который описывается в следующем пункте.

Создание блоков навигации, тег

Элемент ‘nav’ формируется парным тегом (от англ. navigation – навигация) и применяется для создания блока навигации, ссылки которого могут указывать как на разделы самого сайта, так и на внешние ресурсы (см. пример №1). Самих блоков может быть несколько и расположены они могут быть в любом месте тела документа, за исключением элемента ‘address’ . При этом рекомендуется использовать его именно в качестве основного меню, чтобы пользователи могли с его помощью свободно перемещаться по разделам сайта. Также элемент ‘nav’ хорошо подходит для навигации по очень большой (длинной) статье, пусть даже и расположенной на одной странице, но содержащей много разделов и заголовков различных уровней.

Создание тематических разделов, тег

Для того, чтобы можно было разбить веб-страницу на тематические разделы, в HTML был введен еще один элемент разметки ‘section’ . Формируется он соответствующим парным тегом (от англ. section – секция, раздел). Данные тематические разделы подразумевают, как правило, наличие собственных заголовков. В качестве тематических разделов могут выступать, например, пункты данного параграфа, главы содержимого страницы или блоки с кратким описанием разделов сайта на домашней странице (см. пример №1). Отметим, что данный элемент должен применяться для явного разделения страницы на разделы, чтобы они различались по содержанию и смыслу. Разрешается использовать одни элементы ‘section’ внутри других.

Выделение раздела для новости или статьи, тег

Элемент ‘article’ выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Формируется элемент при помощи соответствующего парного тега (от англ. article – статья). В данных элементах может присутствовать собственный заголовок одного из уровней h1-h6 , а также собственные локальные элементы ‘header’, ‘footer’, ‘section’, ‘nav’ или ‘as >’article’ внутри других.


main element — an HTML5 extension specification

W3C Working Group Note 28 May 2013

Abstract

This specification has been integrated into the HTML specification and is no longer developed separately. This document is only made available for historical purposes.

This specification is an extension to the HTML5 specification [HTML5]. It defines an element to be used for the identification of the main content area of a document. All normative content in the HTML5 specification, unless specifically overridden by this specification, is intended to be the basis for this specification.

The main element formalises the common practice of identification of the main content section of a document using the id values such as ‘content’ and ‘main’. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main .

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document was published by the HTML Working Group as a Working Group Notes. If you are not a HTML working group member and wish to make comments regarding this document please send them to public-html-comments@w3.org (subscribe, archives). If you are a HTML working group member and wish to make comments regarding this document, please send them to public-html@w3.org (subscribe, archives). All feedback is welcome.

Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

Table of Contents

Conformance

This specification describes the conformance criteria for user agents (relevant to implementers) and documents (relevant to authors and authoring tool implementers).

As well as sections marked as non-normative, all authoring gu >must, must not, required, should, should not, recommended, may, and optional in this specification are to be interpreted as described in [ RFC2119 ].

The element

The main element represents the of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Note: the main element is not sectioning content and has no effect on the document outline

The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

Authors MUST NOT include more than one main element in a document.

Authors MUST NOT include the main element as a child of an article , aside , footer , header or nav element.

Note: Authors are advised to use ARIA role=»main» attribute on the main element until user agents implement the required role mapping.

Code examples

In the following example, we see 2 articles about apples (the main topic of a Web page) the main topic content is identified by the use of the main element.

Here is a graduation programme the main content section is defined by the use of the main element. Note in this example the main element contains a nav element consisting of links to sub sections of the main content.

Guidance for User Agents and HTML specification editors

User agents MUST map the main element to the ARIA landmark role of main .

User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.

Remove the section of the HTML5 specification titled 4.13.1 The main part of the content, as this specification makes the content of the cited section no longer applicable.

Rendering

This section is to be treated as a subsection of HTML’s Rendering section for the purpose of terminology, conformance classes and requirements.

CSS:

The User Agent style sheet SHOULD include the following style rule for the main element:


» :not(main) » SHOULD be added to 10.3.5 Bidirectional style rule in the HTML5 spec:

:matches([dir=ltr i], [dir=rtl i], [dir=auto i])
:not(address):not(blockquote ):not(center):not(div):not(figure):not(figcaption):not(footer):not(form ):not(header):not(hr):not(legend):not(listing):not(p):not(plaintext):not(pre ):not(summary):not(xmp):not(article):not(as >:not(main) :not(h1):not(h2):not(h3):not(h4 ):not(h5):not(h6):not(hgroup):not(nav):not(section):not(table):not(caption ):not(colgroup):not(col):not(thead):not(tbody):not(tfoot):not(tr):not(td ):not(th):not(dir):not(dd):not(dl):not(dt):not(menu):not(ol):not(ul):not(li)

Parsing

This section is to be treated as a subsection of HTML’s The rules for parsing tokens in HTML content section for the purpose of terminology, conformance classes and requirements.

The tag name » main » must be added to 8.2.5.4.7 The «in body» insertion mode at the following steps:

A start tag whose tag name is one of: «address», «article», «as >»main», «menu», «nav», «ol», «p», «section», «summary», «ul»

An end tag whose tag name is one of: «address», «article», «as >»main», «menu», «nav», «ol», «pre», «section», «summary», «ul»

References


Normative references

Notes

A Rationale / Use Case document for the addition of the main feature to HTML is available.

From publicly reported studies [1] of id values used in HTML content, the use of the strings «content» and «main» are common practice. A recent study has provided data which shows a strong correlation between the use of the aforementioned id values as targets for ‘skip links’ and also a strong correlation with the use of ARIA role=main on elements having the aforementioned id values.

Acknowledgements

Thanks to Mike [tm] Smith, Dave Bolter, Leonie Watson, Gez Lemon, Sarah Bourne, Henri Sivonen, James Craig, Simon Pieters, Mat Marquis, Ian Devlin, Marcos Caceres and many others.

Enabling Funder

The development of this publication is being funded by The Paciello Group. The content of this publication does not necessarily reflect the views or policies of The Paciello Group, nor does mention of trade names, commercial products, or organizations imply endorsement by The Paciello Group.

HTML5

Грамматика и ассоциированные API для HTML и XHTML

Рекомендации W3C от 28 октября 2014 г.

4.4 Группирование содержимого

4.4 Группирование содержимого

4.4.1 Элемент

Хотя абзацы обычно представлены в визуальных носителях блоками текста, физически отделёнными от смежных блоков пустыми строками, таблица стилей или ПА (пользовательский агент) имеют право представлять разделение параграфов разными способами, например, с помощью знаков абзаца (¶).

Элемент p не следует использовать, если имеется более подходящий элемент.

Однако лучше будет разметить это так:

and is further discussed below.

Решением может быть реализация такого абзаца , в терминах HTML, не как логическое понятие, а как структурное. В примере выше реально есть 5 абзацев, как определено данной спецификацией: один перед списком, по одному для каждого пункта списка и один после списка.

Авторы, желающие удобно стилизовать такие «логические» абзацы, состоящие из нескольких «структурных» абзацев, могут использовать элемент div вместо p .

Этот пример по-прежнему имеет 5 структурных абзацев, но теперь автор может стилизовать их элементом div вместо необходимости рассматривать каждую часть примера по отдельности.

4.4.2 Элемент

Элемент hr представляет тематический разрыв уровня абзаца , например, смену мизансцены или переход к другому топику внутри раздела справочника.

Нет необходимости использовать элемент hr между самими разделами, поскольку элементы section и h1 сами подразумевают тематические изменения.

Элемент hr не влияет на каркас документа.


4.4.3 Элемент

Элемент pre представляет блок отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами.

В HTML-синтаксисе ведущий символ новой строки сразу после элемента pre вырезается.

Вот некоторые примеры использования элемента pre :

  • Вставка e-mail, с абзацами, обозначенными пустыми строками; списки обозначенные строками с префиксами в виде знака чёрного кружка, и т. д.
  • Вставка фрагментов компьютерного кода со структурой, обозначенной в соответствии с соглашениями языка.
  • Отображение ASCII-«рисунка».

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

Для представления блока компьютерного кода элемент pre можно использовать с элементом code ; для представления блока компьютерного вывода элемент pre можно использовать вместе с элементом samp . Аналогично элемент kbd можно использовать с элементом pre для обозначения текста, который пользователь должен ввести.

4.4.4 Элемент

Интерфейс HTMLQuoteElement также используется элементом q .

Элемент blockquote представляет содержимое, цитированное из другого источника, опционно – с цитатой, которое может находиться внутри элемента footer или cite , и – опционно – с инлайн-изменениями вроде аннотаций и аббревиатур.

Содержимое внутри blockquote – не цитаты и не инлайн-изменения – должно цитироваться из иного источника, чей адрес, если имеется, может цитироваться в атрибуте .

Когда страница содержит материал от нескольких людей, вроде комментариев блога, ‘иной источник’ может включать текст с той же страницы, написанный другим лицом.

Если атрибут cite присутствует, он обязан быть допустимым URL, возможно, окружённым пробелами. Для получения соответствующей ссылки на цитату значение этого атрибута должно быть развёрнуто относительно этого элемента. ПАгенты могут предоставлять пользователям возможность перехода по таким ссылкам цитирования, но они предназначены в первую очередь для приватного использования (например, серверными скриптами, собирающими статистику об использовании цитирования на сайте), а не для читателя.

Содержимое blockquote может быть сокращённым, может иметь добавленный контекст или может иметь аннотации. Любые подобные добавления или изменения в текст цитаты должны быть обозначены в тексте (на текстовом уровне). Это может означать использование условных обозначений или явных ремарок типа «курсив мой».

Знаки цитирования могут использоваться для разделения цитируемого текста и аннотаций внутри blockquote .

Например, вот инлайн-примечание, вставленное автором:

В этом примере цитата содержится внутри footer элемента figure , что группирует и ассоциирует информацию о цитате с самой цитатой. Элемент figcaption не был использован в данном случае как контейнер для цитаты, так как это не заголовок.

Атрибуция (приписывание) для цитаты может быть помещена внутрь элемента blockquote , но обязана быть внутри элемента cite – для текстовых атрибуций, или внутри элемента footer .

Не существует формального способа обозначения того, что разметка в blockquote – из источника цитаты. Предполагается, что, если элементы footer или cite включены и также использованы внутри blockquote для идентификации цитирования, элементы из источника цитирования могут быть аннотированы метаданными для идентификации источника происхождения, например, атрибутом class (определённый механизм расширения).

Другие примеры ниже показывают иные способы показа атрибуции.

Примеры того, как представить беседу, показаны в следующем разделе; элементы cite и blockquote для этого не подходят.

4.4.5 Элемент

Элемент ol представляет список пунктов, где пункты намеренно упорядочены так, что изменение порядка изменит смысл документа.

Пункты списка это узлы дочерних элементов li элемента ol , в порядке дерева .

Атрибут это булев атрибут. Если присутствует, он указывает, что список имеет обратную нумерацию (. 3, 2, 1). Если атрибут отсутствует, список нумерован по восходящей (1, 2, 3, . ).

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

Первый пункт списка имеет порядковое значение, заданное атрибутом start элемента ol , если только этот элемент li не имеет атрибута value со значением, которое может быть успешно разобрано, и тогда первый пункт списка имеет порядковое значение, заданное атрибутом value .

Каждый последующий пункт списка имеет порядковое значение, заданное его атрибутом value , если имеется, или, если атрибут отсутствует, порядковым значением предыдущего пункта плюс 1, если отсутствует reversed , или минус 1, если reversed имеется.

Атрибут может использоваться для специфицирования типа маркёра списка, когда это имеет смысл (например, когда пункты не нумерованы цифрами/буквами). Этот атрибут, если специфицирован, обязан иметь значение – регистрозависимое совпадение с одним из символов в первой ячейке одного из радов нижеследующей таблицы . Атрибут type представляет статус в ячейке второго столбца ряда, первая ячейка которого совпадает со значением атрибута; если ни одна из ячеек не совпадает, или если атрибут отсутствует, то этот атрибут представляет статус decimal.

Ключевое слово Статус Описание Примеры значений 1-3 и 3999-4001
(U+0031) Десятичные числа 1. 2. 3. . 3999. 4000. 4001. .
(U+0061) Латинская буква в нижнем регистре a. b. c. . ewu. ewv. eww. .
(U+0041) Латинская буква в верхнем регистре A. B. C. . EWU. EWV. EWW. .
(U+0069) Римские цифры в нижнем регистре i. ii. iii. . mmmcmxcix. i̅v̅. i̅v̅i. .
(U+0049) Римские цифры в верхнем регистре I. II. III. . MMMCMXCIX. I̅V̅. I̅V̅I. .

Для CSS ПАгентов отображение этого атрибута в CSS-свойство ‘list-style-type’ дано в разделе отображения (отображения является прямыми: вышеуказанные статусы имеют те же имена, что их соответствующие CSS).

Обратите внимание, как изменение порядка списка изменяет смысл документа. В следующем примере изменение относительного порядка первых двух элементов изменяет место рождения автора:


4.4.6 Элемент

Элемент ul представляет список пунктов, где порядок пунктов не важен — то есть, где изменение порядка не изменяет в целом смысл документа.

Пункты списка это узлы дочерних элементов li элемента ul .

Заметьте, что изменение порядка списка не изменяет смысл документа. Пункты предыдущего фрагмента даны в алфавитном порядке, а в нижнем фрагменте – по размеру бюджета в 2007 году, без изменения значения самог ó документа:

4.4.7 Элемент

Элемент li представляет пункт списка. Если его родительский элемент это ol или ul , то li является пунктом списка родительского элемента, как в них определено. Иначе – пункт списка не имеет определённых списочных соотношений с любым другим элементом li .

Если родительский элемент это ol , то li имеет .

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

Атрибут value обрабатывается относительно родительского элемента ol (см.), если ol имеется. Если нет – атрибут не работает.

Разметка может также быть записана следующим образом, используя атрибут reversed в элементе ol :

Хотя и разрешается включать элементы заголовков (например, h1 ) внутрь элементов li , это наверняка не будет соответствовать семантике, задуманной автором. Заголовок начинает новый раздел, поэтому заголовок в списке неявно разделяет список несколько разделов.

4.4.8 Элемент

Элемент dl представляет ассоциативный список из нуль или более групп name-value (список описания). Группа name-value (имя-значение) состоит из одного или более имён ( dt -элементов) с последующими одним или более значениями ( dd -элементы), игнорируя любые узлы, кроме элементов dt и dd . Внутри одного элемента dl должно быть не более одного элемента dt для каждого имени.

Группы name-value могут быть терминами и определениями, топиками и значениями метаданных, вопросами и ответами, либо другими группами данных name-value.

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

Порядок списка групп и имён и значений в каждой группе может иметь значение.

Если элемент dl имеет один или более дочерний не-пробельный Text -узел или имеет дочерние элементы – не dt или не dd , то все такие Text -узлы и элементы, а также их потомки (включая любые dt или dd ), не образуют часть любой группы в этом dl .

Если элемент dl имеет один или более дочерний dt , но не имеет дочерних dd , то он состоит из одной группы с именами, но без значений.

Если элемент dl имеет один или более дочерний dd , но не имеет дочерних dt , то он состоит из одной группы со значениями, но без имён.

Если первый дочерний dt или dd в dl это элемент dd , то первая группа не имеет ассоциированного имени.

Если последний дочерний dt или dd в dl это элемент dt , то последняя группа не имеет ассоциированного значения.

Когда элемент dl не совпадает с его моделью содержимого, это часто бывает из-за случайного использования элементов dd вместо dt , и наоборот. Проверщики соответствия могут замечать эти ошибки и могут уведомлять автора о необходимости корректного использования этой разметки.

Элемент dl не подходит для разметки диалога. Примеры разметки диалога даны ниже.

4.4.9 Элемент

Элемент dt представляет термин, или имя, часть группы термин-описание в списке описаний ( dl -элементе).

Сам элемент dt , если используется внутри dl , не указывает, что его содержимое это определяемый термин, а указать это можно с помощью элемента dfn .

4.4.10 Элемент

Элемент dd представляет описание, определение или значение, часть группы термин-описание в списке описаний ( dl -элементе).

4.4.11 Элемент

Элемент figure представляет некоторое потоковое содержимое, опционно с подписью/caption, являющееся самодостаточным (как полное предложение), на которое обычно ссылаются как на единый блок из главного потока документа.

Самодостаточное в данном контексте не обязательно означает независимое. Например, каждое предложение в абзаце является самодостаточным; Изображение как часть предложения может не подходить для figure , но целое предложение, сделанное из изображений, подойдёт.

Этот элемент, таким образом, может быть использован для аннотирования иллюстраций, диаграмм, фотографий, листинга кода, etc.

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


Первый дочерний figcaption элемента, если имеется, представляет собой подпись/название содержимого элемента figure . Если дочернего элемента figcaption нет, то нет и названия-подписи.

Содержимое элемента figure это часть окружающего потока. Если задача страницы – отображение рисунка/фигуры, например, фотографии с сайта, элементы figure и figcaption могут быть использованы для явного предоставления подписи к рисунку. Для содержимого, имеющего лишь косвенное отношение или служащего целям, отличным от окружающего потока, следует использовать элемент aside (который сам может быть оболочкой для figure ). Например, цитата, повторяющая содержимое из article , может быть более подходящей в aside , чем в figure , потому что она не является частью содержимого, это повторение содержимого для целей привлечения читателей или выделения ключевых топиков.

The API is designed to use UTF-8.

4.4.12 Элемент

Элемент figcaption представляет подпись/название или легенду для остального содержимого элемента figure – родительского для элемента figcaption , если имеется .

4.4.13 Элемент

Элемент div не имеет специального смысла вообще. Он представляет свои дочерние элементы. Может использоваться с атрибутами class , lang и title для разметки семантики, общей для групп последовательных элементов.

Авторам настоятельно рекомендуется считать div элементом «последней инстанции», когда ни один другой элемент не подходит. Использование более подходящих элементов вместо div даёт большую доступность для читателей и облегчает авторам обслуживание.

С другой стороны, элементы div могут пригодиться для стилистических целей или для обёртывания нескольких абзацев в пределах раздела, которые аннотируются одинаково. В следующем примере мы видим элементы div как способ разом настроить язык двух абзацев, вместо установки языка по отдельности для каждого абзаца:

4.4.14 Элемент

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

Элемент main это не содержимое раздела и он не влияет на каркас документа.

Область основного содержимого документа включает в себя содержимое, которое уникально для этого документа и исключает содержимое, повторяющееся в наборе нескольких документов, такое как ссылки навигации, авторские права, логотип сайта и баннеры и поисковые формы (если только основная функция документа или приложения – не поисковая форма).

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

Авторы обязаны не включать в документ более одного элемента main .

Авторы обязаны не включать элемент main в качестве потомка элемента article , aside , footer , header или nav .

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

Авторам рекомендуется использовать ARIA-атрибут role=»main» в элементе main , пока ПАгенты реализуют необходимое отображение ролей.

В следующем примере мы видим 2 статьи о скейтбордах (основной топик вэб-страницы), основной топик содержимого идентифицируется использованием элемента main .

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

HTML5 Doctor

Helping you implement HTML5 today

The main element

Recently, was formally added to the W3C HTML specification. Now that the dust has settled, it’s about time we dive in to find out where and when it’s appropriate to use . Let’s get started.

History

The inclusion of a main element (or similar) has long been debated in the working groups with authors and others often questioning why we had new elements such as , , and but no element to accurately describe the primary content of a page.

Steve Faulkner, an accessibility consultant and new doctor in residence, undertook the hard graft of carrying out research, gathering data and use cases, and speaking to implementers to get them interested. As Steve explains, he talked to:

as many implementers (both general browser implementers and accessibility implementers), developers, authors and users as I could and got advice and input from them. I went where the various people hung out; on IRC, mailing lists, twitter, blogs, conferences — anywhere.

This led to his writing an extension specification for and a thorough use case rationale.

The proposal was accepted in November 2012, and was then rolled into the HTML5.1 specification. Recently, it was added to the HTML5 specification following no objections. Lets have a look at how the spec describes .

W3C Specification

The primary purpose of is to map ARIA’s landmark role main to an element in HTML. This will help screen readers and other assistive technologies understand where the main content begins. The W3C spec describes as representing:

The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Since the element is now included in the HTML specification, the element has reverted to its HTML4 definition:

The body element represents the content of the document.

More Details

One important facet of is that it can only be used once per page. Jeremy Keith wrote to the working group to understand why this is the case (rather than allowing multiple s). Although I won’t go into detail, the discussion is an interesting read.

As per the spec, the W3C validator throws an error if you attempt to use multiple elements per document.

Another stipulation of is that it can’t be used as a descendant of an , , , , or

Элемент

Компании Main Element&Aromic это:

MAIN ELEMENT – реклама с “ПЕРЦЕМ” . Маркетинговая и рекламно-производственная компания полного цикла. Основные направления деятельности:

Основные направления деятельности:

  • производим АРОМАФИШКИ=РЕШЕНИЯ+ПРОДУКТ
  • Разрабатываем и внедряем КОМПЛЕКСНЫЕ РЕШЕНИЯ ААРОМАМАРКЕТИНГ И АРОМАБРЕНДИНГА для БИЗНЕСА
  • разрабатываем ИНДИВИДУАЛЬНЫЙ АРОМАТ согласно корпоративной Пирамиде ароматов
  • АРОМАДИЗАЙН пространства, мероприятий

Наша ФИШКА – МЫ создаем и внедряем в Ваш продукт/услугу ЦЕННОСТЬ для клиента и немного специй -АРОМАТНЫЙ ПЕРЧИК. О ЛИДЕРЕ

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL