Товаров: 0 (0р.)

Html5 спецификация: Обзор HTML5 спецификации

Содержание

HTML5 Интро. Уроки для начинающих. W3Schools на русском


Что такое HTML5?

HTML5 — это действующая версия языка HTML. В состав рабочей группы по HTML5 вошли AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera и ещё несколько сотен других производителей.

Существует некоторая путаница о версиях, поскольку существуют две независимые группы разработчиков — WHATWG и W3C.

В WHATWG отказались от принципа «версийности» в пользу «вечной разработки» при принятии HTML спецификации. Такое решение было вызвано попыткой ускорить воплощение стандарта в жизнь, то есть разработчикам веб браузеров не нужно ждать, пока выйдет официально утверждённая версия спецификации (то есть, спецификация перейдет в состояние recomendation), они могут воплощать определённые части спецификации уже сейчас. Поэтому по версии WHATWG существует только одна спецификация, которая постоянно развивается — HTML.

Эти две группы работали в тандеме, в WHATWG писали спецификации в режиме «живого стандарта» ( «Living Standard»), а в W3C принимали эти спецификации как «снимки», и внедряли их в чёткие версии своей спецификации. Группа W3C работала значительно медленнее, потому что необходимо было обеспечивать требования большего спектра пользователей, а не только веб-браузеров.

28 октября 2014 года Консорциум Всемирной Паутины (W3C) объявил о предоставлении набору спецификаций HTML5 статус рекомендованного стандарта. Интересно, что в этом виде спецификации HTML 5.0 были сформированы ещё два года до того, после чего работа была сосредоточена на проведении тестирования и оценки совместимости доступных реализаций. На время стандартизации

HTML5 уже давно стал стандартом де-факто и активно использовался в веб-приложениях. Фактическое утверждение стандарта лишь формально поставило точку в продвижении HTML5 и подтвердило вездесущность и корректность его реализации.

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


Что нового в HTML5?

Объявление DOCTYPE для HTML5 очень простое:

Объявление кодировки символов (charset) также очень простое:

Кодировка символов по умолчанию в HTML5 — это UTF-8.


Новые HTML5 элементы

Наиболее интересные новые HTML5 элементы: 

Новые семантические элементы например <header>, <footer>, <article> и <section>.

Новые атрибуты элементов формы например number, date, time, calendar, and range.

Новые графические элементы: <svg> и <canvas>.

Новые мультимедиа элементы: <audio> и <video>.

В следующем разделе HTML5 Поддержка браузерами, вы узнаете как «научить» старые браузеры обрабатывать «неизвестные» для них (новые) HTML элементы.


Новые HTML5 API (Application Programming Interfaces / Интерфейсы Прикладного Программирования)

Наиболее интересными являются новые API в HTML5:

  • HTML Геолокация
  • HTML Drag and Drop
  • HTML Локальное хранилище
  • HTML Кеш приложения
  • HTML Веб-работники
  • HTML SSE

Совет: Локальное хранилище является мощной заменой для файлов cookie.


Удалённые элементы в HTML5

В HTML5 удалены такие элементы HTML4:

Удалённый элемент Используют вместо этого
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>  
<frameset>  
<noframes>  
<strike> CSS, <s>, or <del>
<tt> CSS

HTML История. Как это было?

С первых дней существования Всемирной паутины существует много версий HTML:

Год Версия
1989 Tim Berners-Lee изобрёл www
1991 Tim Berners-Lee изобрёл HTML
1993 Dave Raggett разработал HTML+
1995 Рабочая группа HTML разработала HTML 2.0
1997 W3C Рекомендация: HTML 3.2
1999 W3C Рекомендация: HTML 4.01
2000 W3C Рекомендация: XHTML 1.0
2008 WHATWG HTML5 Первый публичный проект
2012 WHATWG HTML5 Living Standard (Живой стандарт)
2014 W3C Рекомендация: HTML5
2016 W3C Кандидат рекомендации: HTML 5.1
2017 W3C Рекомендация: HTML5.1 2nd Edition
2017 W3C Рекомендация: HTML5.2
2018 W3C Рекомендация: HTML5.3

С 1991 по 1999 год HTML разрабатывался с версии 1 до версии 4. 

В 2000 году Консорциум Всемирной паутины — World Wide Web (W3C) — рекомендовал XHTML 1.0. Синтаксис XHTML был строгим, и разработчики были вынуждены писать валидный и ‘хорошо сформированный’ код.

В 2004 году группа W3C решила закрыть разработку HTML в пользу XHTML.

В 2004 году была сформирована WHATWG (Web Hypertext Application Technology Working Group — Рабочая группа веб-технологий по использованию гипертекста). WHATWG хотела разработать HTML, согласованный с тем, как использовался веб-сайт, когда он был совместим со старыми версиями HTML.

В 2004 — 2006 годах компания WHATWG получила поддержку от основных производителей браузеров.

В 2006 году группа W3C объявила про поддержку WHATWG.

В 2008 году был выпущен первый публичный проект HTML5.

В 2012 году WHATWG и W3C приняли решение о разделении:

Группа WHATWG хотела разработать HTML как ‘Living Standard’ (‘Живой Стандарт’). ‘Living Standard’ всегда обновляется и усовершенствуется. Можно добавить новые функции, но старую функциональность нельзя удалить.

WHATWG HTML5 Living Standard был опубликован в 2012 году и постоянно обновляется.

Группа W3C хотела разработать окончательный стандарт HTML5 и XHTML.

W3C HTML5 Рекомендацию было выпущено 28 октября 2014 года.

W3C HTML5.1 2nd Edition Рекомендацию было выпущено 3 октября 2017 года.

W3C HTML5.2 Рекомендацию было выпущено 14 декабря 2017 года.

W3C HTML5.3 Рекомендацию было выпущено 18 октября 2018 года.


В 2019 году WHATWG и W3C подписали соглашение о сотрудничестве и работе над единой версией HTML в будущем: этот документ опубликован на сайте WHATWG.


Примечание: Получить актуальную и более полную информацию о ‘Living Standard’ WHATWG и действующие Рекомендации W3C вы всегда можете на официальных сайтах WHATWG и W3C.


— HTML | MDN

HTML-элемент <main> предназначен для основного контента (содержимого) <body>

документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам «pull request» (предложение изменения кода в чужом репозитории).

Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden.

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

<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body>, заголовков, таких как <h3> (en-US) и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.



<main>
  <h2>Яблоки</h2>
  <p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p>

  <article>
    <h3>Сорт "Ред Делишес"</h3>
    <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h3>Сорт "Гренни Смит";/h3>
    <p>Эти сочные, зелёные яблоки являются одними из самых популярных в мире.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

Результат

Ориентир

Элемент <main> ведёт себя как роль-ориентир main. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role="main", если не нужна поддержка старых браузеров.

Пропуск навигации

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

Добавление атрибута id в элемент <main> позволяет ему становится целью для ссылки пропуска навигации.

<body>
  <a href="#main-content">Перейти к основному контенту</a>

  <!-- навигация и заголовок контента -->

  <main>
    <!-- основной контент страницы -->
  </main>
</body>

Режим чтения

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

BCD tables only load in the browser

Элемент <main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA "main" в элемент <main>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <main> после добавления атрибута role).

<main role="main">
  ...
</main>

Верстка сайтов (HTML5+CSS3) — курсы в Санкт-Петербурге

Уровень сложности:

Длительность курса: 56 ак.ч.

График обучения:


Аннотация

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


Знания и умения, полученные в результате обучения

В ходе обучения слушатели расширят теоретические знания о глобальной сети Internet, изучат принципы работы службы WWW, познакомятся с этапами разработки сайта и изучат конструкции и технологии языка HTML, изучат приемы и способы стилицации страниц средствами CSS. Кроме того, слушатели получат представление о специализированных редакторах исходного кода.


Преподаватели

  • Квасова Юлия Викторовна
  • Тучкевич Владимир Максимович

Полезные Интернет-ссылки

Спецификации и справочники

https://www.w3.org/TR/html5/
Официальная спецификация HTML5 от W3C

https://html.spec.whatwg.org/multipage/
Спецификация HTML5 от WHATWG

https://www.w3.org/TR/css3-selectors/
Спецификация CSS3 на сайте W3C (англ.)

Курс пока не поставлен в расписание.

Расчёт стоимости с учётом возможных скидок представлен как справочная информация. Фактический размер скидки может несколько отличаться из-за округления значения суммы.

Слушатель должен обладать следующими знаниями:

  • знание Windows;
  • навыки работы в сети Интернет;
  • знание английского языка облегчает усвоение материала.

Темы лекций

Тема 1

Основы работы сети Интернет

  • Подключение к Интернет. Способы подключения, поставщики услуг Интернет (провайдеры). Сравнение способов подключения к Интернет.
  • Понятие гипертекста, принцип гипертекста. Гипертекстовый документ, гипертекстовая ссылка.
  • Адресация ресурсов в Интернет, назначение и структура URL адреса. Документ по умолчанию. Понятие Web-сайта, размещение сайта на сервере. Относительная и абсолютная адресация. Применение различных видов адресации при создании гиперссылок. Применение различных видов адресации при создании гиперссылок.

Основы языка HTML

  • История развития HTML. Назначение и использование. Стандарты и организация W3C.
  • Гипертекстовый документ, содержимое и структура. Объявления типов документов. Основные объекты языка HTML: элементы, атрибуты элементов и их значения, комментарии. Структура HTML-документа.

Основные структурные элементы

  • Назначение и содержимое секций заголовка и тела HTML-документа.
  • Метаинформация о документе, элемент META.
  • Заголовок документа, его назначение.
  • Элементы разметки HTML5.
  • Подключение внешних документов.

Тема 2

Форматирование HTML-документа

  • Семантика HTML5.
  • Встраивание специальных символов в документ.
  • Разбиение документа на абзацы, их форматирование.
  • Заголовки.
  • Создание списков в документе. Виды списков, настройка и форматирование списков.
  • Встраивание и настройка изображений. Особенности выравнивания изображений на странице, обтекание текстом.
  • Гипертекстовые ссылки. Создание и настройка. Создание якорей (именованных областей) на странице. Ссылки на именованные области и идентификаторы.

Каскадные таблицы стилей

  • Назначение CSS.
  • Синтаксис: селекторы и правила. Виды селекторов, особенности применения различного вида селекторов. Единицы измерения.
  • Встраивание стилевых описаний в документ – встроенные стили, глобальные стили, стилевой файл.
  • Наследование.
  • Каскадирование.
  • Специфичность.
  • Вендорные префиксы.

Тема 3

Таблицы

  • Назначение и использование таблиц в HTML.
  • Элементы разметки, определяющие таблицу. Создание сложных таблиц.

Формы

  • Элементы форм. Создание веб-форм и задание атрибутов.

Основы верстки

  • Резиновый, фиксированный и гибридный дизайн страницы. 
  • Принципы блочной верстки.
  • Свойства отображения, позиционирования, обтекания.

Проектирование структуры страницы

  • Этапы разработки визуального дизайна: определение типовых страниц, расположение глобальной и локальной навигации, размер и положение логотипа, местоположение содержимого на странице, рисование эскизов страниц.
  • Типовое содержимое каждой из частей страницы.
  • Практические рекомендации по созданию визуального дизайна.

Практические работы

Тема 1.

Введение в HTML

  • Использование Dreamweaver для создания гипертекстовых документов.
  • Обзор текстового редактора Brackets, расширений (Emmet), инструментов разработчика браузера.
  • Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
  • Форматирование и разметка документа.
  • Создание гипертекстовых ссылок.
  • Встраивание изображений.
  • Создание списков: упорядоченные, неупорядоченные, списки определений.

Тема 2.

Введение в CSS

  • Подключение таблицы стилей.
  • Оформление структурных элементов.
  • Свойства текста, выравнивание. Относительные и абсолютные единицы измерения.
  • Свойства ссылок.
  • Работа с формами.

Тема 3.

Работа с таблицами. Управление отображением элементов страницы

  • Создание простейших таблиц. Основные структурные элементы таблиц.
  • Создание сложных таблиц: объединение строк, столбцов, выравнивание внутри таблицы. Создание вложенных таблиц.
  • Оформление таблиц с помощью CSS.
  • Способы отображения элементов. Свойство display.
  • Основы блочной модели.

Тема 4.

Позиционирование

  • Способы позиционирования элемента.
  • Свойство overflow.
  • CSS float. Потоковое позиционирование.
  • Создание фотогалереи с использованием плавающих элементов.
  • Создание фотогалереи с применением свойства inline-block.

Тема 5.

Создание сайта, выполненного в технике блочной вёрстки

  • Структурные тэги HTML 5.
  • Создание панели навигации (горизонтальное и вертикальное меню).

Тема 6.

Компоненты адаптивного подхода при верстке

  • Относительные единицы измерения.
  • Медиа-запросы.
  • Адаптивные меню и изображения.
  • Верстка сайта с использованием Twitter Bootstrap.

Тема 7.

Подключение нестандартных шрифтов

  • Работа с библиотеками шрифтов.
  • Шрифтовые иконки.
  • Генерирование собственных веб-шрифтов.

Тема 8.

CSS3 элементы

  • Создание прозрачных элементов и картинок.
  • Новые возможности цвета и фона.
  • Создание элементов со сглаженными углами.
  • Добавление теней к тексту.
  • Градиенты.

Тема 9.

CSS3 элементы

  • CSS3 трасформация.
  • Анимации и переходы.

Тема 10.

  • CSS flexbox.
  • Эволюция Bootstrap. Обзор Bootstrap 4.

HTML 5.2 is done, HTML 5.3 is coming

На сегодняшний день W3C уже выпустило релиз 5.2. Это второй пересмотр HTML 5, который идет сразу за HTML 5.1, увидевшего свет в прошлом году. В 2014 году мы выразили желание устраивать «ревизию» HTML каждый год. Что же, похоже, наше желание было услышано.

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

Было внедрено множество различных фичей. Благодаря Payment Request API процесс ведения коммерции в вебе стал значительно проще и позволил снизить риски, связанные с возможными ошибками в виде багов или невнимательностью оператора. Новые функции защиты, такие как Content Security Policy, защищают пользователей более эффективно, в то время как работа, проделанная в ARIA, помогает разработчикам создавать качественный функционал веб-сайтов специально для людей с ограниченными возможностями.

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

Новая документация и исправление багов подняли HTML на новый уровень. Обозначение main – элемента было улучшено для поддержки современных паттернов дизайна, элемент style теперь может быть использован внутри блока body. Численные ограничения на код были упразднены, в то время как некоторые для обеспечения лучшей безопасности наоборот – усилены. Теперь браузеры предоставляют лучшую поддержку для интернациональных email-адресов и позволяют людям писать письма на тех языках, которые они используют в повседневной жизни.

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

Видео курсы по схожей тематике:

Вместе с этим обновлением мы передаем привет некоторым членам нашей команды, таким как Стив Фолкнер и Тревис Ляйтред, выступивших редакторами HTML 5.0, Аррон Айхольц – разработчикам новой кодовой структуры HTML 5.1. И также Алексу Данилу. Их вклад был воистину важным, и их усилия послужили строительным фундаментом для всех тех, кто продолжил совершенствовать спецификацию разметки HTML.

Также обратите свое внимание на First Public Working Draft HTML 5.3. Это была часть наших планов по созданию новой HTML-рекомендации в 2018 году. Кроме того, некоторые наши планы претерпели изменения, потому что мы стараемся отслеживать, нужно ли что-то изменить \ дополнить в спецификации согласно современным требованиям или нет. Мы стараемся улучшать работу с интернациональными особенностями, доступностью спецификации и учитываем все пожелания сообщества.

Сангван Мун продолжает работать как редактор. Кроме того, нашу команду пополнили такие люди, как Брюс Левсон, Патриция Аас, Шветанк Дихит, Ттеренс Еден и Ксяоиян Ву. Еще раз спасибо Стиву Фолкнеру за то, что остается с нами и работает над новыми версиями спецификации. Для нас честь иметь настолько интернациональную команду, и мы верим, что их профессионализм принесет свои плоды. И хотя всегда есть гора достаточно монотонной работы по поддержке технологии, я верю, что этот год будет воистину годом HTML.

Бесплатные вебинары по схожей тематике

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

Автор перевода: Евгений Лукашук

Оригинал статьи

FAQ по HTML/XHTML — Документация Flask (русский перевод) 0.10.1

Документация на Flask и примеры приложений используют HTML5. Вы могли заметить, что во многих ситуациях, когда закрывающие теги необязательны, они не используются, и HTML-код получается более чистым и быстрым при его загрузке. Так как среди разработчиков встречается много недопониманий о HTML и XHTML, этот документ пытается ответить на некоторые самые главные вопросы.

История XHTML

Какое-то время назад казалось, что XHTML сменил HTML. Однико, наврядли все сайты в Internet являются в точности XHTML (т. е. HTML, подчиняющимся правилам XML). На это есть несколько серьёзных причин. Одна из них в том, что Internet Explorer не поддерживает XHTML надлежащим образом. По спецификации XHTML, он должен снабжаться MIME типом application/xhtml+xml, однако Internet Explorer отвергает при попытках чтения такие файлы. Хотя сконфигурировать веб-серверы для надлежащей обработки XHTML относительно просто, мало кто это делает. Возможно, потому, что правильное использование XHTML не всегда безболезненно.

Одной из важнейших причин, вызывающих болезненную реакцию, является драконовская — строгая и беспощадная — обработка ошибок со стороны XML. Если при парсинге XML браузер встречает ошибку, он он должен показать пользователю безобразное сообщение об ошибке, вместо попытки восстановить свою работу с отображением того, что возможно. Большинство генераторов (X)HTML в Интернет построены на не-XML шаблонизаторах (например, на Jinja, которым пользуется Flask), которые не защищают вас от случайного создания недопустимого XHTML. Конечно, существуют и заточенные под XML шаблонизаторы, такие, как Kid и популярный Genshi, однако, так как им приходится подчиняться правилам XML, часто они работают с повышенными накладными вычислительными расходами и не слишком просты в использовании.

Однако, большинство пользователей считают, что они используют XHTML надлежащим образом. Они указывают в начале документа doctype как XHTML, и самостоятельно закрывают все необходимые тэги (<br> становится <br/> или <br></br> в XHTML). Однаког, даже если документ проходит все проверки на соответствие правилам XHTML, то, как происходит реальная обработка браузером, определяется MIME-типом, который, как упомяналось ранее, часто указан не так, как надо. В итоге вполне годный XHTML обрабатывается, как неправильный HTML.

Также, XHTML сменил способ работы с JavaScript. Для надлежащей работы с XHTML, для запроса элементов HTML, программисты должны использовать интерфейс DOM с пространствами имён, в данном случае — с пространством имён XHTML.

История HTML5

Разработка спецификации HTML5 стартовала в 2004 году под названием «Web Applications 1.0». Работа велась группой «Web Hypertext Application Technology Working Group» (сокращённо WHATWG), которую сформировали основные поставщики браузеров — Apple, Mozilla и Opera. Была поставлена задача закрепить новую улучшенную спецификацию HTML, с учётом исторически сложившегося поведения браузеров, без революционного отрыва от реальности и с учётом необходимости сохранения обратной совместимости.

К примеру, в HTML4 <title/Hello/ теоретически, парсится в точности, как и <title>Hello</title>. Однако, поскольку люди используют тэги в стиле XHTML, типа <link />, производители браузеров внедрили синтаксис XHTML поверх определённого спецификацией синтаксиса.

В 2007 году, под эгидой W3C, спецификация была принята в качестве основы для новой спецификации HTML, известной как HTML5. В настоящее время заметна такая тенденция, что XHTML сдаёт позиции, группа по XHTML2 расформирована, а HTML5 внедряется всеми основными разработчиками браузеров.

HTML в сравнении с XHTML

Следующая таблица даст вам краткий обзор возможностей, доступных в HTML 4.01, XHTML 1.1 и HTML5. (XHTML 1.0 не включён, так как его сменил XHTML 1.1, а также не слишком часто используемый XHTML5.)

Что означает «строгий»?

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

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

  • Оборачивание документа в тэг <html>
  • Оборачивание элементов заголовка в <head> или элементов тела в <body>
  • Закрытие тэгов <p>, <li>, <dt>, <dd>, <tr>, <td>, <th>, <tbody>, <thead>, or <tfoot>.
  • Атрибуты цитирования, пока они не содержат пробелов или специальных символов (таких, как <, >, ', или ").
  • Требование, чтобы логические атрибуты имели значение.

Это значит, что следующая HTML5-страница является абсолютно допустимой:

<!doctype html>
<title>Привет, HTML5</title>
<div class=header>
  <h2>Привет, HTML5</h2>
  <p class=tagline>HTML5 прекрасен
</div>
<ul class=nav>
  <li><a href=/index>Начало</a>
  <li><a href=/downloads>Загрузки</a>
  <li><a href=/about>О сайте</a>
</ul>
<div class=body>
  <h3>Возможно, HTML5 - это будущее</h3>
  <p>
    Может быть, бывает и нечто иное, но с точки зрения поддержки
    разработчиками браузеров, HTML5 сложно превзойти.
  <dl>
    <dt>Ключ 1
    <dd>Значение 1
    <dt>Ключ 2
    <dd>Значение 2
  </dl>
</div>

Новые технологии в HTML5

HTML5 добавил много новых особенностей, которые делают веб-приложения более лёгкими в написании и использовании.

  • Тэги <audio> и <video> дают способ встроить аудио и видео без лишних сложностей с дополнениями типа QuickTime или Flash.
  • Семантические элементы типа <article>, <header>, <nav> и <time>, делающие содержимое более простым для понимания.
  • Тэг <canvas>, который поддерживает мощный API для рисования, снижает потребность в изображениях, генерируемых сервером для представления данных в графическом виде.
  • Новые типа контроля над формами, такие, как <input type="date">, которые позволяют агентам пользователя упросить ввод и проверку значенийthat.
  • Расширенные API для JavaScript APIs типа Web Storage, Web Workers, Web Sockets, geolocation, и оффлайновые приложения.

Также, было добавлено много других особенностей. Хорошее руководство по новым особенностям HTML5 это книга Марка Пилигрима (Mark Pilgrim), которая вот-вот выйдет в свет, под названием Погружение в HTML5 (Dive Into HTML5).

Что следует использовать?

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

  • Internet Explorer (который, к несчастью, занимает наибольшую долю рынка) имеет слабую поддержку XHTML.
  • Многие библиотеки JavaScript также не поддерживают XHTML, из-за более сложного пространства имён API, который он требует.
  • HTML5 добавляет несколько новых особенностей, включая семантические тэги и долгожданные тэги <audio> and <video>.
  • Имеет за собой поддержку большинства фирм-разработчиков браузеров.
  • На нём проще писать, и результат получается более кратким.

Для большинства приложений, несомненно, лучше использовать HTML5, а не XHTML.

Спецификации по html5 на русском. Стандарты кодирования в HTML5. Пустые строки и отступы


  • Лондон li>
  • Париж li>
  • Токио li>
    Ol>

    Опустим и ?

    В стандарте HTML5, и тег может быть опущен.

    Следующие документы являются правильными HTML5:

    Пример:

    DOCTYPE HTML>

    Название страницы title>
    Head>

    элемент является корневым элементом документа, язык, используемый для описания страницы:

    DOCTYPE HTML>
    LANG = «ж»>

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

    Опустим или в DOM и программного обеспечения XML аварий.

    Опустим ошибка происходит в старых браузерах (IE9).

    Опустим ?

    В стандарте HTML5, тег может быть опущен.

    По умолчанию браузер содержимое , прежде чем добавлен к дефолту

    элемент.

    примеров

    DOCTYPE HTML>

    Название страницы title>


    Это заголовок h2>
    Это параграф. P>
    Body>

    HTML>


    Попробуйте »

    Метаданные

    HTML5 в требуется элемент, название заголовка описывает тему страницы:

    В этом учебнике title>

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

    DOCTYPE HTML>
    LANG = «ж»>

    «>
    В этом учебнике title>
    Head>

    Веб-дизайнеру — Спецификация HTML5 (HTML 5)

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

    Название страницы Верх веб-страницы, «шапка» Основное меню веб-страницы Основное тело, статья, материал страницы Сайдбар (боковая панель) Нижняя часть страницы, подвал
    Структура веб-сайта

    — обрамляют основной контент страницы (статью) ,
    — обрамляют шапку страницы,
    — обрамляют подвал страницы,
    — обрамляют основное меню страницы,
    — обрамляют боковую панель страницы (сайдбар) ,
    — обрамляют повторяющиеся блоки на странице (например комментарии) .

    Элементы кода шаблона веб-страницы HTML5.

    1. — назначем кодировку windows-1251.
    2. — если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.
    3. — отображение сайта на мобильных устройствах.
    4. header — шапка страницы сайта, в нем обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.
    5. nav — основное меню страницы сайта.
    6. article — основной контент страницы: статья, запись в блоге, тема форума и т.д. Может содержать текст, изображения, видео, таблицы и т.д.
    7. aside — сайдбар (боковая панель) сайта, обычно содержит различные элементы, типа: рубрики, метки, последние записи/комментарии, дополнительное меню, счетчики и т.д.
    8. footer — нижняя часть — подвал страницы сайта, обычно содержит разную информацию (копирайты), контактную информацию (адреса, телефоны) и т.д.
    HTML5 на уровне структуры страницы

    Рассмотрим список новых тегов HTML5, отвечающих за разделение структуры страницы:

    — теги обрамляющие элементы дизайна верхней части сайта, так называемая «шапка страницы». Также теги header можно использовать как верхнюю часть тега section .

    — теги обрамляющие основное меню на сайте.

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

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

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

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

    HTML5 на уровне текста

    Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

    — текст находящийся между этими тегами становится «выделенным». Одно из предназначений тегов mark , обрамлять слова в тексте, которые например совпадают со словом введенным пользователем в поисковую строку.

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

    — теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера) , находятся между тегами details .

    Дополнительные теги языка HTML5

    Список новых тегов HTML5, обогощающих язык:

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

    — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

    — тег должен находиться между тегами menu , используется при создании сценариев на JavaScript.

    — между этими тегами помещают тег command .

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

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

    — теги обрамляют описание какого-либо объекта (например изображения) , находятся между тегами figure ..

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

    — теги предназначены для группировки заголовков h*

    — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

    — теги обрамляют текст и аннотацию к нему.

    — теги находятся между тегами ruby , предназначены для обрамления аннотации.

    — теги предназначены для браузеров которые не поддерживают теги ruby .

    — тег указывает браузеру в каком месте переносить слово («мягкий перенос»), если это слово не вмещается в окно браузера.

    Теги HTML5 описывающие новые технологии

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

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

    — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений) .

    — тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video .

    — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

    Тег

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

    Аудио/Видео

    С помощью тега можно внедрять аудиофайлы на страницу и прослушивать их. Элемент

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

    API JavaScript

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

    Поддержка XML-технологий

    В HTML-документ написанный с помощью языка HTML5, отныне можно внедрять технологии связанные с различными XML-форматами, например такими как SVG или MathML.

    SVG

    SVG — Scalable Vector Graphics (язык разметки масштабируемой векторной графики) , является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.

    Пример кода рисунка «зеленый круг»:

    Результат:

    MathML

    MathML — Mathematical Markup Language (язык математической разметки) XML-формат. С помощью данного формата можно описывать различные математические формулы.

    Какие теги в HTML5, являются устаревшими?

    Устаревшими тегами , в спецификации HTML5 являются:

    и

    Вместо тегов форматирования: , , , , , , , , , и , следует использовать CSS-свойства.

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

    Новые глобальные атрибуты в HTML5

    Глобальные атрибуты — это атрибуты, которые могут быть внедрены в любой тег HTML-документа. В HTML5 появились новые глобальные атрибуты, в описаниях ниже они выделены словом Новый

    Рассмотрим названия и описания глобальных атрибутов HTML5:

    accesskey=» » — позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
    class=» » — позволяет устанавливать имя класса,
    contenteditable=» » — позволяет редактировать содержимое элемента Новый,
    contextmenu=» » — позволяет создавать контекстное меню для элемента Новый,
    dir=» » — позволяет управлять направлением текста,
    draggable=» » — позволяет пользователю перетаскивать элемент Новый,
    dropzone=» » — позволяет указывать, что делать с элементом при перетаскивании Новый,
    hiden=» » — позволяет скрывать элемент Новый,
    id=» » — позволяет устанавливать уникальный идентификатор для элемента,
    lang=» » — позволяет указывать код языка в содержимом элемента,
    spellcheck=» » — позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
    style=» » — позволяет создавать стиль для элемента,
    tabindex=» » — позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab ,
    title=» » — позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.

    Так как в спецификации HTML5, теги превратились в полноценные объекты, то в этих объектах уже изначально заложено понятие глобального атрибута, даже для тех тегов которые еще не описаны в спецификации.

    Новшества в структуре кода HTML5 документа

    Структура кода в HTML5 претерпела некоторые изменения, вот некоторые из них:

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

    2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
    нужно использовать атрибут lang=»ru» в теге :

    3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:

    нужно использовать мета-тег , без атрибутов http-equiv и content

    4. При создании JavaSсript сценария, теперь в тег

    5. При внедрении CSS стилей, теперь в теги

    6. Ссылка — строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.

    Заголовок

    Абзац

    Теперь при HTML5, можно делать так:

    Заголовок

    По материалам сайта http://html-5.ru/ , http://html-5.ru/uchebnik-html5

  • Командные тэги поисковым роботам поисковых систем, смысловая нагрузка страниц
  • Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и «хорошо сформированный» код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.

    Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.

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

    Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.

    На первой строке всегда декларируйте тип документа:

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

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

    Это параграф текста.

    Это параграф текста.

    Это параграф текста.

    В HTML5 вы не обязаны закрывать все элементы (например, элемент

    Это параграф текста.

    Это параграф текста.

    Это параграф текста.

    Это параграф текста.

    Закрывайте пустые HTML элементы

    В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

    Допустимо:

    Также допустимо:

    Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

    Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!

    В именах атрибутов используйте маленькие буквы

    В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

    • Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
    • Разработчики обычно используют маленькие буквы (как в XHTML)
    • Написание в нижнем регистре выглядит чище
    • В нижнем регистре легче писать

    Спецификация AMP HTML — amp.dev

    Документация Руководства и учебники

    Спецификация AMP HTML

    AMP HTML — это подмножество стандарта HTML для создания контентных страниц (например, новостных статей), позволяющее гарантировать определенные базовые характеристики производительности.

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

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

    • Замена ссылок на изображения — подстановка изображений, размер которых соответствует используемой клиентом области просмотра.
    • Встраивание изображений, отображаемых в изначально видимой области.
    • Встраивание переменных CSS.
    • Предварительная загрузка расширенных компонентов.
    • Минификация HTML и CSS.

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

    Используя формат AMP, производители контента делают контент в файлах AMP доступным для индексирования (с учетом ограничений robots.txt), кеширования и отображения третьими сторонами.

    Производительность

    Предсказуемая производительность — ключевая цель разработки AMP HTML. В первую очередь мы стремимся сократить задержку перед тем, как содержимое страницы становится доступно пользователю. В более конкретных терминах это означает, что:

    • Должны быть сведены к минимуму HTTP-запросы, необходимые для рендеринга и полной компоновки документа.
    • Такие ресурсы, как изображения или реклама, следует загружать только в том случае, если они могут быть просмотрены пользователем.
    • Браузеры должны иметь возможность вычислять пространство, необходимое каждому ресурсу на странице, без загрузки этого ресурса.

    Формат AMP HTML

    Образец документа

    <!DOCTYPE html>
    <html ⚡>
      <head>
        <meta charset="utf-8" />
        <title>Sample document</title>
        <link rel="canonical" href="./regular-html-version.html" />
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=1,initial-scale=1"
        />
        <style amp-custom>
          h2 {
            color: red;
          }
        </style>
        <script type="application/ld+json">
          {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Article headline",
            "image": ["thumbnail1.jpg"],
            "datePublished": "2015-02-05T08:00:00+08:00"
          }
        </script>
        <script
          async
          custom-element="amp-carousel"
          src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
        ></script>
        <script
          async
          custom-element="amp-ad"
          src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
        ></script>
        <style amp-boilerplate>
          body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both;
          }
          @-webkit-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @-moz-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @-ms-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @-o-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
        </style>
        <noscript
          ><style amp-boilerplate>
            body {
              -webkit-animation: none;
              -moz-animation: none;
              -ms-animation: none;
              animation: none;
            }
          </style></noscript
        >
        <script async src="https://cdn.ampproject.org/v0.js"></script>
      </head>
      <body>
        <h2>Sample document</h2>
        <p>
          Some text
          <amp-img src="sample.jpg"></amp-img>
        </p>
        <amp-ad
         
         
          type="a9"
          data-aax_size="300x250"
          data-aax_pubname="test123"
          data-aax_src="302"
        >
        </amp-ad>
      </body>
    </html>
    

    Обязательная разметка

    Документы AMP HTML ДОЛЖНЫ:

    • начинаться с элемента <!doctype html>. 🔗
    • содержать тег верхнего уровня <html ⚡> (также допускается <html amp>). 🔗
    • содержать теги <head> и <body> (в HTML они необязательны). 🔗
    • содержать тег <link rel="canonical" href="$SOME_URL"> (внутри тега head), указывающий на «обычную» HTML-версию документа AMP HTML либо на текущий документ (если обычной HTML-версии не существует). 🔗
    • содержать <meta charset="utf-8"> в качестве первого дочернего элемента тега head. 🔗
    • содержать тег <meta name="viewport" content="width=device-width"> внутри своего тега head. Также рекомендуется добавлять minimum-scale=1 и initial-scale=1. 🔗
    • содержать <script async src="https://cdn.ampproject.org/v0.js"></script> в теге head. 🔗
    • содержать шаблонный код AMP ( head > style[amp-boilerplate] и noscript > style[amp-boilerplate]) в теге head. 🔗

    Метаданные

    Рекомендуется аннотировать AMP HTML-документы с помощью стандартных метаданных: Open Graph Protocol, Twitter Cards и т. д.

    Мы также рекомендуем размечать AMP HTML-документы по схеме schema.org/CreativeWork или любого из ее более специализированных типов, таких как schema.org/NewsArticle или schema.org/BlogPosting.

    HTML-теги

    В AMP HTML обычные HTML-теги можно использовать без изменений. Некоторые теги имеют специальные эквивалентные теги (например, <img> и <amp-img>), а другие теги категорически запрещены:

    ТегСтатус в AMP HTML
    scriptЗапрещен, если параметр type не имеет значение application/ld+json, application/json или text/plain (другие неисполняемые значения могут быть добавлены по мере необходимости). Исключения — обязательный тег script, используемый для загрузки среды выполнения AMP, а также теги script для загрузки расширенных компонентов.
    noscriptРазрешен. Можно использовать в любом месте документа. Содержимое внутри элемента будет показано, если пользователь отключит JavaScript.
    baseЗапрещен.
    imgЗаменен на amp-img.
    Обратите внимание: в соответствии со стандартом HTML5 <img> является пустым элементом, поэтому у него нет закрывающего тега. Однако у закрывающий тег есть ().
    pictureЗапрещен. Чтобы выдавать изображения в разных форматах, используйте атрибут fallback или добавьте несколько атрибутов srcset в элемент .
    videoЗаменен на amp-video.
    audioЗаменен на amp-audio.
    iframeЗаменен на amp-iframe.
    frameЗапрещен.
    framesetЗапрещен.
    objectЗапрещен.
    paramЗапрещен.
    appletЗапрещен.
    embedЗапрещен.
    formРазрешен. Требует добавления расширения amp-form.
    Элементы inputВ основном разрешены, за исключением некоторых типов, а именно , . Разрешены также связанные с ними теги: ,
    buttonРазрешен.
    style Обязательный тег стиля для amp-boilerplate. В теге head допускается еще один тег стиля для индивидуального оформления. Этот тег стиля должен иметь атрибут amp-custom. 🔗
    linkДопускаются значения rel, зарегистрированные на microformats.org. Если значение rel отсутствует в нашем белом списке, создайте задачу. Запрещены stylesheet и другие значения, такие как preconnect, prerender и prefetch, имеющие побочные эффекты в браузере. Предусмотрено одно исключение для загрузки таблиц стилей с сайтов разрешенных поставщиков шрифтов.
    metaАтрибут http-equiv может использоваться для указания определенных допустимых значений; подробности см. в спецификации валидатора AMP.
    aЗначение атрибута href не должно начинаться с javascript:. Если установлен атрибут target, значение должно быть _blank. В остальных случаях разрешен. 🔗
    svgРазрешено большинство элементов SVG.

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

    Комментарии

    Условные комментарии HTML не допускаются.

    HTML-атрибуты

    В AMP HTML запрещены имена атрибутов, начинающиеся с on (например, onclick или onmouseover). Атрибут с буквальным именем on (без суффикса) является допустимым.

    Атрибуты, связанные с XML, такие как xmlns, xml:lang, xml:base и xml:space, запрещены в AMP HTML.

    Внутренние атрибуты AMP с префиксом i-amp- запрещены в AMP HTML.

    Классы

    Имена внутренних классов AMP с префиксом -amp- и i-amp- запрещены в AMP HTML.

    Обратитесь к документации AMP, чтобы узнать значение имен классов с префиксом amp-. Такие классы предназначены для настройки некоторых функций среды выполнения AMP и расширений.

    Остальные пользовательские имена классов разрешены.

    Идентификаторы

    Некоторые имена идентификаторов запрещены в AMP HTML, например идентификаторы с префиксами -amp- и i-amp-, которые могут конфликтовать с внутренними идентификаторами AMP.

    Перед использованием идентификаторов amp- и AMP изучите соответствующие расширения, описанные в документации AMP, — это позволит вам избежать конфликта с функциями, предоставляемыми этими расширениями (такими, как amp-access).

    Чтобы увидеть полный список запрещенных наименований идентификаторов, пройдите по этой ссылке и введите в поиске mandatory-id-attr.

    Ссылки

    Схема javascript: запрещена.

    Таблицы стилей

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

    @-правила

    В таблицах стилей разрешены следующие @-правила:

    @font-face, @keyframes, @media, @page, @supports.

    Правило @import запрещено. Другие правила могут быть добавлены в будущем.

    Авторские таблицы стилей

    Авторы могут добавлять в документ собственные стили с помощью одного тега <style amp-custom> внутри head или с помощью встроенных стилей.

    Правила @keyframes разрешено использовать внутри <style amp-custom>. Однако, если их слишком много, рекомендуется поместить их в дополнительный тег <style amp-keyframes>, который должен находиться в конце документа AMP. Дополнительные сведения см. в разделе Таблица стилей ключевых кадров в этом документе.

    Селекторы

    К селекторам в авторских таблицах стилей применяются следующие ограничения:

    Имена классов и тегов

    Имена классов, идентификаторов, тегов и атрибутов не могут начинаться с -amp- и i-amp-. Эти наименования зарезервированы для внутреннего использования средой выполнения AMP. Соответственно, пользовательская таблица стилей не может ссылаться на CSS-селекторы классов -amp-, идентификаторов i-amp- и тегов/атрибутов i-amp-. Имена таких классов, идентификаторов и тегов/атрибутов не могут изменяться авторами, однако авторы могут переопределять стили классов и тегов amp- для любых CSS-свойств, которые явно не запрещены спецификацией этих компонентов.

    Чтобы предотвратить использование селекторов атрибутов для обхода ограничений в отношении наименований классов, в CSS-селекторы обычно не разрешается включать токены и строки, начинающиеся с -amp- и i-amp-.

    Важно!

    Использование квалификатора !important не допускается. Данное требование обусловлено тем, как AMP реализует инварианты размера элементов.

    Свойства

    В AMP разрешены переходы и анимации только тех свойств, которые могут задействовать аппаратное ускорение в распространенных браузерах. В настоящее время в нашем белом списке находятся opacity, transform (также -vendorPrefix-transform).

    В следующих примерах свойство <property> должно быть в вышеуказанном белом списке.

    • transition <property> (также -vendorPrefix-transition)
    • @keyframes name { from: {<property>: value} to {<property: value>} } (также @-vendorPrefix-keyframes)
    Максимальный размер

    Размер авторской таблицы стилей или совокупный размер встроенных стилей не должен превышать 75 000 байт, в противном случае вы получите ошибку валидации.

    Таблица стилей ключевых кадров

    В дополнение к <style amp-custom> авторы могут также добавить тег <style amp-keyframes>, который разрешен специально для анимации по ключевым кадрам.

    К тегу <style amp-keyframes> применяются следующие ограничения:

    1. Может быть размещен только как последний дочерний элемент элемента <body>.
    2. Может содержать только @keyframes, @media, @supports и их комбинации.
    3. Его объем не может превышать 500 000 байт.

    Тег <style amp-keyframes> был создан с целью решить проблему, которая заключается в том, что правила ключевых кадров часто являются громоздкими даже для умеренно сложных анимаций, что приводит к замедлению синтаксического анализа CSS и задержке первой отрисовки контента (FCP). Такие правила часто превышают ограничение на размер, установленное для <style amp-custom>, поэтому, чтобы обходить ограничения по размеру, объявления ключевых кадров следует размещать в <style amp-keyframes> в нижней части документа. А поскольку ключевые кадры не блокируют рендеринг, первая отрисовка контента может выполняться раньше завершения их анализа.

    Пример:

    <style amp-keyframes>
    @keyframes anim1 {}
    
    @media (min-width: 600px) {
      @keyframes anim1 {}
    }
    </style>
    </body>
    

    Пользовательские шрифты

    Авторы могут использовать таблицы стилей, добавляющие пользовательские шрифты. Это можно делать двумя способами: либо с помощью тегов ссылок на поставщиков шрифтов из белого списка, либо с помощью @font-face.

    Пример:

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Tangerine"
    />
    

    Поставщики шрифтов могут быть добавлены в белый список, если они поддерживают интеграцию посредством чистого CSS-кода и работают по HTTPS. На текущий момент для загрузки шрифтов с помощью тегов ссылок разрешены следующие источники:

    • Fonts.com: https://fast.fonts.net
    • Google Fonts: https://fonts.googleapis.com
    • Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
    • Typekit: https://use.typekit.net/kitId.css (замените kitId соответствующим образом)

    ПРИМЕЧАНИЕ ДЛЯ ИСПОЛНИТЕЛЕЙ. Для добавления провайдера в этот список требуется изменить правило CSP-политики AMP-кеша.

    Авторы могут свободно добавлять любые пользовательские шрифты с помощью инструкции @font-face в своем коде CSS. Шрифты, добавленные через @font-face, должны загружаться по HTTP или HTTPS.

    Среда выполнения AMP

    Среда выполнения AMP — это специальный код JavaScript, который выполняется внутри любого документа AMP. Он реализует функциональность специальных элементов AMP, управляет загрузкой ресурсов и установкой приоритетов и позволяет задействовать runtime-валидатор AMP HTML на этапе разработки.

    Загрузка среды выполнения AMP осуществляется с помощью обязательной строки <script src="https://cdn.ampproject.org/v0.js"></script>, расположенной в разделе <head> документа AMP.

    Среду выполнения AMP можно переключить в режим разработки на любой странице. В этом режиме на встроенной странице запускается механизм валидации AMP, который выводит статус валидации и все ошибки в консоль разработчика JavaScript. Чтобы запустить режим разработки, добавьте к URL страницы #development=1.

    Ресурсы

    Ресурсы, такие как изображения, видео, аудиофайлы или реклама, должны размещаться в AMP HTML-файле с помощью специальных элементов (например, <amp-img>). Мы называем их «управляемыми ресурсами», потому что их загрузкой (временем загрузки, необходимостью загрузки) управляет среда выполнения AMP.

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

    Среда выполнения AMP может в любой момент выгружать ресурсы, которые в данный момент не находятся в области просмотра, а также переназначать контейнеры ресурсов, такие как iframe, для уменьшения общего потребления ОЗУ.

    Компоненты AMP

    AMP HTML использует специальные элементы (т. н. «компоненты AMP») для замены встроенных тегов загрузки ресурсов, таких как <img> и <video>. Эти элементы также используются для реализации функций, выполняющих сложные взаимодействия, таких как кольцевые галереи и лайтбоксы с изображениями.

    Подробную информацию о поддерживаемых компонентах см. в спецификации компонентов AMP.

    Есть 2 типа поддерживаемых компонентов AMP:

    1. Встроенные
    2. Расширенные

    Встроенные компоненты постоянно доступны в документе AMP и имеют специальный выделенный элемент, например <amp-img>. С другой стороны, расширенные компоненты должны быть явным образом добавлены в документ.

    Общие атрибуты

    layout, width, height, media, placeholder, fallback

    Эти атрибуты определяют макет элемента. Их главная цель — гарантировать возможность отображения элемента и резервирования пространства под него до загрузки каких-либо удаленных ресурсов или кода JavaScript.

    Подробнее о системе макетов читайте в статье Система макетов AMP.

    on

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

    Синтаксис представляет собой простой предметно-ориентированный язык следующего вида:

    eventName:targetId[.methodName[(arg1=value, arg2=value)]]
    

    Пример: on="tap:fooId.showLightbox"

    Если не указан параметр methodName, выполняется метод по умолчанию (если он определен для элемента). Пример: on="tap:fooId"

    Некоторые действия могут принимать аргументы. Аргументы указываются в круглых скобках в нотации key=value . Допустимые значения:

    • простые строки без кавычек: simple-value;
    • строки в кавычках: "string value" или 'string value';
    • логические значения: true или false;
    • числа: 11 или 1.1.

    Чтобы элемент «слушал» несколько событий, разделяйте события точкой с запятой ;.

    Пример: on="submit-success:lightbox1;submit-error:lightbox2"

    Подробнее о действиях и событиях AMP можно узнать здесь.

    Расширенные компоненты

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

    Расширенные компоненты загружаются путем включения тега <script> в раздел head документа следующим образом:

    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
    ></script>
    

    Тег <script> должен иметь атрибут async, а также атрибут custom-element, ссылающийся на имя элемента.

    В рамках реализаций в среде выполнения имя может использоваться для отображения заполнителей для этих элементов.

    URL-адрес скрипта должен начинаться с https://cdn.ampproject.org и обязан соответствовать очень строгому паттерну /v\d+/[az-]+-(latest|\d+|\d+.\d+).js.

    URL

    URL расширенных компонентов имеют следующий вид:

    https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js
    
    Управление версиями

    См. Политику управления версиями AMP.

    Шаблоны

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

    Подробную информацию о поддерживаемых шаблонах см. в спецификации шаблонов AMP.

    Шаблоны не поставляются со средой выполнения AMP и должны быть загружены так же, как и расширенные элементы. Расширенные компоненты загружаются путем добавления тега <script> в тег head документа:

    <script
      async
      custom-template="amp-mustache"
      src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
    ></script>
    

    Тег <script> должен иметь атрибут async и атрибут custom-template, указывающий на тип шаблона. URL-адрес скрипта должен начинаться с https://cdn.ampproject.org и обязан соответствовать очень строгому паттерну /v\d+/[az-]+-(latest|\d+|\d+.\d+).js.

    Шаблоны объявляются в документе следующим образом:

    <template type="amp-mustache">
    Hello {{you}}!
    </template>
    

    Атрибут type является обязательным и должен ссылаться на объявленный скрипт custom-template.

    Атрибут id является обязательным. Отдельные элементы AMP используют свои собственные шаблоны. Как правило, элемент AMP ищет <template> либо среди своих дочерних элементов, либо ссылается на него по идентификатору.

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

    Подробную информацию о поддерживаемых шаблонах см. в спецификации шаблонов AMP.

    URL

    URL расширенных компонентов имеют следующий вид:

    https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js
    
    Управление версиями

    Дополнительные сведения см. в разделе «Управление версиями специальных элементов».

    Безопасность

    AMP HTML-документы не должны вызывать ошибок при использовании политики безопасности контента, которая не включает ключевые слова unsafe-inline и unsafe-eval.

    Формат AMP HTML разработан таким образом, чтобы это условие всегда соблюдалось.

    Все элементы шаблонов AMP должны проходить проверку безопасности AMP перед отправкой в репозиторий AMP.

    SVG

    В настоящее время разрешены следующие элементы SVG:

    • базовые: «g», «glyph», «glyphRef», «image», «marker», «metadata», «path», «solidcolor», «svg», «switch», «view»
    • формы: «circle», «ellipse», «line», «polygon», «polyline», «rect»
    • текст: «text», «textPath», «tref», «tspan»
    • rendering: «clipPath», «filter», «hkern», «linearGradient», «mask», «pattern», «radialGradient», «vkern»
    • специальные: «defs» (здесь разрешены все дочерние элементы, указанные выше), «symbol», «use»
    • фильтр: «feColorMatrix», «feComposite», «feGaussianBlur», «feMerge», «feMergeNode», «feOffset», «foreignObject»
    • ARIA: «desc», «title»

    А также следующие атрибуты:

    • «xlink:href»: разрешены только URI, начинающиеся с «#»
    • «style»

    Обнаружение документов AMP

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

    Если существует документ AMP, который является альтернативной версией канонического документа, то канонический документ должен указывать на документ AMP с помощью тега link с отношением «amphtml».

    Пример:

    <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" />
    

    Ожидается, что документ AMP будет самостоятельно указывать свою каноническую версию тегом link с отношением «canonical».

    Пример:

    <link
      rel="canonical"
      href="https://www.example.com/url/to/canonical/document.html"
    />
    

    (Если один ресурс является одновременно AMP и каноническим документом, каноническое отношение должно указывать само на себя — указывать отношение «amphtml» не требуется.)

    Обратите внимание, что для максимальной совместимости с системами, потребляющими AMP, необходимо обеспечить возможность считать отношение «amphtml» без выполнения JavaScript — то есть тег должен присутствовать в необработанном HTML, а не внедряться посредством JavaScript.

    Стандарт HTML

    Стандарт HTML

    Уровень жизни — Последнее обновление 19 августа 2021 г.


    Содержание

    1. 1 Введение
    2. 2 Общая инфраструктура
    3. 3 Семантика, структура и API-интерфейсы HTML-документов
    4. 4 Элементы HTML
    5. 5 Микроданные
    6. 6 Взаимодействие с пользователем
    7. 7 Загрузка веб-страниц
    8. 8 API веб-приложений
    9. 9 Связь
    10. 10 Web worker
    11. 11 Worklets
    12. 12 Веб-хранилище
    13. 13 Синтаксис HTML
    14. 14 Синтаксис XML
    15. 15 Рендеринг
    16. 16 Устаревшие функции
    17. 17 Рекомендации IANA
    18. Указатель
    19. Благодарности
    20. Права интеллектуальной собственности

    Полное содержание

    1. 1 Введение
      1. 1.1 Куда подходит эта спецификация?
      2. 1.2 Это HTML5?
      3. 1.3 Фон
      4. 1.4 Аудитория
      5. 1.5 Область
      6. 1.6 История
      7. 1.7 Замечания по дизайну
        1. 1.7.1 Последовательность выполнения скрипта
        2. 1.7.2 Соответствие другим спецификациям
        3. 1.7.3 Расширяемость
      8. 1.8 Синтаксис HTML и XML
      9. 1.9 Структура этой спецификации
        1. 1.9.1 Как читать эту спецификацию
        2. 1.9.2 Типографические условные обозначения
      10. 1.10 Краткое введение в HTML
        1. 1.10.1 Написание безопасных приложений с помощью HTML
        2. 1.10.2 Распространенные ошибки, которых следует избегать при использовании API-интерфейсов сценариев
        3. 1.10.3 Как отловить ошибки при написании HTML: валидаторы и средства проверки соответствия
      11. 1.11 Требования соответствия для авторов
        1. 1.11.1 Презентационная разметка
        2. 1.11.2 Синтаксические ошибки
        3. 1.11.3 Ограничения на модели контента и значения атрибутов
      12. 1.12 Рекомендуемое чтение
    2. 2 Общая инфраструктура
      1. 2.1 Терминология
        1. 2.1.1 Параллелизм
        2. 2.1.2 Ресурсы
        3. 2.1.3 Совместимость с XML
        4. 2.1.4 Деревья DOM
        5. 2.1.5 Создание сценариев
        6. 2.1. 6 Плагины
        7. 2.1.7 Кодировки символов
        8. 2.1.8 Классы соответствия
        9. 2.1.9 Зависимости
        10. 2.1.10 Расширяемость
        11. 2.1.11 Взаимодействие с XPath и XSLT
      2. 2.2 Управляемые политикой функции
      3. 2.3 Общие микросинтаксисы
        1. 2.3.1 Общие идиомы синтаксического анализатора
        2. 2.3.2 Логические атрибуты
        3. 2.3.3 Ключевые слова и нумерованные атрибуты
        4. 2.3.4 Числа
          1. 2.3.4.1 Целые числа со знаком
          2. 2.3 .4.2 Неотрицательные целые числа
          3. 2.3.4.3 Числа с плавающей запятой
          4. 2.3.4.4 Проценты и длины
          5. 2.3.4.5 Ненулевые проценты и длины
          6. 2.3.4.6 Списки чисел с плавающей запятой
          7. 2.3.4.7 Списки измерений
        5. 2.3.5 Даты и время
          1. 2.3.5.1 Месяцы
          2. 2.3.5.2 Даты
          3. 2.3.5.3 Бесконечные даты
          4. 2.3.5.4 Времена
          5. 2.3.5.5 Местные даты и время
          6. 2.3.5.6 Часовые пояса
          7. 2.3.5.7 Глобальные даты и время
          8. 2.3.5.8 Недели
          9. 2.3.5.9 Продолжительность
          10. 2.3.5.10 Неопределенные моменты времени
        6. 2.3.6 Цвета
        7. 2.3.7 Жетоны, разделенные пробелами
        8. 2.3.8 Токены, разделенные запятыми
        9. 2.3.9 Ссылки
        10. 2.3.10 Медиа-запросы
      4. 2.4 URL-адреса
        1. 2.4.1 Терминология
        2. 2.4.2 Анализ URL-адресов
        3. 2.4.3 Динамические изменения базовых URL-адресов
      5. 2.5 Получение ресурсов
        1. 2.5.1 Терминология
        2. 2.5.2 Определение типа ресурса
        3. 2.5.3 Извлечение кодировок символов из мета-элементов
        4. 2.5.4 Атрибуты настроек CORS
        5. 2.5.5 Атрибуты политики реферера
        6. 2.5.6 Атрибуты Nonce
        7. 2.5.7 Атрибуты отложенной загрузки
      6. 2.6 Общие интерфейсы DOM
        1. 2.6.1 Отражение атрибутов содержимого в атрибутах IDL
        2. 2.6.2 Коллекции
          1. 2.6.2.1 HTMLAllCollection интерфейс
            1. 2.6.2.1.1 [[Call]] ( thisArgument , argumentsList )
          2. 2.6.2.2 Интерфейс HTMLFormControlsCollection
          3. 2.6.2.3 Интерфейс HTMLOptionsCollection
        3. 2.6.3 Интерфейс DOMStringList
      7. 2.7 Безопасная передача структурированных данных
        1. 2.7.1 Сериализуемые объекты
        2. 2.7.2 Переносимые объекты
        3. 2.7.3 Structured ( значение , для хранения [, память ])
        4. 2.7.4 StructuredSerialize (значение , )
        5. 2.7.5 StructuredSerializeForStorage (значение , )
        6. 2.7.6 StructuredDeserialize ( сериализовано , targetRealm [, память ])
        7. 2.7.7 StructuredSerializeWithTransfer ( значение , transferList )
        8. 2.7.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult , targetRealm )
        9. 2.7.9 Выполнение сериализации и перенос из других спецификаций
        10. 2.7.10 API структурированного клонирования
    3. 3 Семантика, структура и API HTML-документов
      1. 3.1 Документы
        1. 3.1.1 Объект Document
        2. 3.1.2 Интерфейс DocumentOrShadowRoot
        3. 3.1.3 Управление метаданными ресурсов
        4. 3.1.4 Отчет о состоянии загрузки документа
        5. 3.1.5 Средства доступа к дереву DOM
      2. 3.2 Элементы
        1. 3.2.1 Семантика
        2. 3.2.2 Элементы в DOM
        3. 3.2.3 Конструкторы HTML-элементов
        4. 3.2.4 Определения элементов
          1. 3.2.4.1 Атрибуты
        5. 3.2.5 Модели содержимого
          1. 3.2.5.1 Модель содержимого «ничего»
          2. 3.2.5.2 Типы содержимого
            1. 3.2.5.2.1 Содержимое метаданных
            2. 3.2.5.2.2 Содержимое потока
            3. 3.2.5.2.3 Разделение содержимого
            4. 3.2.5.2.4 Содержание заголовка
            5. 3.2.5.2.5 Фразовое содержание
            6. 3.2.5.2.6 Встроенное содержание
            7. 3.2.5.2.7 Интерактивное содержание
            8. 3.2.5.2.8 Ощутимое содержание
            9. 3.2.5.2. 9 Элементы поддержки скрипта
          3. 3.2.5.3 Модели прозрачного содержимого
          4. 3.2.5.4 Параграфы
        6. 3.2.6 Глобальные атрибуты
          1. 3.2.6.1 Атрибут title
          2. 3.2.6.2 lang и xml: lang Атрибуты
          3. 3.2.6.3 Атрибут translate
          4. 3.2.6.4 Атрибут dir
          5. 3.2.6.5 Атрибут стиля
          6. 3.2.6.6 Встраивание пользовательских невидимых данных с атрибутами data- *
        7. 3.2.7 Свойства innerText и outerText
        8. 3.2.8 Требования, относящиеся к двунаправленному алгоритму
          1. 3.2.8.1 Критерии соответствия для символов форматирования двунаправленного алгоритма
          2. 3.2.8.2 Критерии соответствия пользовательского агента
        9. 3.2. 9 Требования, относящиеся к ARIA и API доступности платформы
    4. 4 Элементы HTML
      1. 4.1 Элемент документа
        1. 4.1.1 Элемент html
      2. 4.2 Метаданные документа
        1. 4.2.1 Элемент head
        2. 4.2.2 Элемент заголовка
        3. 4.2.3 Элемент base
        4. 4.2.4 ссылка элемент
          1. 4.2.4.1 Обработка медиа-атрибута
          2. 4.2.4.2 Обработка атрибута типа
          3. 4.2.4.3 Получение и обработка ресурса из ссылки элемент
          4. 4.2.4.4 Обработка заголовков Link
          5. 4.2.4.5 Предоставление пользователям средств перехода по гиперссылкам, созданным с помощью ссылки элемент
        5. 4.2.5 Мета элемент
          1. 4.2.5.1 Стандартные имена метаданных
          2. 4.2.5.2 Имена других метаданных
          3. 4.2.5.3 Директивы Pragma
          4. 4.2.5.4 Указание кодировки символов документа
        6. 4.2.6 Стиль Элемент
        7. 4.2.7 Взаимодействие стилей и сценариев
      3. 4.3 Разделы
        1. 4.3.1 Элемент body
        2. 4.3.2 Элемент article
        3. 4.3.3 Элемент section
        4. 4.3.4 nav элемент
        5. 4.3.5 в стороне элемент
        6. 4.3.6 h2 , h3 , h4 , h5 , h5 , и h6 элементы
        7. 4.3.7 hgroup элемент
        8. 4.3.8 Заголовок , элемент
        9. 4.3.9 Нижний колонтитул , элемент
        10. 4.3.10 Адрес , элемент
        11. 4.3.11 Заголовки и разделы
          1. 4.3.11.1 Создание контура
          2. 4.3.11.2 Пример контуров
          3. 4.3.11.3 Отображение структуры для пользователей
        12. 4.3.12 Краткое описание использования
          1. 4.3.12.1 Статья или раздел?
      4. 4.4 Группировка содержимого
        1. 4.4.1 Элемент p
        2. 4.4.2 Элемент hr
        3. 4.4.3 Элемент pre
        4. 4.4.4 Блок цитаты Элемент
        5. 4.4.5 Элемент ol
        6. 4.4.6 Элемент ul
        7. 4.4. 7 Меню Элемент
        8. 4.4.8 Элемент li
        9. 4.4.9 Элемент dl
        10. 4.4.10 Элемент dt
        11. 4.4.11 Элемент dd
        12. 4.4. 12 Фигура фигура элемент
        13. 4.4.13 Элемент figcaption
        14. 4.4.14 Основной элемент
        15. 4.4.15 Элемент div
      5. 4.5 Семантика уровня текста
        1. 4.5.1 Элемент a
        2. 4.5.2 Элемент em
        3. 4.5.3 Элемент strong
        4. 4.5.4 Маленький элемент
        5. 4.5.5 Элемент s
        6. 4.5.6 Элемент cite
        7. 4.5.7 Элемент q
        8. 4.5.8 Элемент dfn
        9. 4.5.9 Элемент abbr
        10. 4.5.10 Элемент ruby ​​
        11. 4.5.11 Элемент rt
        12. 4.5. 12 Элемент rp
        13. 4.5.13 Элемент данных
        14. 4.5.14 Время Элемент
        15. 4.5.15 Код элемент
        16. 4.5.16 Элемент var
        17. 4.5. 17 Элемент samp
        18. 4.5.18 Элемент kbd
        19. 4.5.19 Элементы sub и sup
        20. 4.5.20 Элемент i
        21. 4.5.21 Элемент b
        22. 4.5.22 Элемент u
        23. 4.5.23 Элемент mark
        24. 4.5.24 Элемент bdi
        25. 4.5.25 Элемент bdo
        26. 4.5.26 Элемент span
        27. 4.5.27 Элемент br
        28. 4.5.28 Элемент wbr
        29. 4.5.29 Сводка использования
      6. 4.6 Ссылки
        1. 4.6.1 Введение
        2. 4.6.2 Ссылки, созданные a и области элементов
        3. 4.6.3 API для a и области элементов
        4. 4.6.4 Переход по гиперссылкам
        5. 4.6.5 Загрузка ресурсов
          1. 4.6.5.1 Аудит гиперссылок
        6. 4.6.6 Типы ссылок
          1. 4.6.6.1 Тип ссылки « альтернативный »
          2. 4.6.6.2 Тип ссылки " автор "
          3. 4.6.6.3 Тип ссылки " закладка "
          4. 4.6.6.4 Тип ссылки " canonical "
          5. 4.6.6.5 Тип ссылки " dns-prefetch "
          6. 4.6.6.6 Тип ссылки « внешний »
          7. 4.6.6.7 Тип ссылки « help »
          8. 4.6.6.8 Тип ссылки « значок »
          9. 4.6.6.9 Тип ссылки « лицензия »
          10. 4.6. 6.10 Тип ссылки « манифест »
          11. 4.6.6.11 Тип ссылки " modulepreload "
          12. 4.6.6.12 Тип ссылки " nofollow "
          13. 4.6.6.13 Тип ссылки " noopener "
          14. 4.6.6.14 Тип ссылки " noreferrer "
          15. 4.6.6.15 Ссылка тип « открыватель »
          16. 4.6.6.16 Тип ссылки « pingback »
          17. 4.6.6.17 Тип ссылки « preconnect »
          18. 4.6.6.18 Тип ссылки « prefetch »
          19. 4.6.6.19 Тип ссылки » предварительный натяг "
          20. 4.6.6.20 Тип ссылки « prerender »
          21. 4.6.6.21 Тип ссылки « search »
          22. 4.6.6.22 Тип ссылки « таблица стилей »
          23. 4.6.6.23 Тип ссылки « тег »
          24. 4.6. 6.24 Типы последовательных каналов
            1. 4.6.6.24.1 Тип связи " следующий "
            2. 4.6.6.24.2 Тип связи " предыдущий "
          25. 4.6.6.25 Другие типы ссылок
      7. 4.7 Редактирование
        1. 4.7.1 Элемент ins
        2. 4.7.2 Элемент del
        3. 4.7.3 Атрибуты, общие для элементов ins и del
        4. 4.7.4 Редактирование и параграфы
        5. 4.7.5 Редактирование и списки
        6. 4.7.6 Редактирование и таблицы
      8. 4.8 Встроенное содержимое
        1. 4.8.1 Изображение Элемент
        2. 4.8.2 Источник Элемент
        3. 4.8.3 Элемент img
        4. 4.8.4 Изображения
          1. 4.8.4.1 Введение
            1. 4.8.4.1.1 Адаптивные изображения
          2. 4.8.4.2 Атрибуты, общие для источника , img и связывают элементы
            1. 4.8.4.2.1 Атрибуты набора
            2. 4.8.4.2.2 Атрибуты размеров
          3. 4.8.4.3 Модель обработки
            1. 4.8.4.3.1 Когда получать изображения
            2. 4.8 .4.3.2 Реакция на мутации DOM
            3. 4.8.4.3.3 Список доступных изображений
            4. 4.8.4.3.4 Декодирование изображений
            5. 4.8.4.3.5 Обновление данных изображения
            6. 4.8.4.3.6 Подготовка изображения для презентации
            7. 4.8.4.3.7 Выбор источника изображения
            8. 4.8.4.3.8 Обновление набора источников
            9. 4.8.4.3.9 Анализ атрибута srcset
            10. 4.8.4.3.10 Анализ Атрибут sizes
            11. 4.8.4.3.11 Нормализация исходных плотностей
            12. 4.8.4.3.12 Реагирование на изменения среды
          4. 4.8.4.4 Требования к предоставлению текста в качестве альтернативы изображениям
            1. 4.8.4.4.1 Общие руководящие принципы
            2. 4.8.4.4.2 Ссылка или кнопка, не содержащие ничего, кроме изображения
            3. 4.8.4.4.3 Фраза или абзац с альтернативным графическим представлением: диаграммы, диаграммы, графики, карты, иллюстрации
            4. 4.8.4.4.4 Короткая фраза или подпись с альтернативным графическим представлением: значки, логотипы
            5. 4.8.4.4.5 Текст, преобразованный в графику для типографского эффекта
            6. 4.8.4.4.6 Графическое представление некоторого окружающего текста
            7. 4.8.4.4.7 Вспомогательные изображения
            8. 4.8.4.4.8 Чисто декоративное изображение, которое не добавляет никакой информации
            9. 4.8.4.4.9 Группа изображений, которые образуют единое большое изображение без ссылок
            10. 4.8.4.4.10 Группа изображений, которые образуют единое большее изображение изображение со ссылками
            11. 4.8.4.4.11 Ключевая часть контента
            12. 4.8.4.4.12 Изображение, не предназначенное для пользователя
            13. 4.8.4.4.13 Изображение в электронном письме или личном документе, предназначенное для конкретного человека кто, как известно, может просматривать изображения
            14. 4.8.4.4.14 Руководство для генераторов разметки
            15. 4.8.4.4.15 Руководство для проверщиков соответствия
        5. 4.8.5 iframe элемент
        6. 4.8.6 встроенный элемент
        7. 4.8.7 Объект Элемент
        8. 4.8.8 Параметр Элемент
        9. 4.8.9 Видео элемент
        10. 4.8.10 audio element
        11. 4.8.11 Дорожка Элемент
        12. 4.8.12 Элементы мультимедиа
          1. 4.8.12.1 Коды ошибок
          2. 4.8.12.2 Расположение медиаресурса
          3. 4.8.12.3 Типы MIME
          4. 4.8.12.4 Состояния сети
          5. 4.8.12.5 Загрузка медиаресурса
          6. 4.8.12.6 Смещения в медиаресурс
          7. 4.8.12.7 Состояния готовности
          8. 4.8.12.8 Воспроизведение медиаресурса
          9. 4.8.12.9 Поиск
          10. 4.8.12.10 Медиаресурсы с несколькими медиа-треками
            1. 4.8.12.10.1 AudioTrackList и VideoTrackList объекты
            2. 4.8.12.10.2 Декларативный выбор определенных аудио- и видеодорожек
          11. 4.8.12.11 Временные текстовые дорожки
            1. 4.8.12.11.1 Модель текстовой дорожки
            2. 4.8.12.11.2 Поиск внутриполосных текстовых дорожек
            3. 4.8.12.11.3 Источники внеполосных текстовых дорожек
            4. 4.8.12.11.4 Рекомендации по отображению реплик в различных форматах в виде реплик текстовой дорожки
            5. 4.8.12.11.5 API текстовой дорожки
            6. 4.8.12.11.6 Обработчики событий для объектов текста отслеживать API
            7. 4.8.12.11.7 Лучшие практики для текстовых дорожек метаданных
          12. 4.8.12.12 Определение типа дорожки через URL-адрес
          13. 4.8.12.13 Пользовательский интерфейс
          14. 4.8.12.14 Временные диапазоны
          15. 4.8.12.15 Интерфейс TrackEvent
          16. 4.8.12.16 Сводка событий
          17. 4.8.12.17 Вопросы безопасности и конфиденциальности
          18. 4.8.12.18 Лучшие практики для авторов, использующих медиаэлементы
          19. 4.8.12.19 Лучшие практики для разработчиков медиаэлементов
        13. 4.8.13 Карта Элемент
        14. 4.8.14 Область Элемент
        15. 4.8.15 Карты изображений
          1. 4.8.15.1 Создание
          2. 4.8.15.2 Модель обработки
        16. 4.8.16 MathML
        17. 4.8.17 SVG
        18. 4.8.18 Атрибуты измерения
      9. 4.9 Табличные данные
        1. 4.9.1 Таблица Элемент
          1. 4.9.1.1 Методы описания таблиц
          2. 4.9.1.2 Методы создания таблиц
        2. 4.9.2 Элемент заголовка
        3. 4.9.3 Элемент colgroup
        4. 4.9.4 Элемент col
        5. 4.9.5 Элемент tbody
        6. 4.9.6 Элемент thead
        7. 4.9. 7 Элемент tfoot
        8. 4.9.8 Элемент tr
        9. 4.9.9 Элемент td
        10. 4.9.10 Элемент th
        11. 4.9.11 Атрибуты, общие для td и th элемента
        12. 4.9.12 Модель обработки
          1. 4.9.12.1 Формирование таблицы
          2. 4.9.12.2 Формирование отношений между ячейками данных и ячейками заголовка
        13. 4.9.13 Примеры
      10. 4.10 Формы
        1. 4.10.1 Введение
          1. 4.10.1.1 Написание пользовательский интерфейс формы
          2. 4.10.1.2 Реализация обработки на стороне сервера для формы
          3. 4.10.1.3 Настройка формы для связи с сервером
          4. 4.10.1.4 Проверка формы на стороне клиента
          5. 4.10.1.5 Включение автоматического заполнения элементов управления формы на стороне клиента
          6. 4.10.1.6 Улучшение взаимодействия с пользователем на мобильных устройствах
          7. 4.10.1.7 Разница между типом поля, именем поля автозаполнения и модальностью ввода
          8. 4.10.1.8 Форматы даты, времени и чисел
        2. 4.10.2 Категории
        3. 4.10.3 Форма , элемент
        4. 4.10.4 Метка , элемент
        5. 4.10.5 вводит элемент
          1. 4.10.5.1 Состояния атрибута типа
            1. 4.10.5.1.1 Скрытое состояние (тип = скрытый )
            2. 4.10.5.1.2 Состояние текста ( type = text ) и состояние поиска ( type = search )
            3. 4.10.5.1.3 Состояние телефона ( type = tel )
            4. 4.10.5.1.4 Состояние URL ( type = url )
            5. 4.10.5.1.5 Состояние электронной почты ( type = email )
            6. 4.10.5.1.6 Состояние пароля (тип = пароль )
            7. 4.10.5.1.7 Состояние даты (тип = дата )
            8. 4.10.5.1.8 Состояние месяца (тип = месяц )
            9. 4.10.5.1.9 Состояние недели (тип = неделя )
            10. 4.10.5.1.10 Состояние времени (тип = время )
            11. 4.10.5.1. 11 Локальное состояние даты и времени ( type = datetime-local )
            12. 4.10.5.1.12 Состояние номера ( type = number )
            13. 4.10.5.1.13 Состояние диапазона ( тип = диапазон )
            14. 4.10 .5.1.14 Состояние цвета (тип = цвет )
            15. 4.10.5.1.15 Состояние флажка (тип = флажок )
            16. 4.10.5.1.16 Состояние переключателя (тип = радио )
            17. 4.10.5.1.17 Состояние загрузки файла (тип = файл )
            18. 4.10.5.1.18 Состояние кнопки отправки ( тип = отправить )
            19. 4.10 .5.1.19 Состояние кнопки изображения (тип = изображение )
            20. 4.10.5.1.20 Состояние кнопки сброса (тип = сброс )
            21. 4.10.5.1.21 Состояние кнопки (тип = кнопка )
          2. 4.10.5.2 Замечания по реализации, касающиеся локализации элементов управления формами
          3. 4.10.5.3 Общие входные атрибуты элемента
            1. 4.10.5.3.1 Атрибуты maxlength и minlength
            2. 4.10.5.3.2 Размер атрибут
            3. 4.10.5.3.3 Атрибут только для чтения атрибут
            4. 4.10.5.3.4 Требуемый атрибут
            5. 4.10.5.3.5 Множественный атрибут
            6. 4.10.5.3.6 Шаблон Атрибут
            7. 4.10.5.3.7 Минимум и максимум атрибуты
            8. 4.10.5.3.8 Атрибут шага
            9. 4.10.5.3.9 Список Атрибут
            10. 4.10.5.3.10 Заполнитель Атрибут
          4. 4.10.5.4 Общий вход API элементов
          5. 4.10.5.5 Поведение общих событий
        6. 4.10.6 Кнопка Элемент
        7. 4.10.7 Элемент select
        8. 4.10.8 Элемент datalist элемент
        9. 4.10.9 Элемент optgroup
        10. 4.10.10 Параметр , элемент
        11. 4.10.11 Текстовое поле Элемент
        12. 4.10.12 Вывод , элемент
        13. 4.10.13 Элемент progress
        14. 4.10.14 Элемент meter
        15. 4.10. 15 Элемент fieldset
        16. 4.10.16 Легенда Элемент
        17. 4.10.17 Инфраструктура управления формой
          1. 4.10.17.1 Значение элемента управления формой
          2. 4.10.17.2 Изменяемость
          3. 4.10.17.3 Ассоциация элементов управления и форм
        18. 4.10.18 Атрибуты, общие для элементов управления формы
          1. 4.10.18.1 Именование элементов управления формы: имя , атрибут
          2. 4.10.18.2 Направленность отправки элемента: имя каталога , атрибут
          3. 4.10.18.3 Ограничение длины пользовательского ввода: атрибут maxlength
          4. 4.10.18.4 Установка требований к минимальной длине ввода: атрибут minlength
          5. 4.10.18.5 Включение и отключение элементов управления формой: атрибут отключен, атрибут
          6. 4.10.18.6 Атрибуты отправки формы
          7. 4.10.18.7 Автозаполнение
            1. 4.10.18.7.1 Элементы управления автозаполнением формы: атрибут автозаполнения
            2. 4.10.18.7.2 Модель обработки
        19. 4.10.19 API для текста выбор управления
        20. 4.10.20 Ограничения
          1. 4.10.20.1 Определения
          2. 4.10.20.2 Проверка ограничений
          3. 4.10.20.3 API проверки ограничений
          4. 4.10.20.4 Безопасность
        21. 4.10.21 Отправка формы
          1. 4.10.21.1 Введение
          2. 4.10.21.2 Неявная отправка
          3. 4.10.21.3 Алгоритм отправки формы
          4. 4.10.21.4 Создание списка записей
          5. 4.10.21.5 Выбор кодировки отправки формы
          6. 4.10.21.6 Преобразование список записей в список пар имя-значение
          7. 4.10.21.7 Данные формы в кодировке URL
          8. 4.10.21.8 Данные многостраничной формы
          9. 4.10.21.9 Данные простой текстовой формы
          10. 4.10.21.10 Интерфейс SubmitEvent
          11. 4 .10.21.11 Интерфейс FormDataEvent
        22. 4.10.22 Сброс формы
      11. 4.11 Интерактивные элементы
        1. 4.11.1 Детализирует элемент
        2. 4.11.2 Сводка элемент
        3. 4.11.3 Команды
          1. 4.11.3.1 Фасеты
          2. 4.11.3.2 Использование элемента a для определения команды
          3. 4.11.3.3 Использование кнопки Элемент для определения команды
          4. 4.11.3.4 Использование элемента input для определения команда
          5. 4.11.3.5 Использование элемента option для определения команды
          6. 4.11.3.6 Использование атрибута accesskey на элементе легенды для определения команды
          7. 4.11.3.7 Использование клавиши доступа атрибут для определения команды для других элементов
        4. 4.11.4 Диалоговое окно элемент
      12. 4.12 Сценарии
        1. 4.12.1 Сценарий элемент
          1. 4.12.1.1 Модель обработки
          2. 4.12.1.2 Языки сценариев
          3. 4.12.1.3 Ограничения для содержимого сценария элементы
          4. 4.12.1.4 Встроенная документация для внешних сценариев
          5. 4.12.1.5 Взаимодействие элементов сценария и XSLT
        2. 4.12.2 The Элемент noscript
        3. 4.12.3 Шаблон Элемент
          1. 4.12.3.1 Взаимодействие элементов шаблона с XSLT и XPath
        4. 4.12.4 Слот Элемент
        5. 4.12.5 Холст Элемент
          1. 4.12.5.1 Контекст 2D-рендеринга
            1. 4.12.5.1.1 Замечания по реализации
            2. 4.12.5.1.2 Состояние холста
            3. 4.12.5.1.3 Стили линий
            4. 4.12.5.1.4 Стили текста
            5. 4.12.5.1.5 Строительные пути
            6. 4.12.5.1.6 Path3D объекты
            7. 4.12.5.1.7 Преобразования
            8. 4.12.5.1.8 Источники изображений для контекстов 2D-рендеринга
            9. 4.12.5.1.9 Стили заливки и обводки
            10. 4.12.5.1.10 Рисование прямоугольников на растровом изображении
            11. 4.12.5.1.11 Рисование текста на растровом изображении
            12. 4.12.5.1.12 Рисование путей к холсту
            13. 4.12.5.1.13 Рисование колец фокусировки и путей прокрутки в представление
            14. 4.12 .5.1.14 Рисование изображений
            15. 4.12.5.1.15 Манипуляции с пикселями
            16. 4.12.5.1.16 Композиция
            17. 4.12.5.1.17 Сглаживание изображений
            18. 4.12.5.1.18 Тени
            19. 4.12.5.1.19 Фильтры
            20. 4.12.5.1.20 Работа с внешними фильтрами SVG
            21. 4.12.5.1.21 Модель чертежа
            22. 4.12.5.1.22 Лучшие практики
            23. 4.12.5.1.23 Примеры
          2. 4.12.5.2 Контекст рендеринга ImageBitmap
            1. 4.12.5.2.1 Введение
            2. 4.12.5.2.2 Интерфейс ImageBitmapRenderingContext
          3. 4.12.5.3 Интерфейс OffscreenCanvas
            1. 4.12.5.3.1 Контекст 2D-рендеринга вне экрана
          4. 4.12.5.4 Цветовые пространства и цветовое пространство преобразование
          5. 4.12.5.5 Сериализация растровых изображений в файл
          6. 4.12.5.6 Безопасность с использованием холста элементов
          7. 4.12.5.7 Предварительно умноженные альфа и контекст 2D-рендеринга
      13. 4.13 Пользовательские элементы
        1. 4.13.1 Введение
          1. 4.13. 1.1 Создание автономного настраиваемого элемента
          2. 4.13.1.2 Создание связанного с формой настраиваемого элемента
          3. 4.13.1.3 Создание настраиваемого элемента с доступными по умолчанию ролями, состояниями и свойствами
          4. 4.13.1.4 Создание настраиваемого встроенного элемента
          5. 4.13.1.5 Недостатки автономных настраиваемых элементов
          6. 4.13.1.6 Обновление элементов после их создания
        2. 4.13.2 Требования к конструкторам настраиваемых элементов и реакции
        3. 4.13.3 Основные концепции
        4. 4.13.4 Интерфейс CustomElementRegistry
        5. 4.13.5 Обновления
        6. 4.13.6 Реакции пользовательских элементов
        7. 4.13.7 Внутреннее устройство элемента
          1. 4.13.7.1 Интерфейс ElementInternals
          2. 4.13.7.2 Теневой корневой доступ
          3. 4.13.7.3 Пользовательские элементы, связанные с формой
          4. 4.13.7.4 Семантика доступности
      14. 4.14 Общие идиомы без выделенных элементов
        1. 4.14.1 Хлебная крошка навигация
        2. 4.14.2 Облака тегов
        3. 4.14.3 Разговоры
        4. 4.14.4 Сноски
      15. 4.15 Отключенные элементы
      16. 4.16 Сопоставление элементов HTML с помощью селекторов и CSS
        1. 4.16.1 Чувствительность к регистру функции CSS attr ()
        2. 4.16.2 Чувствительность к регистру селекторов
        3. 4.16.3 Псевдоклассы
    5. 5 Микроданные
      1. 5.1 Введение
        1. 5.1.1 Обзор
        2. 5.1.2 Базовый синтаксис
        3. 5.1.3 Типизированные элементы
        4. 5.1.4 Глобальные идентификаторы для элементов
        5. 5.1.5 Выбор имен при определении словарей
      2. 5.2 Кодирование микроданных
        1. 5.2.1 Модель микроданных
        2. 5.2.2 Элементы
        3. 5.2.3 Имена: атрибут itemprop
        4. 5.2.4 Значения
        5. 5.2.5 Связывание имен с элементами
        6. 5.2.6 Микроданные и другие пространства имен
      3. 5.3 Примеры словарей микроданных
        1. 5.3. 1 vCard
          1. 5.3.1.1 Преобразование в vCard
          2. 5.3.1.2 Примеры
        2. 5.3.2 vEvent
          1. 5.3.2.1 Преобразование в iCalendar
          2. 5.3.2.2 Примеры
        3. 5.3.3 Работы по лицензированию
          1. 5 .3.3.1 Примеры
      4. 5.4 Преобразование HTML в другие форматы
        1. 5.4.1 JSON
    6. 6 Взаимодействие с пользователем
      1. 6.1 Скрытый атрибут
      2. 6.2 Инертные поддеревья
      3. 6.3 Отслеживание активации пользователя
        1. 6.3.1 Модель данных
        2. 6.3.2 Модель обработки
        3. 6.3.3 API-интерфейсы, стробируемые активацией пользователя
      4. 6.4 Поведение при активации элементов
      5. 6.5 Focus
        1. 6.5.1 Введение
        2. 6.5.2 Модель данных
        3. 6.5.3 Атрибут tabindex
        4. 6.5.4 Модель обработки
        5. 6.5.5 Последовательная навигация фокуса
        6. 6.5.6 API управления фокусом
        7. 6.5.7 Автофокус Атрибут
      6. 6.6 Назначение сочетаний клавиш
        1. 6.6.1 Введение
        2. 6.6.2 Клавиша доступа атрибут
        3. 6.6.3 Обработка модель
      7. 6.7 Редактирование
        1. 6.7.1 Создание редактируемых областей документа: атрибут содержимого contenteditable
        2. 6.7.2 Создание целых документов редактируемый: the designMode getter and setter
        3. 6.7.3 Лучшие практики для встроенных редакторов
        4. 6.7.4 Редактирование API
        5. 6.7.5 Проверка орфографии и грамматики
        6. 6.7.6 Автокапитализация
        7. 6.7.7 Режимы ввода : режим ввода атрибут
        8. 6.7.8 Режимы ввода: ввод keyhint атрибут
      8. 6.8 Поиск на странице
        1. 6.8.1 Введение
        2. 6.8.2 Взаимодействие с деталями
        3. 6.8.3 Взаимодействие с выбором
      9. 6.9 Перетаскивание
        1. 6.9.1 Введение
        2. 6.9.2 перетаскивание хранилища данных
        3. 6.9.3 Интерфейс DataTransfer
          1. 6.9.3.1 Интерфейс DataTransferItemList
          2. 6.9.3.2 Интерфейс DataTransferItem
        4. 6.9.4 Интерфейс 2 9000
        5. .9.5 Модель обработки
        6. 6.9.6 Сводка событий
        7. 6.9.7 Перетаскиваемый атрибут
        8. 6.9.8 Риски безопасности в модели перетаскивания
    7. 7 Загрузка веб-страниц
      1. 7.1 Контексты просмотра
        1. 7.1.1 Создание контекстов просмотра
        2. 7.1.2 Связанные контексты просмотра
          1. 7.1.2.1 Навигация по связанным контекстам просмотра в DOM
        3. 7.1.3 Безопасность
        4. 7.1.4 Группировка контекстов просмотра
        5. 7.1.5 Просмотр имен контекстов
      2. 7.2 Инфраструктура безопасности для окна , WindowProxy и Расположение Объекты
        1. 7.2.1 Интеграция с IDL
        2. 7.2.2 Общий внутренний слот: [[CrossOriginPropertyDescriptorMap]]
        3. 7.2.3 Общие абстрактные операции
          1. 7.2.3.1 CrossOriginProperties ( O O O O O O )
          2. 7.2.3.2 CrossOriginPropertyFallback ( P )
          3. 7.2.3.3 IsPlatformObjectSameOrigin ( O )
          4. 7.2.3.4 CrossOriginGetOwnPropertyHelper ( O , P )
          5. 7.2.3.5 CrossOriginGet ( O , P , Приемник )
          6. 7.2.3.6 CrossOriginSet ( , Приемник )
          7. 7.2.3.7 CrossOriginOwnPropertyKeys ( O )
      3. 7.3 Объект Window
        1. 7.3.1 API-интерфейсы для создания контекстов просмотра и навигации по ним по имени
        2. 7.3.2 Доступ к другим контекстам просмотра
        3. 7.3.3 Именованный доступ к объекту Window
        4. 7.3.4 Отказ от контекстов просмотра
        5. 7.3.5 Закрытие контекстов просмотра
        6. 7.3.6 Элементы интерфейса браузера
        7. 7.3.7 Настройки скрипта для Window объектов
      4. 7.4 Экзотический объект WindowProxy
        1. 7.4.1 [[GetPrototypeOf]] ()
        2. 7.4.2 [[SetPrototypeOf]] ( V )
        3. 7.4.3 [[IsExtensible]] ()
        4. 7.4.4 [[PreventExtensions]] ()
        5. 7.4.5 [[GetOwnProperty]] ( P )
        6. 7.4.6 [[DefineOwnProperty]] ( P , Описание )
        7. 7.4.7 [[Get]] ( P , Receiver )
        8. 7.4.8 [[Set]] ( P , V , Receiver )
        9. 7.4.9 [[[ Удалить]] ( P )
        10. 7.4.10 [[OwnPropertyKeys]] ()
      5. 7.5 Источник
        1. 7.5.1 Сайты
        2. 7.5.2 Снятие ограничения по происхождению
        3. 7.5.3 Кластеры агентов с исходным ключом
      6. 7.6 Песочница
      7. 7.7 Политики открытия разных источников
        1. 7.7.1 Заголовки
        2. 7.7.2 Просмотр переключение группы контекста из-за политики открывания кросс-происхождения
        3. 7.7.3 Отчетность
      8. 7.8 Политики внедрения кросс-происхождения
        1. 7.8.1 Заголовки
        2. 7.8.2 Проверки политик встраивания
      9. 7.9 Контейнеры политик
      10. 7.10 История сеансов и навигация
        1. 7.10.1 Просмотр сеансов
        2. 7.10.2 История сеансов контекстов просмотра
        3. 7.10.3 Интерфейс History
        4. 7.10.4 Замечания по реализации для истории сеансов
        5. 7.10.5 Интерфейс Location
          1. 7.10.5.1 [[GetPrototypeOf]] ()
          2. 7.10.5.2 [[SetPrototypeOf]] ( V )
          3. 7.10.5.3 [[IsExtensible]] ()
          4. 7 .10.5.4 [[PreventExtensions]] ()
          5. 7.10.5.5 [[GetOwnProperty]] ( P )
          6. 7.10.5.6 [[DefineOwnProperty]] ( P , Desc )
          7. 7.10.5.7 [ [Get]] ( P , Receiver )
          8. 7.10.5.8 [[Set]] ( P , V , Receiver )
          9. 7.10.5.9 [[Удалить]] ( P )
          10. 7.10.5.10 [[OwnPropertyKeys]] ()
      11. 7.11 Просмотр веб-страниц
        1. 7.11.1 Навигация по документам
        2. 7.11.2 Модель обработки загрузки страницы для файлов HTML
        3. 7.11.3 Модель обработки загрузки страницы для файлов XML
        4. 7.11.4 Модель обработки загрузки страницы для текстовых файлов
        5. 7.11.5 Модель обработки загрузки страницы для multipart / x-mixed-replace ресурсы
        6. 7.11.6 Модель обработки загрузки страницы для носителя
        7. 7.11.7 Модель обработки загрузки страницы для контента, который использует плагины
        8. 7.11.8 Модель обработки загрузки страницы для встроенного контент, не имеющий DOM
        9. 7.11.9 Переход к фрагменту
        10. 7.11.10 Обход истории
          1. 7.11.10.1 Сохраненное состояние записи истории
          2. 7.11.10.2 Интерфейс PopStateEvent
          3. 7.11.10.3 HashChangeEvent интерфейс 9000Traition
          4. 7.11.102.4 интерфейс
        11. 7.11.11 Загрузка документов
        12. 7.11.12 Выгрузка документов
          1. 7.11.12.1 Интерфейс BeforeUnloadEvent
        13. 7.11.13 Прерывание загрузки документа
        14. 7.11.14 Заголовок ` X-Frame-Options `
    8. 8 API веб-приложений
      1. 8.1 Создание сценариев
        1. 8.1.1 Введение
        2. 8.1.2 Агенты и кластеры агентов
          1. 8.1.2.1 Интеграция с формализмом агента JavaScript
          2. 8.1.2.2 Интеграция с формализмом кластера агента JavaScript
        3. 8.1.3 Области и их аналоги
          1. 8.1.3.1 Среды
          2. 8.1.3.2 Объекты настроек среды
          3. 8.1.3.3 Области, объекты настроек и глобальные объекты
            1. 8.1.3.3.1 Запись
            2. 8.1.3.3.2 Действующий
            3. 8.1.3.3.3 Текущий
            4. 8.1.3.3.4 Соответствующий
          4. 8.1.3.4 Включение и отключение сценариев
          5. 8.1.3.5 Защищенные контексты
        4. 8.1.4 Обработка сценариев модель
          1. 8.1.4.1 Скрипты
          2. 8.1.4.2 Получение скриптов
          3. 8.1.4.3 Создание скриптов
          4. 8.1.4.4 Вызов сценариев
          5. 8.1.4.5 Завершение сценариев
          6. 8.1.4.6 Ошибки сценария выполнения
          7. 8.1.4.7 Отклонения необработанных обещаний
        5. 8.1.5 Перехватчики узла спецификации JavaScript
          1. 8.1.5.1 HostEnsureCanCompileStrings ( callerRealm calleeRealm )
          2. 8.1.5.2 HostPromiseRejectionTracker ( обещание , операция )
          3. 8.1.5.3 Связанные с заданием перехватчики хоста
            1. 8.1.5.3.1 HostCallJobCallback ( обратный вызов , V список аргументов )
            2. 8.1.5.3.2 HostEnqueueFinalizationRegistryCleanupJob ( finalizationRegistry )
            3. 8.1.5.3.3 HostEnqueuePromiseJob ( задание , область )
            4. 8.1.5.3.4 HostMakeJobCallback ( вызываемый )
          4. 8.1.5.4 Связанные с модулем перехватчики хоста
            1. 8.1.5.4.1 HostGetImportMetaProperties ( moduleRecordModuleImportMetaProperties ( moduleRecord ) 9000.4D
            2. ( ссылается наScriptOrModule , moduleRequest , promiseCapability )
            3. 8.1.5.4.3 HostResolveImportedModule ( ссылается наScriptOrModule , moduleRequest )
            4. 8.1.5.4.4 HostGetSupportedImportAssertions ()
        6. 8.1.6 Циклы событий
          1. 8.1.6.1 Определения
          2. 8.1.6.2 Задачи организации очереди
          3. 8.1.6.3 Модель обработки
          4. Общие источники задач
          5. 8.1.6.5 Обработка цикла событий из других спецификаций
        7. 8.1.7 События
          1. 8.1.7.1 Обработчики событий
          2. 8.1.7.2 Обработчики событий на элементах, объекты Document и объекты Window
            1. 8.1.7.2.1 Определения IDL
          3. 8.1.7.3 Запуск события
      2. 8.2 Миксин WindowOrWorkerGlobalScope
      3. 8.3 Служебные методы Base64
      4. 8.4 Динамическая вставка разметки
        1. 8.4.1 Открытие входного потока
        2. 8.4.2 Закрытие входного потока
        3. 8.4.3 document.write ()
        4. 8.4.4 document.writeln ()
      5. 8.5 Анализ DOM
      6. 8.6 Таймеры
      7. 8.7 Очередь микрозадач
      8. 8.8 Пользовательские подсказки
        1. 8.89.1 8.8.2 Печать
      9. 8.9 Состояние и возможности системы
        1. 8.9.1 Объект Navigator
          1. 8.9.1.1 Идентификация клиента
          2. 8.9.1.2 Языковые настройки
          3. 8.9.1.3 Состояние браузера
          4. 8.9.1.4 Обработчики пользовательских схем: метод registerProtocolHandler ()
            1. 8.9.1.4.1 Безопасность и конфиденциальность
          5. 8.9.1.5 Файлы cookie
          6. 8.9.1.6 Поддержка просмотра PDF
      10. 8.10 Изображения
      11. 8.11 Кадры анимации
    9. 9 Связь
      1. 9.1 Интерфейс MessageEvent
      2. 9.2 События, отправляемые сервером
        1. 9.2.1 Введение
        2. 9.2.2 Интерфейс EventSource
        3. 9.2.3 Модель обработки
        4. 9.2.4 Анализ потока событий
        5. 9.2.5 Интерпретация потока событий
        6. 9.2.6 Примечания к автору
        7. 9.2.7 Push без установления соединения и другие функции
        8. 9.2.8 Сборка мусора
        9. 9.2.9 Рекомендации по внедрению
      3. 9.3 Веб-сокеты
        1. 9.3.1 Введение
        2. 9.3.2 Интерфейс WebSocket
        3. 9.3.3 Обратная связь по протоколу
        4. 9.3.4 Фреймы Ping и Pong
        5. 9.3.5 Интерфейс CloseEvent
        6. 9.3.6 Сборка мусора
      4. 9.4 Обмен сообщениями между документами
        1. 9.4.1 Введение
        2. 9.4.2 Безопасность
          1. 9.4.2.1 Авторы
          2. 9.4.2.2 Пользовательские агенты
        3. 9.4.3 Публикация сообщений
      5. 9.5 Канал обмена сообщениями
        1. 9.5.1 Введение
          1. 9.5.1.1 Примеры
          2. 9.5.1.2 Порты как основа модели объектных возможностей в сети
          3. 9.5.1.3 Порты как основа для абстрагирования сервисных реализаций
        2. 9.5.2 Каналы сообщений
        3. 9.5.3 Порты сообщений
        4. 9.5.4 Широковещательная рассылка на множество портов
        5. 9.5.5 Порты и сборка мусора
      6. 9.6 Трансляция в другие контексты просмотра
    10. 10 Веб-исполнители
      1. 10.1 Введение
        1. 10.1.1 Область действия
        2. 10.1.2 Примеры
          1. 10.1.2.1 Фоновый рабочий, вычисляющий числа
          2. 10.1.2.2 Использование модуля JavaScript в качестве рабочего
          3. 10.1.2.3 Общие сведения о рабочих
          4. 10.1.2.4 Общее состояние с использованием общего рабочего
          5. 10.1.2.5 Делегирование
          6. 10.1.2.6 Предоставление библиотек
        3. 10.1.3 Учебные пособия
          1. 10.1.3.1 Создание выделенного работника
          2. 10.1.3.2 Общение с выделенным работником
          3. 10.1.3.3 Совместно работающие работники
      2. 10.2 Инфраструктура
        1. 10.2.1 Глобальная область действия
          1. 10.2.1.1 Общий интерфейс WorkerGlobalScope
          2. 10.2.1.2 Выделенные сотрудники и интерфейс DedicatedWorkerGlobalScope
          3. 10.2.1.3 Общие рабочие и интерфейс SharedWorkerGlobalScope
        2. 10.20009
      3. loop Время жизни рабочего
      4. 10.2.4 Модель обработки
      5. 10.2.5 Ошибки сценария выполнения
      6. 10.2.6 Создание рабочих
        1. 10.2.6.1 AbstractWorker миксин
        2. 10.2.6.2 Настройки сценария для рабочих
        3. 10.2.6.3 Выделенные сотрудники и интерфейс Worker
        4. 10.2.6.4 Общие исполнители и интерфейс SharedWorker
      7. 10.2.7 Возможности параллельного оборудования
    11. 10.3 Доступны API работникам
      1. 10.3.1 Импорт скриптов и библиотек
      2. 10.3.2 Интерфейс WorkerNavigator
      3. 10.3.3 Интерфейс WorkerLocation
  • 11 Рабочие листы
    1. 11.1 Введение
      1. 11.1.1 Мотивации
      2. 11.1.2 Идемпотентность кода
      3. 11.1.3 Спекулятивная оценка
    2. 11.2 Примеры
      1. 11.2.1 Загрузка скриптов
      2. 11.2.2 Регистрация класса и вызов его методов
    3. 11.3 Инфраструктура
      1. 11.3.1 Глобальная область действия
        1. 11.3.1.1 Агенты и циклы событий
        2. 11.3.1.2 Создание и завершение
        3. 11.3.1.3 Настройки сценария для рабочихлет
      2. 11.3.2 Рабочий пакет Класс
      3. 11.3.3 Срок службы рабочего пакета
  • 12 Веб-хранилище
    1. 12.1 Введение
    2. 12.2 API
      1. 12.2.1 Хранилище Интерфейс
      2. 12.2.2 Сеанс Хранение getter
      3. 12.2.3 localStorage getter
      4. 12.2.4 Интерфейс StorageEvent
    3. 12.3 Конфиденциальность
      1. 12.3.1 Отслеживание пользователей
      2. 12.3.2 Чувствительность данных
    4. 12.4 Безопасность
      1. 12.4.1 Атаки с подменой DNS
      2. 12.4.2 Атаки между каталогами
      3. 12.4.3 Риски внедрения
  • 13 Синтаксис HTML
    1. 13.1 Написание HTML-документов
      1. 13.1.1 DOCTYPE
      2. 13.1.2 Элементы
        1. 13.1.2.1 Начальные теги
        2. 13.1.2.2 Конечные теги
        3. 13.1.2.3 Атрибуты
        4. 13.1.2.4 Дополнительные теги
        5. 13.1.2.5 Ограничения на модели содержимого
        6. 13.1.2.6 Ограничения на содержимое исходного текста и экранируемых необработанных текстовых элементов
      3. 13.1.3 Текст
        1. 13.1.3.1 Новые строки
      4. 13.1.4 Ссылки на символы
      5. 13.1 .5 Разделы CDATA
      6. 13.1.6 Комментарии
    2. 13.2 Анализ HTML-документов
      1. 13.2.1 Обзор модели синтаксического анализа
      2. 13.2.2 Ошибки синтаксического анализа
      3. 13.2.3 Входной поток байтов
        1. 13.2.3.1 Анализ с известной кодировкой символов
        2. 13.2.3.2 Определение кодировки символов
        3. 13.2.3.3 Кодировки символов
        4. 13.2.3.4 Изменение кодировки при синтаксическом анализе
        5. 13.2.3.5 Предварительная обработка входного потока
      4. 13.2. 4 Состояние синтаксического анализа
        1. 13.2.4.1 Режим вставки
        2. 13.2.4.2 Стек открытых элементов
        3. 13.2.4.3 Список активных элементов форматирования
        4. 13.2.4.4 Указатели элементов
        5. 13.2.4.5 Другие флаги состояния синтаксического анализа
      5. 13.2.5 Токенизация
        1. 13.2.5.1 Состояние данных
        2. 13.2.5.2 Состояние RCDATA
        3. 13.2.5.3 Состояние RAWTEXT
        4. 13.2.5.4 Состояние данных сценария
        5. 13.2.5.5 PLAINTEXT состояние
        6. 13.2.5.6 Состояние открытия тега
        7. 13.2.5.7 Состояние открытия конечного тега
        8. 13.2.5.8 Состояние имени тега
        9. 13.2.5.9 Состояние менее знака RCDATA
        10. 13.2.5.10 Состояние открытия конечного тега RCDATA
        11. 13.2 .5.11 Состояние имени конечного тега RCDATA
        12. 13.2.5.12 RAWTEXT состояние меньше знака
        13. 13.2.5.13 RAWTEXT состояние открытия конечного тега
        14. 13.2.5.14 Состояние имени конечного тега RAWTEXT
        15. 13.2.5.15 Данные сценария менее знакового состояния
        16. 13.2.5.16 Конечный тег данных сценария открытое состояние
        17. 13.2.5.17 Состояние конечного тега данных сценария
        18. 13.2.5.18 Состояние начала выхода данных сценария
        19. 13.2.5.19 Состояние выхода данных сценария начальное тире
        20. 13.2.5.20 Состояние экранирования данных сценария
        21. 13.2.5.21 Данные сценария состояние экранированного тире
        22. 13.2.5.22 Данные сценария экранированы с помощью тире, состояние тире
        23. 13.2.5.23 Данные сценария экранированы с состоянием «меньше знака»
        24. 13.2.5.24 Данные сценария экранированы с экранированным состоянием открытого конечного тега
        25. 13.2.5.25 Данные сценария экранированы с состоянием имени конечного тега
        26. 13.2. 5.26 Состояние начала с двойным экранированием данных сценария
        27. 13.2.5.27 Состояние с двойным экранированием данных сценария
        28. 13.2.5.28 Состояние данных сценария с двойным экранированием тире
        29. 13.2.5.29 Данные скрипта с двойным экранированием тире Состояние
        30. 13.2.5.30 Данные скрипта с двойным экранированием меньше -чем подписать состояние
        31. 13.2.5.31 Состояние конца двойного выхода данных сценария
        32. 13.2.5.32 Перед состоянием имени атрибута
        33. 13.2.5.33 Состояние имени атрибута
        34. 13.2.5.34 После состояния имени атрибута
        35. 13.2.5.35 Перед состоянием значения атрибута
        36. 13.2.5.36 Атрибут значение (в двойных кавычках) состояние
        37. 13.2.5.37 Значение атрибута (в одинарных кавычках) состояние
        38. 13.2.5.38 Состояние значения атрибута (без кавычек)
        39. 13.2.5.39 Состояние после значения атрибута (в кавычках)
        40. 13.2.5.40 Само- закрытие состояния начального тега
        41. 13.2.5.41 Состояние фиктивного комментария
        42. 13.2.5.42 Открытое состояние объявления разметки
        43. 13.2.5.43 Состояние начала комментария
        44. 13.2.5.44 Состояние начала комментария
        45. 13.2.5.45 Состояние комментария
        46. 13.2.5.46 Состояние знака меньше чем
        47. 13.2.5.47 Комментарий знак «меньше чем» состояние взрыва
        48. 13.2.5.48 Комментарий знак «меньше чем» состояние взрыва тире
        49. 13.2.5.49 Комментарий знак «меньше» 13.2.5.51 Комментарий конечного состояния
        50. 13.2.5.52 Комментарий конечного состояния взрыва
        51. 13.2.5.53 Состояние DOCTYPE
        52. 13.2.5.54 Перед состоянием имени DOCTYPE
        53. 13.2.5.55 Состояние имени DOCTYPE
        54. 13.2.5.56 После состояния имени DOCTYPE
        55. 13.2.5.57 После состояния публичного ключевого слова DOCTYPE
        56. 13.2.5.58 Перед состоянием публичного идентификатора DOCTYPE
        57. 13.2.5.59 Состояние публичного идентификатора DOCTYPE (двойные кавычки)
        58. 13.2.5.60 Состояние публичного идентификатора DOCTYPE (одиночные кавычки)
        59. 13.2.5.61 После состояния общедоступного идентификатора DOCTYPE
        60. 13.2.5.62 Между состоянием общедоступного идентификатора DOCTYPE и состояния системного идентификатора
        61. 13.2.5.63 После состояния системного ключевого слова DOCTYPE
        62. 13.2.5.64 Перед состоянием системного идентификатора DOCTYPE
        63. 13.2.5.65 Системный идентификатор DOCTYPE (двойной системный идентификатор -в кавычках) состояние
        64. 13.2.5.66 Состояние системного идентификатора DOCTYPE (в одинарных кавычках)
        65. 13.2.5.67 После состояния системного идентификатора DOCTYPE
        66. 13.2.5.68 Поддельное состояние DOCTYPE
        67. 13.2.5.69 Состояние раздела CDATA
        68. 13.2.5.70 Состояние скобки раздела CDATA
        69. 13.2.5.71 Конечное состояние раздела CDATA
        70. 13.2.5.72 Состояние ссылки на символ
        71. 13.2.5.73 Состояние ссылки на именованный символ
        72. 13.2.5.74 Состояние неоднозначного амперсанда
        73. 13.2.5.75 Состояние ссылки на числовой символ
        74. 13.2.5.76 Состояние начала ссылки на шестнадцатеричный символ
        75. 13.2.5.77 Состояние начала ссылки на десятичный символ
        76. 13.2.5.78 Состояние ссылки на шестнадцатеричный символ
        77. 13.2.5.79 Состояние ссылки на десятичный символ
        78. 13.2.5.80 Конечное состояние ссылки на числовой символ
      6. 13.2.6 Построение дерева
        1. 13.2.6.1 Создание и вставка узлов
        2. 13.2.6.2 Анализ элементов, содержащих только текст
        3. 13.2. 6.3 Закрывающие элементы с подразумеваемыми конечными тегами
        4. 13.2.6.4 Правила синтаксического анализа токенов в содержимом HTML
          1. 13.2.6.4.1 «Начальный» режим вставки
          2. 13.2.6.4.2 Режим вставки «до HTML»
          3. 13.2.6.4.3 Режим вставки «перед заголовком»
          4. 13.2.6.4.4 Режим вставки «в заголовок»
          5. 13.2.6.4.5 Режим вставки «в заголовке»
          6. 13.2.6.4.6 «После заголовка» Режим вставки
          7. 13.2.6.4.7 Режим вставки «в теле»
          8. 13.2.6.4.8 Режим вставки «текст»
          9. 13.2.6.4.9 Режим вставки «в таблице»
          10. 13.2.6.4. 10 Режим вставки «в тексте таблицы»
          11. 13.2.6.4.11 Режим вставки «в подписи»
          12. 13.2.6.4.12 Режим вставки «в группе столбцов»
          13. 13.2.6.4.13 Режим вставки «в теле таблицы»
          14. 13.2.6.4.14 Режим вставки «в строке»
          15. 13.2.6.4.15 «В» ячейка "режим вставки
          16. 13.2.6.4.16 Режим вставки" в выбранном "
          17. 13.2.6.4.17 Режим вставки" в выделенном в таблице "
          18. 13.2.6.4.18 Режим вставки" в шаблоне "
          19. 13.2.6.4.19 Режим вставки «после тела»
          20. 13.2.6.4.20 Режим вставки «во фреймах»
          21. 13.2.6.4.21 Режим вставки «после набора кадров»
          22. 13.2.6.4.22 Режим вставки «после после тела»
          23. 13.2.6.4.23 Режим вставки «после набора кадров»
        5. 13.2.6.5 Правила для синтаксический анализ токенов в чужом содержимом
      7. 13.2.7 Конец
      8. 13.2.8 Принуждение HTML DOM к информационному набору
      9. 13.2.9 Введение в обработку ошибок и странные случаи в парсере
        1. 13.2.9.1 Вложенные теги:
        2. 13.2.9.2 Неверно вложенные теги:

        3. 13.2.9.3 Неожиданная разметка в таблицах
        4. 13.2.9.4 Сценарии, изменяющие страницу при ее анализе
        5. 13.2.9.5 выполнение скриптов, перемещающихся по нескольким документам
        6. 13.2.9.6 Незакрытые элементы форматирования
    3. 13.3 Сериализация фрагментов HTML
    4. 13.4 Анализ фрагментов HTML
    5. 13,5 Ссылки на именованные символы
  • 14 Синтаксис XML
    1. 14 Синтаксис XML
      1. .1 Написание документов в синтаксисе XML
      2. 14.2 Анализ XML-документов
      3. 14.3 Сериализация XML-фрагментов
      4. 14.4 Анализ XML-фрагментов
    2. 15 Рендеринг
      1. 15.1 Введение
      2. 15.2 Таблица стилей пользовательского агента CSS и презентационные подсказки
      3. Незамещаемые элементы
        1. 15.3.1 Скрытые элементы
        2. 15.3.2 Страница
        3. 15.3.3 Потоковое содержимое
        4. 15.3.4 Фразовое содержимое
        5. 15.3.5 Двунаправленный текст
        6. 15.3.6 Разделы и заголовки
        7. 15.3.7 Списки
        8. 15.3.8 Таблицы
        9. 15.3.9 Причуды сворачивания полей
        10. 15.3.10 Элементы управления формой
        11. 15.3.11 Элемент hr
        12. 15.3.12 Набор полей и легенда элементов
      4. 15.4 Замененные элементы
        1. 15.4.1 Встроенное содержимое
        2. 15.4.2 Изображения
        3. 15.4.3 Атрибуты для встроенного содержимого и изображений
        4. 15.4.4 Карты изображений
      5. 15.5 Виджеты
        1. 15.5.1 Введение
        2. 15.5.2 Раскладка кнопок
        3. 15.5.3 Кнопка Элемент
        4. 15.5.4 Подробная информация Сводка и Элементы
        5. 15.5.5 вводит элемент как виджет ввода текста
        6. 15.5.6 Элемент input как виджеты, зависящие от предметной области
        7. 15.5.7 Элемент input как элемент управления диапазоном
        8. 15.5.8 Элемент input как цвет колодец
        9. 15.5.9 Элемент input в качестве флажка и виджеты с переключателем
        10. 15.5.10 Элемент input как элемент управления загрузкой файла
        11. 15.5.11 Вход Элемент как кнопка
        12. 15.5.12 Область element
        13. 15.5.13 meter element
        14. 15.5.14 The progress element
        15. 15.5.15 select element
        16. 15.5.16 The textarea element
      6. 15.6 Фреймы и наборы фреймов
      7. 15.7 Интерактивные медиа
        1. 15.7.1 Ссылки, формы и навигация
        2. 15.7.2 Атрибут заголовка
        3. 15.7.3 Редактирование хостов
        4. 15.7.4 Текст, отображаемый в собственных пользовательских интерфейсах
      8. 15.8 Печатные носители
      9. 15.9 Не стилизованные XML-документы
    3. 16 Устаревшие функции
      1. 16.1 Устаревшие, но соответствующие функции
        1. 16.1.1 Предупреждения об устаревших, но соответствующих функциях
      2. 16.2 Несоответствующие функции
      3. 16.3 Требования к реализации
        1. 16.3.1 Область выделения элемент
        2. 16.3.2 Фреймы
        3. 16.3.3 Другие элементы, атрибуты и API
    4. 17 Соображения IANA
      1. 17,1 text / html
      2. 17,2 multipart / x-mixed-replace
      3. 17,3 application / xhtml + xml
      4. 17,4 text / ping
      5. 17,5 application / microdata + json
      6. 6 текст / поток событий
      7. 17,7 ` Cross-Origin-Embedder-Policy `
      8. 17,8 ` Cross-Origin-Embedder-Policy-Report-Only `
      9. 17,9 ` Cross-Origin-Opener -Policy `
      10. 17.10` Cross-Origin-Opener-Policy-Report-Only `
      11. 17.11` Origin-Agent-Cluster `
      12. 17.12` Ping-From `
      13. 17.13` Ping -К `
      14. 17,14` Обновить `
      15. 17.15 ` Last-Event-ID `
      16. 17.16 ` X-Frame-Options `
      17. 17.17 web + префикс схемы
    5. Индекс
      1. Элементы
      2. Категории содержимого элементов
      3. Атрибуты Интерфейс
      4. s
      5. Все интерфейсы
      6. События
      7. Типы MIME
    6. Ссылки
    7. Благодарности
    8. Права интеллектуальной собственности

    HTML 5.2

    Аннотация

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

    В этом разделе описывается статус этого документа на момент его публикации. Другой документы могут заменять этот документ. Список текущих публикаций W3C и последняя редакция этого технический отчет можно найти в техническом отчете W3C . индекс отчетов на https: // www.w3.org/TR/.

    Данная спецификация является Замененной Рекомендацией. Существует более новая спецификация, которая рекомендуется для нового принятия вместо этой спецификации.

    Этот документ был опубликован Рабочей группой веб-платформы, которая устареет Рекомендация HTML 5.1.

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

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

    Для целей Патентной политики W3C эта Замененная Рекомендация имеет тот же статус, что и активная Рекомендация; он сохраняет обязательства по лицензированию и остается доступным в качестве эталона для старых - и, возможно, все еще развернутых - реализаций, но не рекомендуется для будущей реализации. Новые реализации должны соответствовать последней версии HTML 5.2 спецификация.

    Этот документ был подготовлен группой, действующей в соответствии с Патентной политикой W3C. W3C ведет публичный список любых раскрытий патентов, сделанных в связь с результатами группы; эта страница также включает инструкция по раскрытию патента. Лицо, имеющее фактическое знание патента, который, по мнению человека, содержит существенные В претензии (-ях) должна быть раскрыта информация в соответствии с разделом 6 Патентной политики W3C.

    Этот документ регулируется Документом процесса W3C от 15 сентября 2020 года.

    HTML5

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

    В этом разделе описывается статус этого документа на время его публикации.Другие документы могут заменять это документ. Список текущих публикаций W3C и самых последних официально опубликованную версию этого технического отчета можно найти в индекс технических отчетов W3C на http://www.w3.org/TR/.

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

    Если вы не можете сделать это, вы также можете отправить отзыв по адресу public-html-comments @ w3.орг (подписываться, архивы), и будут приняты меры для переноса комментариев в наш общедоступная база данных ошибок. Кроме того, вы можете отправить отзыв по адресу [email protected] (подпишитесь, архивы). Редактор гарантирует, что все существенные отзывы, отправленные на этот list получит ответ. Однако такая обратная связь не рассматривается. формальная обратная связь для процесса W3C. Любые отзывы приветствуются.

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

    Публикация этого документа W3C как W3C Last Call Working Черновик не означает, что все участники W3C HTML рабочая группа одобряет содержание спецификации.Действительно, для любой раздел спецификации, обычно можно найти много членов рабочей группы или W3C в целом, которые категорически возражают против текущий текст, наличие раздела или идея что рабочая группа должна даже потратить время на обсуждение концепции этого раздела.

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

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

    W3C ожидает, что в эту спецификацию будут внесены изменения в качестве результат решения проблем Last Call.Согласно обычному процессу W3C, любые существенные изменения в спецификации приведут к последующему последнему Вызов.

    Последняя стабильная версия редакционного черновика этого спецификация всегда доступна на сервере W3C CVS и в WHATWG Subversion репозиторий. Последний рабочая копия редактора (которая может содержать незаконченный текст в процесса подготовки) содержит последний проект текста этого спецификация (среди прочего). Для получения дополнительной информации см. WHATWG. ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ.

    Работа с HTML в W3C Group - это рабочая группа W3C, отвечающая за это продвижение спецификации по Рекомендации W3C отслеживать. Эта спецификация представляет собой рабочий проект последнего звонка от 25 мая 2011 года. Период последнего звонка заканчивается 3 августа 2011 года.

    Работа над этой спецификацией также выполняется WHATWG. Рабочая группа W3C HTML активно стремится к сближению с WHATWG, как того требует рабочая группа W3C HTML. групповой чартер.

    3.2.5 Модели содержимого - HTML5

    3.2.5 Модели содержимого - HTML5

    3.2.5
    Модели содержимого

    Каждый элемент, определенный в этой спецификации, имеет модель содержимого: a описание ожидаемого содержимого элемента. HTML-элемент должен иметь содержимое, соответствующее требования, описанные в модели содержимого элемента.

    Как указано в соответствии и терминологии разделов, чтобы определить, соответствует ли элемент его модель содержимого или нет, узлы CDATASection в DOM обрабатываются как эквивалентно узлам Text , а узлы ссылок на сущности обрабатываются так, как если бы они были расширены на месте.

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

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

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

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

    Например, спецификация Atom определяет элемент содержимого . Когда его атрибут типа имеет значение xhtml , спецификация Atom требует, чтобы он содержат один элемент HTML div .Таким образом, div элемент разрешен в этом контексте, даже если в данной спецификации это явно не указано в нормативных документах. [ATOM]

    Кроме того, элементы HTML могут быть бесхозными узлами. (т.е. без родительского узла).

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

     var data = {
      название: "Банан",
      ячейка: документ.createElement ('td'),
    }; 
    3.2.5.1 Типы содержимого

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

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

    Эти категории связаны следующим образом:

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

    Некоторые элементы предъявляют особые требования и не вписываются ни в какие конкретная категория.

    3.2.5.1.1 Содержимое метаданных

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

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

    Таким образом, при сериализации XML можно использовать RDF, например:

     
     
       Домашняя страница Hedral 
      
       
         Кот Хедрал 
        
         Сэр 
       
      
     
     
       

    Моя домашняя страница

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

    Однако это невозможно при сериализации HTML.

    3.2.5.1.2 Содержимое потока

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

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

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

    3.2.5.1.3 Содержание секций

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

    Каждый элемент содержания секционирования потенциально имеет заголовок и план. См. Раздел о заголовки и разделы для получения дополнительной информации.

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

    3.2.5.1.4 Содержимое заголовка

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

    3.2.5.1.5 Фразовое содержание

    Фразовое содержание - это также текст документа как элементы, которые размечают этот текст во внутреннем абзаце уровень. Циклы фразового содержания формируют абзацы.

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

    Большинство элементов, относящихся к категории фраз контент может содержать только элементы, которые сами относятся к категории содержание фраз, а не потокового содержания.

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

    3.2.5.1.6 Встроенное содержимое

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

    Элементы из пространств имен, отличных от HTML пространство имен и передают контент, но не метаданные, встроенный контент для моделей контента определено в этой спецификации. (Например, MathML или SVG.)

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

    3.2.5.1.7 Интерактивный контент

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

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

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

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

    При щелчке по указывающему устройству пользовательский агент должен запустить эти шаги:

    1. Пусть e будет ближайшим активируемым элемент элемента, обозначенного пользователем (определенный ниже), если есть.

    2. Если есть элемент е , запустите предварительно нажмите на нем шаги активации.

    3. Отправьте необходимое нажмите мероприятие.

      Если есть элемент е , то по умолчанию действие события click должно быть для запуска шагов активации после щелчка на элементе e .

      Если есть элемент e , но событие отменено, пользовательский агент должен запустить отмененную активацию ступеньки по элементу и .

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

    Учитывая элемент , цель , ближайший активируемый элемент - это элемент, возвращаемый следующим алгоритм:

    1. Если цель имеет определенную активацию поведение, затем вернуть цель и прервать эти шаги.

    2. Если target имеет родительский элемент, установите нацелить на этот родительский элемент и вернуться к первый шаг.

    3. В противном случае нет ближайшего активируемого элемент.

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

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

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

    3.2.5.2 Модели прозрачного содержимого

    Некоторые элементы описаны как transparent ; у них есть «прозрачные» в описании модели их содержания. Содержание модель прозрачного элемента получена из модель содержимого его родительского элемента: элементы, необходимые в часть модели контента, которая является «прозрачной», то же самое элементы в соответствии с требованиями в части модели содержимого родительского прозрачного элемента, в котором прозрачный элемент находит сам.

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

    Рассмотрим следующий фрагмент разметки:

     

    Яблоки

    Чтобы проверить, разрешено ли использование "яблок" внутри a элемент, исследуются модели содержимого. Модель a модель содержимого элемента прозрачна, как и карта элементов, как ins элементов, как часть объект элемента, в котором ins элемент найден.Объект Элемент находится в p Элемент , модель содержимого которого формулирует содержание. Таким образом, "Яблоки" разрешены, поскольку текст выражается содержание.

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

    3.2.5.3 Пункты

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

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

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

     <раздел>
       

    Пример абзацев

    Это первый абзац в этом примере.

    Это второй.

    Абзацы в содержимом потока определены относительно как выглядит документ без a , ins , del и отображают элемента усложняет дело, поскольку эти элементы с их гибридом модели содержимого, могут переходить границы абзацев, как показано в первые два примера ниже.

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

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

     <раздел>
        

    Пример абзацев

    Это первый абзац в
    этом примере .

    Это второй.

    Пусть view будет представлением DOM, которое заменяет все a , ins , del и отображает элементов в документе с их содержимым.Потом, в представлении , для каждого запуска родственной фразы узлы контента, не прерываемые другими типами контента, в элемент, который принимает содержимое, отличное от фразировки содержание, а также фразовое содержание, пусть первый будет первым узлом прогона, а последний будет последним узлом прогона. За каждый такой пробег который состоит как минимум из одного узла, который не является встроенным содержимое и межэлементные пробелы, абзац существует в исходной модели DOM от непосредственно перед первых до непосредственно после последних .(Таким образом, абзацы могут охватывать a , ins , del и карта элементов.)

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

    Абзац также явно образован р элемента.

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

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

     <сторона>
     Добро пожаловать!
     
      Это дом ...
       

    Соколы!

    Многоцелевой реактивный истребитель Lockheed Martin!
    На этой странице обсуждаются самые сокровенные секреты F-16 Fighting Falcon.

    Вот еще один способ отметить это, на этот раз показывая абзацы явно и разделение элемента с одной ссылкой на три:

     <сторона>
     

    Добро пожаловать! Это дом ...

    Соколы!

    Многоцелевой реактивный самолет Lockheed Martin истребитель! На этой странице обсуждается F-16 Fighting Самые сокровенные секреты Сокола.

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

     <раздел>
      

    Мои кошки

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

    Здесь пять абзацев:

    1. Абзац, который гласит: «Вы можете поиграть с моим котом. симулятор. объект Я этим очень горжусь. ", Где объект - объект элемент .
    2. Абзац с надписью «Чтобы увидеть симулятор кошки, воспользуйтесь одним из следующие ссылки: ".
    3. Абзац с надписью «Скачать файл симулятора».
    4. Абзац с надписью «Воспользуйтесь онлайн-симулятором».
    5. Абзац, который гласит: «Или обновите браузер Mellblom.».

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

    Чтобы избежать этой путаницы, явные элементы p могут быть использовал.

    3.2.6 Требования к форматированию двунаправленного алгоритма символов

    Текстовое содержимое в элементах HTML с дочерние текстовые узлы и текст в атрибуты элементов HTML, которые позволяют текст произвольной формы, может содержать символы в диапазоне от U + 202A до U + 202E ( символы форматирования двунаправленного алгоритма).Однако использование эти символы ограничены, поэтому любое встраивание или переопределение сгенерированные этими символами не начинаются и не заканчиваются разными родительские элементы, и поэтому все такие вложения и переопределения явно завершается НАПРАВЛЕНИЕМ ФОРМАТИРОВАНИЯ POP U + 202C персонаж. Это помогает снизить частоту повторного использования текста в способ, который оказывает непредвиденное влияние на двунаправленную алгоритм.

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

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

    Значение атрибута без пространства имен элемента HTML является символом форматирования двунаправленного алгоритма. диапазон.

    Любые строки, которые, как описано выше, являются двунаправленный алгоритм форматирования диапазонов символов должен сопоставьте строку продукции в следующем ABNF, набором символов для которого является Unicode.[ABNF]

     строка = * (открытый текст (внедрение / переопределение)) открытый текст
    embedding = (lre / rle) строка pdf
    override = (lro / rlo) строка pdf
    lre =% x202A; U + 202A ВСТРОЕНИЕ СЛЕВА НАПРАВО
    rle =% x202B; U + 202B ПРАВОЕ ВСТРЕЛЕНИЕ
    lro =% x202D; U + 202D ПЕРЕХОД СЛЕВА НАПРАВО
    rlo =% x202E; U + 202E ПЕРЕМЕЩЕНИЕ СПРАВА-ВЛЕВО
    pdf =% x202C; НАПРАВЛЕННОЕ ФОРМАТИРОВАНИЕ POP U + 202C
    открытый текст = * (% x0000-2029 /% x202F-10FFFF)
                    ; любая строка без символов форматирования двунаправленного алгоритма 

    Для удобства, где это возможно, авторы, скорее всего, предпочитаю использовать атрибут dir , Элемент bdo и элемент bdi , скорее чем поддержание символов форматирования двунаправленного алгоритма вручную.

    3.2.7
    WAI-ARIA

    Авторы могут использовать роль ARIA и атрибутов aria- * в HTML элементы, в соответствии с требованиями, изложенными в спецификации ARIA, за исключением случаев, когда они противоречат сильная нативная семантика описано ниже. Эти исключения предназначены для того, чтобы авторы из-за того, что продукты со вспомогательными технологиями сообщают о бессмысленных состояниях которые не отражают фактическое состояние документа. [ARIA]

    Пользовательские агенты необходимы для реализации семантики ARIA на всех HTML-элементы, как определено в ARIA технические характеристики.Определена неявная семантика ARIA ниже должны быть распознаны реализациями. [ARIAIMPL]

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

    Язык Сильная собственная семантика и подразумеваемая семантика ARIA по умолчанию
    область элемент, создающий гиперссылку ссылка роль
    основание элемент Без роли
    элемент datalist listbox роль со свойством aria-multiselectable , установленным на "false"
    детали элемент aria-extended для состояния установлено значение "true", если присутствует атрибут open элемента, и установлено значение "false" в противном случае.
    головка элемент Без роли
    элемент hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента
    час элемент разделитель роль
    элемент html Без роли
    элемент img , значение атрибута alt которого пусто презентация роль
    входной элемент с атрибутом типа в состоянии флажка Состояние с проверкой aria установлено в "смешанное", если IDL-атрибут неопределенного элемента имеет значение "истина", или "истина", если проверяемость элемента - истина, или "ложь" в противном случае
    входной элемент с атрибутом типа в состоянии Цвет Без роли
    входной элемент с атрибутом типа в состоянии Дата Нет роли, с состоянием aria-readonly установлено значение "true", если элемент имеет атрибут readonly
    входной элемент с атрибутом типа в состоянии даты и времени Нет роли, с состоянием aria-readonly установлено значение "true", если элемент имеет атрибут readonly
    входной элемент с атрибутом типа в локальном состоянии даты и времени Нет роли, с состоянием aria-readonly установлено значение "true", если элемент имеет атрибут readonly
    входной элемент с атрибутом типа в состоянии электронной почты без исходного элемента предложений текстовое поле роль с состоянием aria-readonly , установленным в значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в состоянии загрузки файла Без роли
    входной элемент с атрибутом типа в скрытом состоянии Без роли
    входной элемент с атрибутом типа в состоянии Месяц Без роли, с состоянием aria-readonly установлено значение "true", если элемент имеет атрибут readonly
    входной элемент с атрибутом типа в состоянии Number spinbutton роль , с состоянием aria-readonly , установленным в «true», если элемент имеет атрибут только для чтения , свойство aria-valuemax установлено на максимум элемента, свойство aria-valuemin установлен на минимум элемента, и, если результатом применения правил синтаксического анализа числовых значений с плавающей запятой к значению элемента является число, свойство aria-valuenow установлено на это число
    входной элемент с атрибутом типа в состоянии пароля текстовое поле роль, при этом для состояния aria-readonly установлено значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в состоянии Radio Button aria-checked для состояния установлено значение «истина», если проверяемость элемента - истина, или «ложь» в противном случае.
    входной элемент с атрибутом типа в состоянии Range slider роль, со свойством aria-valuemax , установленным на максимум элемента, свойством aria-valuemin , установленным на минимум элемента, и свойством aria-valuenow , установленным на результат применения правил для синтаксического анализа числовых значений с плавающей запятой в значение элемента, если в результате получается число, или значение по умолчанию в противном случае
    входной элемент с атрибутом типа в состоянии кнопки сброса кнопка роль
    входной элемент с атрибутом типа в состоянии поиска без элемента источника предложений текстовое поле роль, при этом для состояния aria-readonly установлено значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в состоянии кнопки отправки кнопка роль
    входной элемент с атрибутом типа в состоянии Телефон без элемента источника предложений текстовое поле роль с состоянием aria-readonly , установленным в значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в текстовом состоянии без исходного элемента предложений текстовое поле роль с состоянием aria-readonly , установленным в значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в состояниях "Текст", "Поиск", "Телефон", "URL-адрес" или "Электронная почта" с элементом источника предложений. combobox роль , со свойством aria-own , установленным на то же значение, что и атрибут списка , а для состояния aria-readonly установлено значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в состоянии времени Без роли, с состоянием aria-readonly установлено значение "true", если элемент имеет атрибут readonly
    входной элемент с атрибутом типа в состоянии URL без элемента источника предложений текстовое поле роль, при этом для состояния aria-readonly установлено значение "true", если элемент имеет атрибут только для чтения
    входной элемент с атрибутом типа в состоянии Неделя Нет роли, с состоянием aria-readonly установлено значение "true", если элемент имеет атрибут readonly
    входной элемент, который требуется Для aria-required установлено состояние "истина"
    keygen элемент Без роли
    этикетка элемент Без роли
    ссылка элемент, который создает гиперссылку ссылка роль
    элемент меню с атрибутом типа в состоянии контекстного меню Без роли
    элемент меню с атрибутом типа в состоянии списка меню роль
    элемент меню с атрибутом типа в состоянии панели инструментов панель инструментов роль
    мета элемент Без роли
    метр элемент Без роли
    элемент nav навигация роль
    элемент noscript Без роли
    элемент optgroup Без роли
    элемент option , который находится в списке параметров или представляет предложение в элементе списка данных option role, при этом для состояния aria-selected установлено значение «true», если выбранность элемента истинна, или «false» в противном случае.
    param элемент Без роли
    прогресс элемент progressbar роль, при этом, если индикатор выполнения определен, для свойства aria-valuemax установлено максимальное значение индикатора выполнения, для свойства aria-valuemin установлено значение 0, а для свойства aria-valuenow для свойства установлено текущее значение индикатора выполнения
    скрипт элемент Без роли
    выберите элемент с множественным атрибутом listbox роль со свойством aria-multiselectable , установленным в значение "true"
    выберите элемент без множественного атрибута listbox роль со свойством aria-multiselectable , установленным на "false"
    выберите элемент с обязательным атрибутом Для aria-required установлено состояние "истина"
    источник элемент Без роли
    стиль элемент Без роли
    сводка элемент Без роли
    элемент textarea текстовое поле роль, со свойством aria-multiline , установленным в значение "true", а для состояния aria-readonly установлено значение "true", если элемент имеет атрибут только для чтения
    элемент textarea с обязательным атрибутом Для aria-required установлено состояние "истина"
    заголовок элемент Без роли
    Элемент, определяющий команду, фасетом Типа которой является "флажок", и который является потомком элемента меню , чей тип атрибут в состоянии списка menuitemcheckbox , с состоянием aria-checked , установленным в значение «true», если фасет Checked State команды имеет значение «истина», и «false» в противном случае.
    Элемент, определяющий команду, фасет Тип которого является «команда», и который является потомком элемента меню , чей атрибут типа в состоянии списка пункт меню роль
    Элемент, определяющий команду, фасет Тип которого является "радио", и который является потомком элемента меню , чей тип атрибут в состоянии списка menuitemradio роль, с aria-checked для состояния установлено значение «true», если фасет Checked State команды имеет значение true, и «false» в противном случае.
    Элемент отключен Для состояния aria-disabled установлено значение "true"
    Элемент со скрытым атрибутом Для aria-hidden установлено состояние "true".
    Элемент, который является кандидатом на проверку ограничения, но не удовлетворяет его ограничениям Состояние aria-invalid установлено в состояние «истина»

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

    Язык По умолчанию подразумевается семантика ARIA Ограничения
    элемент , который создает гиперссылку ссылка роль Роль должна быть либо ссылка , кнопка , флажок , элемент меню , элемент менюЧекбокс , элемент меню радио , вкладка или элемент дерева
    адрес элемент Без роли Если указано, роль должна быть contentinfo
    артикул элемент артикул роль Роль должна быть либо article , document , application , либо main
    в сторону элемент примечание роль Роль должна быть либо примечание , либо дополнительным , либо поиском
    аудио элемент Без роли Если указано, роль должна быть приложение
    кнопка элемент кнопка роль Роль должна быть либо button , link , menuitem , menuitemcheckbox , menuitemradio , radio
    детали элемент группа роль Роль должна быть ролью, которая поддерживает расширенный aria
    встроенный элемент Без роли Если указано, роль должна быть либо application , document , либо img
    нижний колонтитул элемент Без роли Если указано, роль должна быть contentinfo
    h2 элемент, не имеющий предка hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента Роль должна быть либо link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem
    h3 элемент, не имеющий предка hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента Роль должна быть либо link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem
    h4 элемент, не имеющий предка hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента Роль должна быть либо link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem
    h5 элемент, не имеющий предка hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента Роль должна быть либо link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem
    h5 элемент, не имеющий предка hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента Роль должна быть либо link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem
    элемент h6 , не имеющий предка hgroup роль заголовка , со свойством aria-level , установленным на глубину контура элемента Роль должна быть либо link , menuitem , menuitemcheckbox , menuitemradio , tab , or treeitem
    заголовок элемент Без роли Если указано, роль должна быть баннер
    элемент iframe Без роли Если указано, роль должна быть либо application , document , либо img
    элемент img , значение атрибута alt которого отсутствует img роль Без ограничений
    элемент img , значение атрибута alt которого присутствует и не пусто img роль Без ограничений
    входной элемент с атрибутом типа в состоянии кнопки кнопка роль Роль должна быть либо button , link , menuitem , menuitemcheckbox , menuitemradio , radio
    входной элемент с атрибутом типа в состоянии флажка флажок роль Роль должна быть либо флажком , либо menuitemcheckbox
    входной элемент с атрибутом типа в состоянии кнопки изображения кнопка роль Роль должна быть либо button , link , menuitem , menuitemcheckbox , menuitemradio , radio
    входной элемент с атрибутом типа в состоянии Radio Button радио роль Роль должна быть либо radio , либо menuitemradio
    элемент li , родительский элемент которого является элементом ol или ul listitem роль Роль должна быть либо listitem , menuitemcheckbox , menuitemradio , option , tab , or treeitem
    объект элемент Без роли Если указано, роль должна быть либо application , document , либо img
    элемент ol список роль Роль должна быть каталог , список , список , меню , строка меню , список вкладок , панель инструментов , дерево
    вывод элемент статус роль Без ограничений
    секция элемент регион роль Роль должна быть либо оповещение , alerttdialog , г. заявка , contentinfo , диалог , документ , журнал , основной , шатер , регион , г. поиск , или статус
    ul элемент список роль Роль должна быть каталог , список , список , меню , строка меню , список вкладок , панель инструментов , дерево
    видео элемент Без роли Если указано, роль должна быть приложение
    Кузовной элемент документ роль Роль должна быть документ или приложение

    Запись « без роли », когда используется как сильный уроженец семантический, означает, что нельзя использовать никакую роль, кроме , презентация .При использовании по умолчанию подразумевается семантика ARIA, это означает, что пользовательский агент не имеет значения по умолчанию сопоставление с ролями ARIA. (Однако, вероятно, у него будет свой сопоставления с уровнем доступности.)

    Спецификация WAI-ARIA не требует и не запрещает пользователю агенты от улучшения нативного представления и поведения взаимодействия на основе разметки WAI-ARIA. Даже обычные пользовательские агенты могут выбрать отображение метаданных или навигационных функций напрямую или через расширения, устанавливаемые пользователем; например, выставление требуемой формы поля или ориентир навигации.Пользовательским агентам рекомендуется максимизировать их полезность для пользователей, в том числе пользователей без инвалидность.

    Специалистам по проверке соответствия

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

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

     <рисунок  role = "img" aria-labelledby = "fish-caption" >
     
     о.'' /
         '/ (
       O .- '``' -._. ')
          _ / (о) '. . ' /
          ))))> <<
          `\ | _ \ _. ' '. \
            '-._ _ .-' '.)
        jgs `\ __ \
     
    id = "fish-caption" > Джоан Г. Старк, " рыба ". Октябрь 1997. ASCII по электронам. 28 × 8.

    Что нового в последней версии HTML?

    Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее

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

    Это также может раздражать - тем более, что большинство этих «устаревших функций» по-прежнему работают в большинстве браузеров. Зачем изучать новый способ делать что-либо, если старый способ работает нормально?

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

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

    Что такое HTML?

    (Перейдите к разделу Что такое HTML5, если вы уже знакомы с HTML в целом.)

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

    Например, рассмотрите этот документ:

    Почему крысы делают отличных домашних животных?

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

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

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

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

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

      

    Все о крысах

    Почему из крыс получаются отличные домашние животные?

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

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

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

    HTML История и развитие

    HTML существует уже давно. Его корни уходят по крайней мере в 1980, с проекта Тима Бернерса-Ли INQUIRE. На самом деле концепция гипертекста уходит корнями еще дальше. Концепция впервые появилась в начале 1940-х годов, а название и демонстрация - в 1960-х.

    В 1989 году Ли предложил новую гипертекстовую систему, основанную на идеях INQUIRE (и других систем, таких как Apple HyperCard). Это стало первой версией того, что мы теперь называем HTML.

    С тех пор язык постоянно развивается. Спецификация находится в ведении Консорциума Всемирной паутины (Бернерс-Ли по-прежнему является директором по состоянию на 2018 год) и Рабочей группы по технологиям веб-гипертекстовых приложений. (Так что, если вам не нравится HTML5, виноваты именно они.)

    Язык эволюционировал все это время, потому что изменилась веб-разработка. Сегодня мы делаем с веб-страницами и HTML вещи, о которых даже не мечтали первые разработчики и разработчики этого языка.Веб-страница больше не просто документ; скорее всего, это будет полномасштабное веб-приложение. И даже когда это «просто документ», мы хотим, чтобы поисковые системы и другие инструменты понимали содержание веб-сайта. Мы больше не просто создаем страницы для читателей, а для систем с искусственным интеллектом, которые собирают информацию и манипулируют ею.

    Почему нужно было изменить HTML? Потому что Интернет изменился.

    Что такое HTML5?

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

    Большинство индивидуальных изменений являются результатом более крупных целей в дизайне языка. К этим целям в первую очередь относятся:

    • Поощрение семантической (значимой) разметки
    • Отделение дизайна от контента
    • Повышение доступности и отзывчивости дизайна
    • Уменьшение перекрытия между HTML, CSS и JavaScript
    • Поддержка мультимедийных возможностей при устранении необходимости плагины, такие как Flash или Java

    Освоение HTML5 - это не только изучение того, какие функции CSS заменяют старые функции HTML.Если вы хотите получить интуитивное представление о HTML5, лучше всего понять, как эти цели повлияли на развитие языка.

    Поощрение семантической разметки

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

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

    HTML всегда имел немного доступной семантической разметки: теги заголовков, атрибут rel ссылки и метаданные документа. Но этого было недостаточно.

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

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

    Также были введены новые (встроенные) элементы текстового уровня, такие как

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

    Отделение дизайна от содержимого

    Наряду с настоятельно поощряющей семантической (значимой) разметкой, спецификация HTML5 категорически не рекомендует бессмысленной разметки - разметки, предназначенной только для того, чтобы указать браузеру, как отображать объекты.Это включает в себя такие вещи, как:

    • объявление шрифтов и цветов текста
    • установка выравнивания или выравнивания текста
    • размещение границ в таблицах
    • определение того, как текст обтекает изображения

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

    В первую очередь есть две причины предпочесть это разделение:

    • Сайт проще поддерживать и перепроектировать, если объявления стилей ограничены CSS
    • Пользователи просматривают веб-контент в самых разных контекстах - настольные компьютеры, ноутбуки, планшеты , мобильные телефоны, RSS-ридеры и многое другое.Стили и дизайнерские решения, которые имеют смысл в одной среде, не всегда имеют смысл в другой. Так что гораздо лучше предоставить семантическую информацию и позволить адаптировать контент к контексту.

    Этот последний пункт тесно связан с…

    Повышение доступности и отзывчивости дизайна

    Не все взаимодействуют с Интернетом так же, как вы.

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

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

    И всем этим технологиям препятствует разметка, которая пытается «жестко запрограммировать» дизайн и стили в содержание страницы.

    Уменьшение перекрытия между HTML, CSS и JavaScript

    Интерфейсную веб-разработку определяют три языка - HTML, CSS и JavaScript.

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

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

    • HTML - Контент
    • CSS - Дизайн
    • JS - Интерактивность

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

    Поддержка мультимедийных возможностей при устранении необходимости в подключаемых модулях, таких как Flash или Java

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

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

    Это был беспорядок.

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

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

    Самый простой ответ на этот вопрос заключается в том, что это текущая «правильная» версия языка.

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

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

    • Легче писать
    • Легче поддерживать
    • Легче перепроектировать
    • Лучше для поисковой оптимизации
    • Лучше для слепых и слабовидящих
    • Лучше для агрегаторов контента и читателей каналов
    • Лучше для пользователей мобильных устройств
    • Лучше для пользователей с более медленным подключением к Интернету
    • Меньше шансов сбоя в дизайне
    • Легче добавлять мультимедиа
    • Легче создавать интерактивные приложения
    • Устаревшие функции, вероятно, перестанут поддерживаться в какой-то момент, нарушая работу вашей страницы

    Как использовать HTML5

    Вы, наверное, уже знаете, как создавать документы HTML5.Основы языка те же. Следует помнить лишь о нескольких вещах.

    Избегайте устаревших функций


    ​​Убедитесь, что вы знаете, какие функции HTML больше не поддерживаются в HTML5.Если вы исследуете устаревшие теги, вы сможете узнать больше о том, почему каждая функция устарела и как добиться аналогичных эффектов с помощью современных стандартных функций HTML5 и CSS.

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

    Научитесь использовать новые функции

    Иногда, если вы не знаете, что что-то доступно, вы не знаете, что искать. Например, если вы еще не знали об элементе

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

    Самый простой ответ на этот вопрос заключается в том, что это текущая «правильная» версия языка.

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

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

    • Легче писать
    • Легче поддерживать
    • Легче перепроектировать
    • Лучше для поисковой оптимизации
    • Лучше для слепых и слабовидящих
    • Лучше для агрегаторов контента и читателей каналов
    • Лучше для пользователей мобильных устройств
    • Лучше для пользователей с более медленным подключением к Интернету
    • Меньше шансов сбоя в дизайне
    • Легче добавлять мультимедиа
    • Легче создавать интерактивные приложения
    • Устаревшие функции, вероятно, перестанут поддерживаться в какой-то момент, нарушая работу вашей страницы

    Как использовать HTML5

    Вы, наверное, уже знаете, как создавать документы HTML5.Основы языка те же. Следует помнить лишь о нескольких вещах.

    Избегайте устаревших функций


    ​​Убедитесь, что вы знаете, какие функции HTML больше не поддерживаются в HTML5.Если вы исследуете устаревшие теги, вы сможете узнать больше о том, почему каждая функция устарела и как добиться аналогичных эффектов с помощью современных стандартных функций HTML5 и CSS.

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

    Научитесь использовать новые функции

    Иногда, если вы не знаете, что что-то доступно, вы не знаете, что искать. Например, если вы еще не знали об элементе , вы можете не знать, насколько легко встроить видео на веб-страницу.


    ​​Так что неплохо было бы потратить некоторое время на просмотр новых функций, чтобы знать, что доступно.

    Удобство работы с CSS

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

    Используйте декларацию HTML5

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

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

    Не закрывать пустые теги

    Это небольшая деталь, но…

    «Нулевой» или «пустой» элемент - это элемент, не имеющий содержимого. К ним относятся:

    Удивлены, что элемент не имеет содержимого? Само изображение является атрибутом тега, а не содержимым.

    В некоторых предыдущих версиях HTML (основанных на стандарте XML) требовалось, чтобы эти элементы закрывались косой чертой.


    ​​

    ​​

    ​​


    Это больше не требуется.


    ​​

    ​​

    ​​


    Подтвердите свои страницы

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

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

    ​​Устаревшие функции в HTML5

    Новые функции в HTML5

    ->

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

    Завершена спецификация HTML5, продолжается работа над следующей главой веб-стандартов

    Сегодня Всемирный веб-консорциум (W3C) объявляет о завершении трехлетнего поиска завершения спецификации HTML5. Как говорится в пресс-релизе W3C, «HTML5 является краеугольным камнем открытой веб-платформы», кроссплатформенной среды программирования, обычно называемой общим термином «веб-стандарты».«HTML5 и связанные с ним технологии, такие как JavaScript и CSS, позволяют писать полнофункциональные веб-приложения, предназначенные для работы на любом устройстве, которое соответствует спецификациям, и многие компании связывают свое будущее с успехом платформы. Но несмотря на то, что спецификация теперь является функцией завершено, что означает, что к нему больше ничего не будет добавлено, предстоит еще много работы, прежде чем HTML5 достигнет финишной черты в 2014 году, и есть неотвеченные вопросы о том, как группа планирует работать с видео, что является важной частью Интернета, который еще не нашел четкого решения.

    Поскольку у заинтересованных сторон теперь есть окончательный вариант спецификации, все находятся на одной странице

    Поскольку спецификация HTML5 завершена, у поставщиков браузеров теперь есть стабильная цель, для которой можно писать. Прежде чем спецификация попадет в Рекомендацию в 2014 году - последняя остановка в процессе W3C, - она ​​вступает в период тестирования совместимости и производительности, который называется «Рекомендация кандидата», большая часть которого состоит из разработки программного обеспечения для тестирования поставщиками браузеров.Ян Джейкобс, глава отдела маркетинга и коммуникаций W3C, объясняет, что, поскольку у заинтересованных сторон теперь есть окончательный вариант спецификации, все находятся на одной странице. «Разработчики будут знать, какие функции браузеры будут реализовывать совместно». Что касается пользователя, то окончательная спецификация означает, что мы можем рассчитывать на более функциональные и надежные веб-приложения.

    Мы надеемся, что новый акцент на производительности поможет сократить разрыв между веб-приложениями и собственными приложениями на мобильных устройствах. Несколько известных компаний, в том числе Facebook, перешли с HTML5 на собственные приложения для своего мобильного присутствия, что заставляет многих сомневаться в том, может ли Open Web Platform конкурировать.Но Джейкобс говорит, что важно точно знать, на каком этапе цикла разработки платформы мы находимся. Позиция W3C заключается в том, что, хотя для разработчиков и замечательно создавать приложения с использованием передовых веб-технологий, «мы только что достигли полной функциональности сегодня, и это не будет стандартом в течение двух лет. Неудивительно, что мы видим эти икота по пути ".

    Самый большой вопрос в мире HTML5 - это тег видео

    Самый большой вопрос в мире HTML5 - это тег video , который по-прежнему требует от W3C решения, какой кодек использовать.Apple и Microsoft поддерживают стандарт H.264 группы экспертов по кинематографии, в то время как Google и Mozilla поддерживают VP8 (видеокомпонент WebM) - якобы не обремененный патентами кодек, исходный код которого Google открыл после покупки его владельца, On2 Technologies, обратно в 2010 году. Однако в прошлом году MPEG-LA (лицензирующий орган для H.264) начал собирать патентный пул для патентовладельцев, чьи технологии необходимы для VP8, что поставило под сомнение его долгосрочную жизнеспособность в качестве бесплатной альтернативы H.264. Со своей стороны, W3C проводит политику бесплатного использования патентов, которая требует, чтобы любая технология, существенная для его спецификаций, была сделана бесплатно доступной для всех организаций-членов. Пока нет другого явного соперника H.264, который уже широко распространен, хотя Джейкобс говорит, что W3C «продолжит работать с заинтересованными сторонами над созданием бесплатного кодека для Интернета», а в прошлом месяце организация призвала IETF чтобы помочь в разработке бесплатных кодеков для спецификации WebRTC - новой веб-технологии, позволяющей осуществлять голосовой и видеочат в браузере, как в Skype.

    Итак, что ждет открытую веб-платформу в будущем, когда спецификация HTML5 завершена? По мере того как W3C перемещает ресурсы в сторону инструментов для тестирования совместимости и производительности, мы можем ожидать, что средний опыт работы в Интернете будет продолжать улучшаться. А наличие стабильной спецификации дает предприятиям и разработчикам дополнительный стимул начать пользоваться преимуществами новых технологий. Люди, разрабатывающие веб-стандарты, согласны с тем, что им предстоит пройти долгий путь, прежде чем они смогут соперничать с собственными приложениями, но дела идут вперед.

    Спецификация HTML5: что есть, а что нет?

    Спецификация HTML5: что есть, а что нет?

    Роб Гравелл с Лизой Смит

    В июне 2004 года Консорциуму Всемирной паутины (W3C), органу, ответственному за разработку HTML, на семинаре было представлено предложение сосредоточиться на разработке технологий, совместимых с существующими браузерами, в обратном порядке. В результате этого обсуждения появилась новая версия HTML, известная как HTML5.С 2012 года W3C начал сосредоточиваться на разработке единого стандарта для HTML5, в то время как рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG), другая группа, участвовавшая в разработке, изменила свою миссию на «Живой стандарт», что означает, что эта работа никогда не будет считается завершенным, и группа продолжит работу над обновлениями и улучшением продукта. Это также означает, что можно добавлять новые функции, но нельзя удалить текущие функции.

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

    На первый взгляд, вы можете сравнить HTML5 с Adobe Flash, поскольку оба могут воспроизводить аудио и видео на веб-странице. Однако они гораздо более разные, поскольку Adobe Flash намного более независим и может работать с мультимедийным контентом самостоятельно, в то время как HLTM5 зависит от поддержки других компонентов, таких как CSS3 и JavaScript. Несмотря на то, что некоторые из этих компонентов когда-то были частью более старых версий HTML, теперь они представляют собой полностью отдельные спецификации, что делает их сторонними сторонниками.

    Итак, что нового в HTML5?

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

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

    Что нового: новые рабочие группы

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

    Помимо этого, прилагаются новые усилия, чтобы подчеркнуть важность написания сценариев DOM (объектной модели документа), например JavaScript. Хотя это уже была отдельная сложившаяся группа.

    Заключение

    Проверив все изменения, дополнения и удаления, мы можем легко сделать вывод, что HTML5 - это попытка сделать работу в Интернете более удобной для пользователей, или, лучше сказать, более ориентированной на пользователя для сегодняшних пользователей. Благодаря HTML5 пользователям больше не нужны дополнительные плагины, такие как Flash для видео или любое другое настольное приложение, которое помогает при просмотре, если на то пошло. Более того, эта версия дает больше шансов для будущей разработки некоторых из присущих ей компонентов, таких как CSS3, WebSockets, IETF HyBi, при этом они все еще используются для HTML5, разбивая их на отдельные спецификации.

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

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