#d14073 шестнадцатеричный код цветов

Никогда не говори никогда

Как же всё-таки быть с , ведь этот элемент для чего-то нужен? Если рассматривать проблему с точки зрения доступности и удобства пользователей с особыми потребностями, тег имеет смысл. На иллюстрации ниже видно, как обёрнутое в саммари подчёркивается горизонтальной линией.

Элемент отделяется горизонтальной чертой снизу

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

Проблема решается, если обернуть нужный блок в .

Большинство скринридеров не выделяет контент в элементе , если у него нет доступного заголовка. Роль заголовка в примере выше играет значение . Благодаря нему скринридер объявляет начало и конец саммари: «Quick summary region, quick summary region end». Кроме того, разметка позволяет пользователю скринридера при необходимости пропускать саммари.

Вложенные элементы

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

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

Чего НЕ ДЕЛАТЬ

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

Как семантическая верстка влияет на оптимизацию?

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

Это новшество позволяет забыть о старых методах SEO с закрытием от индексации навигационных ссылок, футера и других вспомогательных блоков. Контентные приоритеты теперь задаются напрямую структурными тегами, независимо от места расположения на странице.

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

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/.

The W3C HTML Working Group is the W3C working group
responsible for this specification’s progress. This specification is the 28 October
2014 Recommendation.

A comprehensive test suite for this specification is maintained and kept up to date as part of
the WebPlatform Tests project.
Please see the Working Group’s implementation
report.

Work on evolutions of this specification proceeds at
http://www.w3.org/TR/html/. The HTML5 Recommendation
represents a milestone in the development of HTML but far from being the end of the road and
improvements are already well under way. It is possible that future versions will no longer be
published as a monolithic specification but rather as a set of smaller modules. Irrespective of
whether that is the case or not, http://www.w3.org/TR/html/
will be maintained as the entry point to the entirety of HTML technology.

Work on extending this specification typically proceeds through
extension specifications
which should be consulted to see what new features are being reviewed.

The bulk of the text of this specification is also available in the WHATWG
HTML Living
Standard, under a license that permits reuse of the specification text.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups
and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable
document and may be used as reference material or cited from another document. W3C’s role in
making the Recommendation is to draw attention to the specification and to promote its
widespread deployment. This enhances the functionality and interoperability of the Web.

Work on this specification is also done at the WHATWG. The
W3C HTML working group actively pursues convergence of the HTML specification with the WHATWG
living standard, within the bounds of the W3C
HTML working group charter. There are various ways to follow this work at the WHATWG:

  • Commit-Watchers mailing list (complete source diffs): http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org
  • Annotated summary with unified diffs: http://html5.org/tools/web-apps-tracker
  • Raw Subversion interface:

The following editorial changes were made since Proposed Recommendation:

  • The manner in which updates to this specification will be published was clarified.
  • The IANA registration for was accepted during PR, leading to a small update to the corresponding section.
  • «Decoder error» was mistakenly listed as a URL-related definition when
    it is in fact Encoding-related
  • «Parsed URL» has been given a proper mapping to the URL specification
  • Improved the informative summary for several elements. (Mostly pointers to tag omission and ARIA rules.)
  • Updated a few references to documents that have seen new revisions (RFC4281, RFC2313, RFC3490, MPEG-DASH) and provided a more stable link to BECSS.
  • Added a note about and made some modifications to the URL reference.
  • A number of small styling tweaks were made and typos were fixed.

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 must disclose the information in accordance with .

This document is governed by the 14 October 2005 W3C Process Document.

Семантические элементы HTML5

Н¸Ã¶Ãµ ÿÃÂøòþôøÃÂÃÂàÃÂÿøÃÂþú ýþòÃÂàÃÂõüðýÃÂøÃÂõÃÂúøàÃÂûõüõýÃÂþò, ôþñðòûõýýÃÂàò HTML5.

âõó ÃÂÿøÃÂðýøõ
ÃÂÿÃÂõôõûÃÂõàÃÂÃÂðÃÂÃÂÃÂ
ÃÂÿÃÂõôõûÃÂõàñûþú ÃÂñþúàþàþÃÂýþòýþóþ úþýÃÂõýÃÂð
ÃÂÿÃÂõôõûÃÂõàôþÿþûýøÃÂõûÃÂýÃÂàøýÃÂþÃÂüðÃÂøÃÂ, úþÃÂþÃÂÃÂàÿþûÃÂ÷þòðÃÂõûàüþöõàþÃÂúÃÂÃÂòðÃÂàøûø ÷ðúÃÂÃÂòðÃÂÃÂ
ÃÂÿÃÂõôõûÃÂõàÿþÃÂÃÂýõýøõ ôûàÃÂûõüõýÃÂð
ÃÂÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàôûàóÃÂÃÂÿÿøÃÂþòðýøàÃÂð÷ûøÃÂýÃÂàÃÂðüþôþÃÂÃÂðÃÂþÃÂýÃÂàÃÂûõüõýÃÂþò — øûûÃÂÃÂÃÂÃÂðÃÂøù, ôøðóÃÂðüü, ÃÂþÃÂþóÃÂðÃÂøù, ûøÃÂÃÂøýóþò úþôð ø ÃÂ.ô.
ÃÂÿÃÂõôõûÃÂõà«Ã¿Ã¾Ã´Ã²Ã°Ã»» ôþúÃÂüõýÃÂð øûø ÃÂð÷ôõûð
ÃÂÿÃÂõôõûÃÂõà«ÃÂðÿúû ôþúÃÂüõýÃÂð øûø ÃÂð÷ôõûð
ÃÂÿÃÂõôõûÃÂõàþÃÂýþòýþù úþýÃÂõýàôþúÃÂüõýÃÂð
ÃÂÿÃÂõôõûÃÂõàüðÃÂúøÃÂþòðýýÃÂù/ÿþôÃÂòõÃÂõýýÃÂù ÃÂõúÃÂÃÂ
ÃÂÿÃÂõôõûÃÂõàñûþú ýðòøóðÃÂøþýýÃÂàÃÂÃÂÃÂûþú
ÃÂÿÃÂõôõûÃÂõàÃÂð÷ôõû ò ôþúÃÂüõýÃÂõ
ÃÂÿÃÂõôõûÃÂõàòøôøüÃÂù ÷ðóþûþòþú ÃÂûõüõýÃÂð
ÃÂÿÃÂõôõûÃÂõàôðÃÂÃÂ/òÃÂõüÃÂ

Почему надо это использовать?

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

Google и Bing боты, если и не слепы, то имеют серьёзное ослабление со зрением. Для них визуальные пояснения феноменально сложно увидеть и понять.

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

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

Most important content — самый важный контент

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

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

Более сложные примеры

Использование секций и

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

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

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

Так же примите во внимание, что тут мы добавили секцию навигации в подвал. Логически, как и в шапке, подвал содержит элементы навигации

Связанный Aside

Тут мы добавили две части связанного контента к главной контента. Используя aside, мы определяем то, что связанный контента (aside) опционален. То есть основная секция контента может быть показана без aside и все равно будет понятна.

Косвенно связанный aside

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

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

Что такое семантический HTML5?

Если вы более менее знакомы с HTML, то вы должны знать про HTML теги, которые в большинстве своём используются для форматирования контента — они говорят браузеру как показывать контент на странице. Они не дают определение типу содержащегося контента или какую роль играет контент на странице.

Перевод статьи How to Use Semantic HTML5 for Document Structure — a guide.

Мой Твиттер — там много из мира фронтенда, да и вообще поговорим. Подписывайтесь, будет интересно: ) ️

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

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

Примеры

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

А это семантические элементы. Они ясно определяют роль содержимого контента.

Типы

Следующие типы используются при определении атрибутов в протоколе Open Graph.

Тип Описание Литерал
Представляет логическое значение true или false true, false, 1, 0
DateTime представляет собой временное значение, состоящее из даты (Год, месяц, день) и дополнительного компонента времени (часов, минут) ISO 8601
Типа, состоящий из ограниченного множества постоянных строковых значений (перечисление членов). Строковое значение, которое является членом перечисления
64-разрядное число с плавающей точкой Все литералы, которые соответствуют следующим форматам:
1.234
-1.234
1.2e3
-1.2e3
7E-10
32-разрядное целое число с плавающей запятой. Во многих языках целое число, по сравнению с 32-бит, становятся числом с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобного использования нескольких языков. Все литералы, которые соответствуют следующим форматам:
1234
-123
Последовательность Unicode символов Все литералы состоят из символов Unicode без каких-либо символов Escape-Последовательности
Последовательность Unicode символов, которые идентифицируют Интернет-ресурс. Все допустимые URL-адреса, которые используют протокол http:// или https://

Как используются структурные теги?

В рамках семантической маркировки особо интересен набор тегов, которые используются для определения основной схемы документа и деления его на логические части:

  • Main: применяется для создания основного блока страницы. Это контент, внутри которого могут быть такие теги, как: Header, Section, Article и т. д. Содержимое Main должно быть уникальным. Это достигается двумя путями: выносом из блока контента, который повторяется на других страницах, или добавление к тегу Main идентификатора aria-labelledby.
  • Headerили шапка внутри документа(не путать с ), используется для заглавия статей или разделов. Хедер может содержать, помимо заголовка, дату публикации контента или оглавление статьи.
  • Nav используется для включения меню в разные части сайта и содержит данные навигации. Тег nav является лишь оболочкой списков меню, поэтому между и должны вставляться

    • и
    1. . Google может включать в расширенные сниппеты с быстрыми ссылками меню сайта, заданное через тег Nav.
  • Section: служит для выделения разделов сайта. Типичный пример применения — лендинг или одностраничное портфолио, где элемент section вкупе с Id используется для перехода к разделам «Портфолио», «Контакты» и т. п. Этот элемент HTML5 создан специально для того, чтобы избежать чрезмерного употребления div class или div id со слишком глубокой вложенностью дочерних элементов. Все секции могут применяться как контейнеры для организации контента внутри них. Допустимо даже использование section внутри section, когда необходимо разделение на подразделы в рамках родительской секции или для сайта целиком, если речь об одностраничнике. Если разместить section внутри article, тег будет подчиняться семантике и контентным правилам статейных блоков. Бытует мнение, что подобное использование section может нарушить приоритеты структуры, но спецификация w3 содержит примеры таких вложений, поэтому конструкция считается валидной.
  • Article: каждая статья сайта. Статьи в данном контексте — это блоки информации. Они могут быть новостями, лонгридами, инструкциями, постами блога, услугами и продуктами, но не обязаны ими являться. Суть идеи состоит в том, что в одном разделе присутствуют разные материалы article, сгруппированные с учетом некой логики внутри родительских тегов. Важный момент — тег может быть неуникальным в рамках сайта, содержать вложенные элементы того же или более высокого уровня — на новостных сайтах часто встречаются примеры article внутри article.
  • Aside: боковая панель или сайдбар. На самом деле здесь можно разместить любой контент, косвенно связанный с основным содержанием страницы; категории, статьи, облако тегов, последние комментарии, связанные записи и т. д. Тег aside может быть дополнением материала страницы, либо содержать отдельную общую информацию в рамках сайта, например, боковое меню.
  • Footer: представляет краткую информацию о разделе, авторах или сайте — авторские права, ссылки на служебные страницы и т. п. Футер должен располагаться внизу страницы, раздела, статьи и т. д.

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

Современные браузеры по умолчанию интерпретируют структурные теги в качестве блочных элементов. Для более старых версий, которые не поддерживают Html5, практикуется прямое указание display: block в CSS.

Особенности применения микроразметки

Разметки статей schema.org и Open Graph не только можно, но и нужно совмещать. Первая предназначена для поисковиков, вторая для социальных сетей. Никакого конфликта разметок не будет. Поисковые системы понимают оба типа разметки.

После разметки статей, нужно проверить корректность внесенных данных.

Проверка Google

Валидатор  Яндекс

Проверка Bing

Open Graph можно еще проверить отладчиком Facebook

Если на сайте используется CMS, то разметку можно прописывать как вручную, так и с помощью плагинов. Особенно много инструментов есть для WordPress: All in One SEO Pack, WP SEO by Yoast, WP Facebook Open Graph protocol.

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

Как насчёт тега ?

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

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

Например, вы можете указать на странице такое:

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

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

К сожалению, браузеры не поддерживают отображение структуры HTML5. Поэтому в данный момент причин для использования нет. Скринридер JAWS реализует алгоритм отображения структуры HTML5 в Internet Explorer, но эта функция не очень удачная.

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

Вот наглядный пример. В левой колонке четыре заголовка первого порядка, вложенные в . В правой колонке четыре заголовка с первого по четвёртый порядок без использования . На скриншоте ниже видно, что Firefox автоматически отображает заголовки в так, как отображаются заголовки более низкого уровня без вложенности в .

Отображение заголовков в (слева) и без

Такие же результаты в Chrome, а также в других браузерах, которые используют Chromium, например, в бета-версии Edge для Mac и в Safari для Mac.

Значит ли это, что в можно смело использовать только заголовки первого порядка и ждать, что всё остальное за нас сделает браузер? Нет, так как при использовании меняется только визуальное представление заголовка. Если открыть инструменты разработчика, видно, что элемент выглядит как , но остается заголовком первого порядка.

Элемент выглядит как , но это

Сравните это с настоящим заголовком второго порядка из правой колонки.

Заголовок второго порядка

На иллюстрации выше видно, что дерево доступности получает корректные данные о порядке заголовка. Команда Mozilla писала об этом.

Для пользователей с особыми потребностями иерархия заголовков на странице играет важную роль. По данным , 86,1 % людей с ограниченными возможностями считают полезной практикой использование разноуровневых заголовков.

Поэтому лучшая практика — использовать заголовки — и игнорировать возможности .

Контентные модели HTML 5

В HTML 5 модели определения контента были расширены для того, чтобы с помощью них можно было более точно описать различные типы контента, с которыми могут столкнуться авторы при создании HTML-документа.

Эти модели позволяют пользовательским агентам (user agent) более точно определить, какой тип контента следует ожидать внутри элемента. Это позволит контролировать некоторые аспекты синтаксиса. Например, какие элементы могут быть вложены в некоторый элемент и др.

Изучение этих типов контента позволит лучшее понимать синтаксис технологии HTML5 и то как одни элементы связаны с другими. Каждый элемент согласно спецификации HTML 5 должен использоваться в соответствии с контентной моделью.

Контентная модель — это набор правил, которые определяют можно ли использовать некоторый HTML-элемент в некотором контенте или нет.

На следующем изображении показаны модели контента спецификации HTML 5.

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

Контентные модели состоят из следующих категорий: flow content (контент потока), metadata content (контент метаданных), phrasing content (текстовый контент), embedded content (встроенный контент), interactive content (интерактивный контент), heading content (контент, содержащий заголовки), sectioning content (контент, который представляет собой секции страницы).

Каждая категория в HTML 5 определяет элементы, которые в ней можно использовать. Из рисунка видно, что некоторые области категорий пересекаются. Это означает что некоторые HTML-элементы можно использовать в различных контентах. Когда один контент является частью другого контента, это означает что они имеют общие элементы. Т.е. некоторые элементы можно использовать в нескольких контентах.

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

Но основная масса элементов в HTML 5, с которой может столкнуться автор при написании документа определяется в соответствии с вышеприведенной схемой.

Что такое микроразметка?

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

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

Популярные словари микроразметки:

  • schema.org – сделан по инициативе поисковых систем и рекомендуется ими к применению;
  • Open Graph – придуман Facebook для эффективного взаимодействия сайтов с этой соцсетью, и поддерживается прочими социальными сетями;
  • Микроформаты – основаны на использовании элементов языка HTML, что и позволило ему в свое время обрести большую популярность;
  • Data Vocabulary – разработан компанией Google, но прекративший свое развития из-за активной поддержки schema.org;
  • Dublin Core – специализированный словарь для библиотек;
  • Good Relations – специализированный словарь для интернет торговли;
  • FOAF – специальный социальный словарь для разных сообществ.

Наиболее распространенные синтаксисы:

  • микроданные – часто применяются со словарями schema.org и Data Vocabulary;
  • RDFa – применяется со словарями Open Graph и Data Vocabulary;
  • микроформаты – являются как синтаксисом, так одновременно и словарем.

Какой формат семантической разметки выбрать? Если нет уже наработанной базы и начинать разметку нужно с нуля, то лучше всего для статей использовать микроданные с schema.org и RDFa с Open Graph. Их мы и рассмотрим на конкретном примере.

Примеры семантического HTML5

Супер простой семантический HTML5 пример:

Тут мы довольно просто определяем, какую роль играет каждая часть страницы. Когда вы начинаете разметку HTML5, то вот как безопаснее всего это начать — header, nav, main, footer.

Лучше иметь супер простое исполнение, которое на 100% верное, чем сложное, но неверное.

При неверном исполнении, вы посылаете противоречащие и сбивающие с толку сигналы, которые сделают только хуже, а не лучше.

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

Теги HTML

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Phrasing (текстовый) контент

Phraising контент — это текст документа, а также элементы, которые используются для разметки этого текста. Во многих отношениях phraising контент является тем же элементом inline из спецификации HTML4.

HTML-элементы, принадлежащие к категории phrasing: a, abbr, area (если он является потомком элемента map), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, text.

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

Модели контента до HTML 5

HTML-элементы до 5 версия языка HTML делились только на block-level elements (блочные элементы) и inline-level elements (строчные элементы). Блочные элементы (div, p, h1, h2 и др.) — это элементы, которые имеют своё собственное пространство в документе (прямоугольную область). Их основное назначение заключается в разметке веб-страницы на уровне блоков. Строчные элементы (inline-level elements) как правило находятся внутри блочных элементов. Они рассматриваются как текстовые элементы, и следовательно, отображаются как обычный поток текста. Назначение строчных элементов — это разметка веб-страницы на уровне строк.

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 specification is a .
A newer
specification exists that is recommended for new adoption in place of
this specification.

The W3C HTML Working Group is the W3C working group
responsible for this specification’s progress.

A comprehensive test suite for this specification is maintained and kept up to date as part of
the WebPlatform Tests project.

Work on evolutions of this specification proceeds at
http://www.w3.org/TR/html/. The HTML5 Recommendation
represents a milestone in the development of HTML but far from being the end of the road and
improvements are already well under way. It is possible that future versions will no longer be
published as a monolithic specification but rather as a set of smaller modules. Irrespective of
whether that is the case or not, http://www.w3.org/TR/html/
will be maintained as the entry point to the entirety of HTML technology.

Work on extending this specification typically proceeds through
extension specifications
which should be consulted to see what new features are being reviewed.

The bulk of the text of this specification is also available in the WHATWG
HTML Living
Standard, under a license that permits reuse of the specification text.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups
and interested parties, and is endorsed by the Director as a W3C Recommendation.

Work on this specification is also done at the WHATWG. The
W3C HTML working group actively pursues convergence of the HTML specification with the WHATWG
living standard, within the bounds of the W3C
HTML working group charter. There are various ways to follow this work at the WHATWG:

  • Commit-Watchers mailing list (complete source diffs): http://lists.whatwg.org/listinfo.cgi/commit-watchers-whatwg.org
  • Annotated summary with unified diffs: http://html5.org/tools/web-apps-tracker
  • Raw Subversion interface:

The following editorial changes were made since Proposed Recommendation:

  • The manner in which updates to this specification will be published was clarified.
  • The IANA registration for was accepted during PR, leading to a small update to the corresponding section.
  • «Decoder error» was mistakenly listed as a URL-related definition when
    it is in fact Encoding-related
  • «Parsed URL» has been given a proper mapping to the URL specification
  • Improved the informative summary for several elements. (Mostly pointers to tag omission and ARIA rules.)
  • Updated a few references to documents that have seen new revisions (RFC4281, RFC2313, RFC3490, MPEG-DASH) and provided a more stable link to BECSS.
  • Added a note about and made some modifications to the URL reference.
  • A number of small styling tweaks were made and typos were fixed.

For purposes of the W3C Patent Policy, this Superseded Recommendation
has the same status as an active Recommendation; it retains licensing
commitments and remains available as a reference for old — and
possibly still deployed — implementations, but is not recommended for
future implementation. New implementations should follow the latest version
of the HTML specification.

This document is governed by the 14 October 2005 W3C Process Document.

Как применять теги article и section: итоговые рекомендации

Вõóôð øÃÂÿþûÃÂ÷ÃÂùÃÂõ ÷ðóþûþòúø ÃÂð÷ýÃÂàÿþÃÂÃÂôúþò ò ÷ðòøÃÂøüþÃÂÃÂø þàûþóøÃÂõÃÂúþù ÃÂÃÂÃÂÃÂúÃÂÃÂÃÂàôþúÃÂüõýÃÂð. ÃÂð ÃÂÃÂÃÂðýøÃÂõ ôþûöõý ñÃÂÃÂàþôøý ÷ðóþûþòþú ÿõÃÂòþóþ ÿþÃÂÃÂôúð, ò úþÃÂþÃÂÃÂù òúûðôÃÂòðÃÂÃÂÃÂà÷ðóþûþòúø òÃÂþÃÂþóþ ÿþÃÂÃÂôúð, ò úþÃÂþÃÂÃÂõ òúûðôÃÂòðÃÂÃÂÃÂà÷ðóþûþòúø ÃÂÃÂõÃÂÃÂõóþ ÿþÃÂÃÂôúð ø ÃÂðú ôðûõõ.

âõó øÃÂÿþûÃÂ÷ÃÂùÃÂõ à, ÃÂÃÂþñàÿþúð÷ÃÂòðÃÂàÃÂúÃÂøýÃÂøôõÃÂðü, óôõ ýðÃÂøýðõÃÂÃÂàø ÷ðúðýÃÂøòðõÃÂÃÂàÃÂûõüõýàÃÂÃÂÃÂðýøÃÂÃÂ.

ÃÂûàÿþûÃÂ÷þòðÃÂõûõù ÃÂúÃÂøýÃÂøôõÃÂþò þÃÂõýàòðöýàÃÂõóø , , , . ÃÂýø ýõ òûøÃÂÃÂàýð òø÷ÃÂðûÃÂýþõ ÿÃÂõôÃÂÃÂðòûõýøõ ÃÂÃÂÃÂðýøÃÂÃÂ, ýþ ôõûðÃÂàÃÂðùàÃÂôþñýÃÂü ôûàÃÂûðñþòøôÃÂÃÂøàø ýõ÷ÃÂÃÂÃÂøàÿþûÃÂ÷þòðÃÂõûõù. ÃÂþÃÂÃÂþüàýõ ÿÃÂõýõñÃÂõóðùÃÂõ ÃÂÃÂøüø ÃÂõóðüø.

âõó ÿþôÃÂþôøàýõ ÃÂþûÃÂúþ ôûàÃÂÃÂðÃÂõù ò ñûþóðÃÂ. ÃÂÃÂÿþûÃÂ÷ÃÂùÃÂõ õóþ, úþóôð ýÃÂöýþ òÃÂôõûøÃÂàûÃÂñþù ÃÂðüþôþÃÂÃÂðÃÂþÃÂýÃÂù ÃÂûõüõýàýð ÃÂÃÂÃÂðýøÃÂõ.

ÃÂôðÿÃÂøÃÂþòðýýÃÂù ÿõÃÂõòþô ÃÂÃÂðÃÂÃÂø Why You Should Choose HTML5 Over by Bruce Lawson. ÃÂýõýøõ ðòÃÂþÃÂð þÃÂøóøýðûÃÂýþù ÿÃÂñûøúðÃÂøø üþöõàýõ ÃÂþòÿðôðÃÂààüýõýøõü ðôüøýøÃÂÃÂÃÂðÃÂøø Ã¥õúÃÂûõÃÂð.

Ссылка на основную публикацию