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

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

Содержание

Спецификация W3C или WHATWG — Блог HTML Academy

Есть две спецификации HTML: W3C и WHATWG, какой из них верить? — спрашивают наши зрители Екатерина и Дмитрий. Верьте той, которая больше нравится, но не забывайте сверяться с браузерами. Давайте разберёмся.

Спецификация — это главный источник знаний: как для браузеров, так и для разрабочиков. Браузеры обрабатывают код по спеке, разработчики пишут код по спеке — и у нас всё вместе хорошо работает. Это называется «веб-стандарты» и вы не хотите знать, насколько всё было плохо до их широкого признания.

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

Когда-то в W3C решили отказаться от спецификации HTML 4 и начать разрабатывать XHTML, более строгую, формальную и, как потом стало ясно — слишком оторванную от реальности. В ответ на это собралась WHATWG, в которую вошли представители браузеров. Благодаря этому появилась спецификация HTML 5 со множеством по-настоящему полезных вещей. От XHTML осталась только привычка закрывать теги и кавычить атрибуты.

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

В итоге, сейчас у нас есть две спецификации: рекомендация HTML 5.1 по W3C и живой стандарт HTML по WHATWG. И у каждой — свои цели: HTML5 делает снимки реальности, нумерует их и выпускает рекомендации. Это отвечает на вопрос разработчиков: что уже есть в браузерах? WHATWG, напротив, старается опередить реальность, предложить что-то новое и предсказать изменения. Это уже ближе к задачам браузеров.

Так в чём же противоречия? Например, W3C рекомендует иметь всего один элемент main на странице, приравнивая его к ARIA-роли main. Это помогает скринридерам находить самое главное на странице. WHATWG допускает main в любом структурном элементе, как главную его часть, на манер header и footer.

<body>
  <header>
  <main>
    <article>
      <h2>
      <footer>
  <footer>

<body>
  <header>
  <main>
    <article>
      <h2>
      <main>
      <footer>
  <footer>

Из спецификации W3C убрали элемент hgroup, объясняя это отсутствием реализаций в браузерах, слабыми примерами использования и потенциальными проблемами. Вместо него рекомендуют обычный header и параграф для подзаголовка. В версии WHATWG элемент hgroup на месте — раз уж добавили, то чего убирать.

<article>
  <header>
    <h2>Заголовок</h2>
    <p>Подзаголовок</p>
  </header>
  <p>Текст</p>
</article>

Спецификация W3C также приводит расширенные примеры, рекомендации к использованию и развивает семантику элементов. HTML 5 поясняет важность уровней заголовков, рекомендует figcaption вместо атрибута title для картинок, объясняет как использовать alt, осуждает, но разрешает таблицы для раскладки, если есть role=»presentation» и так далее.

Вы наверное уже поняли, что мне версия W3C нравится больше. Прочная связь со спецификациями по доступности, большее количество примеров и недавний переезд на Гитхаб — очень подкупают. По-моему, у WHATWG просто отлично получаются другие спецификации: DOM, Canvas, Fetch, URL и многие другие.

Плохо, что у нас есть две спецификации вместо одной? Да. Так почему не объединить их в одну? М-м, это вряд ли: слишком уж разные подходы к разработке. Но знаете, всё не так плохо: это просто две площадки для дискуссий со своими правилами, куда приходят представители всех браузеров, комитетов и групп, чтобы так или иначе развивать веб. И вы приходите — всё на Гитхабе.

Какой спецификации верить? Слепо — ни одной, ориентируйтесь на реализации в браузерах и на практическую ценность. Если вы о ней не знаете, не значит, что её нет. Выберите ту спеку, которая больше нравится и обращайтесь к ней почаще — они написаны для вас.

Это были HTML Шорты и Вадим Макеев. Задавайте вопросы на нашей странице или в комментариях к видео. На самые интересные мы ответим в следующих выпусках. Пока!

Новые структурные теги HTML5

Которые позволяют четко описывать блоки контента

Джереми Вишузен
Опубликовано 01.02.2012

Что такое HTML5?

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

  • Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
  • Тег Canvas для рисования контента непосредственно в браузере
  • «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Совершенствование квалификационных навыков по данной тематике

Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. Основы HTML5.

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

История вопроса

В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).

HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.

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

Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.

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

Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.

Поддерживаемые браузеры

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

Обновленная декларация doctype

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

Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

Таблица 1. Doctype-декларации и их возможности
Doctype-декларацияВозможностиПример
HTML 4.01 strictРазрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
HTML 4.01 transitionalАналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
HTML 4.01 framesetАналогична декларации HTML transitional, но разрешает использование элементов frameset.<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
XHTML 1.0 strictАналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
XHTML 1.0 transitionalАналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
XHTML 1.0 framesetАналогична декларации XHTML transitional, однако разрешает элементы frameset.<DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
XHTML 1.1Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

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

Листинг 1. HTML5-декларация doctype
<!DOCTYPE html>

Декларация должна находиться в самом начале HTML-документа, перед тегом <html>.

Новые структурные теги

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

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

Подход HTML 4

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

Листинг 2. Простая HTML-страница, использующая теги div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>
      A Simple HTML Page Using Divs
    </title>
  </head>
  <body>
    <div>Header</div>
    <div>Content</div>
    <div>Footer</div>
  </body>
</html>

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

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

Подход HTML5

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

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

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

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

Листинг 3. Добавление тега header
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
    <div>Content</div>
    <div>Footer</div>
  </body>
</html>

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

Тег section

Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы. После добавления тега section к примеру кода мы получаем код, показанный в листинге 4.

Листинг 4. Добавление тега section
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <p>
          This is an important section of the page.
        </p>
      </section>
    <div>Footer</div>
  </body>
</html>

Тег article

Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в листинге 5.

Листинг 5. Добавление тегов article
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div>Footer</div>
  </body>
</html>

Тег aside

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

Листинг 6. Добавление тега aside
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div>Footer</div>
  </body>
</html>

Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в листинге 7.

Листинг 7. Добавление тега footer
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

Тег nav

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

Листинг 8. Добавление тега nav
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

Итоговый вариант примера

В листинге 9 показан результат замены исходных тегов div новыми структурными тегами HTML5.

Листинг 9. Итоговый вариант примера
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div (листинг 2) с результирующим вариантом (листинг 9) наглядно демонстрирует назначение новых структурных тегов.

Заключение

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

Ресурсы для скачивания
Похожие темы
  • Оригинал статьи: New HTML5 structural tags
  • Новые элементы в HTML5(developerWorks, август 2007 г.). Дополнительные сведения по структурным элементам HTML5.
  • WHATWG: Организация WHATWG — это сообщество, отвечающее за спецификацию HTML5.
  • W3C: Организация W3C создала первую спецификацию HTML, а в настоящее время вместе с WHATWG работает над спецификацией HTML5.
  • HTML5 (Wikipedia): Дополнительные сведения о HTML5.
  • Различия между HTML5 и HTML4 (W3C). Рабочий проект, позволяющий глубже понять различия между HTML 4 и HTML5.
  • Первое знакомство с HTML5 (lynda.com): Чем является HTML5 (и чем не является).

— Веб-технологии для разработчиков

HTML-элемент <html> представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).

Категории контентаОтсутствуют.
Разрешенное содержимоеОдин элемент <head>, за которым следует один элемент <body>.
Пропуск тегаОткрывающий тег может быть пропущен, если первое, что находится внутри элемента <html>, не является комментарием.
В HTML5 закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом <html> следует комментарий (при наличии элемента <body>), то закрывающий тег пропускать нельзя.
Разрешенные родительские элементыОтсутствуют. Это корневой элемент документа.
Разрешенные роли ARIAОтсутствуют.
DOM-интерфейсHTMLHtmlElement

Атрибуты

К этому элементу применимы глобальные атрибуты.

manifest
Определяет URI файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кэше. Смотрите Использование кэша приложений.
version
Определяет версию HTML DTD (Document Type Definition, больше известное как Doctype), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.
xmlns
Определяет пространство имен XHTML-документа. Значение по умолчанию "http://www.w3.org/1999/xhtml". Это требуется при парсинге документов с помощью парсера XML и необязательно для документов text/html.

Пример

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

Проблемы доступности

Добавление атрибута lang с допустимым (валидным) идентификатором языка (определены в документе IETF BCP47) в элемент <html> поможет технологии чтения с экрана правильно определить язык. Идентификатор языка должен описывать язык, который используется большей частью содержимого страницы. Без него программы чтения с экрана, как правило, по умолчанию используют язык операционной системы, который может может стать причиной неправильного произношения.

Добавление валидного атрибута lang в элемент <html> также гарантирует, что важные метаданные, содержащиеся в элементе <head>, например заголовок страницы <title>, также будут объявлены правильно.

Спецификации

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

Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам «pull request» (предложение изменения кода в чужом репозитории). Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
htmlChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
manifestChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.5
Полная поддержка 3.5
Частичная поддержка 3
Замечания Versions of Firefox prior to 3.5 ignore the NETWORK and FALLBACK sections of the cache manifest file.
IE Полная поддержка 10Opera Полная поддержка 10.6Safari Полная поддержка 4WebView Android Полная поддержка 4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка 1.0
versionChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
xmlnsChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

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

Смотрите также

  • Элемент верхнего уровня MathML: <math>
  • Элемент верхнего уровня SVG: <svg>

Учебник HTML 5. Статья «Введение»

Язык гипертекстовой разметки HTML (англ. HyperText Markup Language) — является языком разметки документов во Всемирной паутине.

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

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

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

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

Давайте рассмотрим чем отличаются парные теги от одиночных.

Вид (синтаксис) парного тега:


<тег>Содержание тега</тег>

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

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

Вид (синтаксис) одиночного тега:


<тег>Содержание

В современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и >).

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

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

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

Пример простого HTML документа:

И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:


<!DOCTYPE html>
<html>
	<head>
		<title>Название для документа (страницы)</title>
	</head>
	<body>
		<h3>Это заголовок</h3>
		<p>Это параграф (абзац).</p>
	</body>
</html>

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

А теперь детально разберем из чего состоит любая HTML страница:

DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки — HTML 5.

Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом <html>. Декларация <!DOCTYPE> не чувствительна к регистру, но записывать её принято в верхнем регистре.

Хронология версий HTML:

Версия HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5
Год 1991 1995 1997 1999 2000 2014

Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки. Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).

Текст между <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег <title>.

Текст между <title> и </title> обеспечивает название для документа. Название документа должно содержать важные ключевые слова, чтобы поисковые системы могли включить вашу страницу в результаты поиска (по определенным запросам пользователей).

Текст между <body> и </body> описывает видимое содержимое страницы!

Текст между <h3> и </h3> (англ. heading level 2) описывает заголовок второго уровня. Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страниц. Поэтому важно использовать заголовки, чтобы показать структуру документа. Как правильно использовать заголовки от первого до шестого уровня на ваших страницах мы рассмотрим далее в учебнике в статье «Базовый HTML».

Текст между <p> и </p> (англ. HTML Paragraph Element) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.

Ниже показано как отображается вышерассмотренный пример в браузере:

Рис. 1 Пример отображения HTML документа браузером.

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

Вопросы и задачи по теме

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

  • Какая основная задача языка гипертекстовой разметки?
  • Какая версия языка HTML сейчас используется?
  • Что такое декларация? Какая декларация используется в современном стандарте?
  • В какой HTML элемент помещается видимое содержимое документа (страницы)?

НОУ ИНТУИТ | Лекция | Основы HTML. Особенности HTML5

Аннотация: Сущность гипертекста. Развитие стандартов HTML. Уровни HTML. Обзор HTML5.

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

Сущность гипертекста

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

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

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

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

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

Если обратиться к истории возникновения гипертекста, то общепринятой точкой отсчета является статья Ванневара Буша «As We May Think» опубликованная в 1945 году. В статье было представлено устройство машины Memex, хранящей на микрофильмах информацию (книги, корреспонденцию и т.п.). Для поиска необходимой информации предлагалось использование ассоциативных связей, что фактически является прообразом гипертекстовых систем.

После появления, разработанных Тимом Бернерсом — Ли протокола передачи данных HTTP, системы адресации URL и языка HTML, понятие гипертекста стало неразрывно ассоциироваться с информационными технологиями в общем и глобальной паутиной – в частности.

Развитие стандартов HTML

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

HTML, в своем первоначальном виде, был основан на языке SGML – Standart Generalized Markup Language (стандартный обобщенный язык разметки).

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

Также отдельно от существующего текста выносился DTD — файл, определяющий тип документа, для гарантии его обработки.

В 1969 году был создан язык, удовлетворяющий описанным выше правилам – GML (Generalized Markup Language). После того, как в 1989 году язык был принят международной организацией по стандартизации (ISO) в качестве международного стандарта, к названию языка добавилась начальная литера S.

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

Европейский институт физики элементарных частиц (CERN) в 1991 году приступил к разработке первого текстового браузера, поддерживающего гипертекстовую разметку, т.е. способного отображать графику и поддерживающего переходы по ссылкам. Сотрудником института, ведущим данную работу был Тим Бернерс-Ли. В процессе разработки появился язык HTML, во многом схожий с SGML, за исключением структур, позволяющих отображать текст особенным образом (отступы, выделение и т.п.).

Чтобы не повторять многочисленные источники, приведем лишь пару ключевых дат в дальнейшей истории развития HTML: в 1993 году был создан первый браузер с графическим интерфейсом; в 1994 году был основан консорциум W3C.

Если же кратко пробежаться по датам, то получим следующее:

22 декабря 1995 – принят стандарт HTML 2.

1996 – консорциумом W3C принята спецификация CSS1.

14 января 1996 – принят стандарт HTML 3.2.

18 декабря 1997 – принят стандарт HTML 4.0.

24 декабря 1999 – принят стандарт HTML 4.01.

1999 – принята спецификация CSS2.

26 января 2000 – принят стандарт XHTML 1.0.

16 февраля 2007 – принят стандарт XHTML 1.1.

Уровни html

В 1994 году HTML был разбит на уровни. Было выделено 4 уровня:

  • Уровень 0: включает в себя заголовки, ссылки, списки.
  • Уровень 1: добавляются рисунки и элементы выделения текста.
  • Уровень 2: добавляются формы, позволяющие пользователю вводить информацию.
  • Уровень 3: добавляются таблицы.

Обзор html 5

Мы не будем детально рассматривать HTML 5, поскольку просто не хочется повторять множество доступных Интернет – источников, укажем лишь основные моменты:

  1. HTML 5 – это, скорее, новая платформа для создания веб–приложений, нежели стандарт продолжающий традиции предшественников.
  2. HTML 5 регламентирует взаимодействие с JavaScript посредством объектной модели документа (мы еще вернемся к этому в рамках данного курса).
  3. HTML 5 поддерживает все элементы HTML 4.

Ключевые термины и определения

Гипертекст – текст, содержащий ссылки на другие фрагменты.

SGML ( Standard Generalized Markup Language — стандартный обобщённый язык разметки документов. Является наследником разработанного в 1969 году в IBM языка GML (Generalized Markup Language),

HTTP — HyperText Transfer Prоtocоl — «протокол передачи гипертекста») —протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов).

HTML – гипертекстовый язык разметки, созданный Тимом Бернерсом-Ли.

Консорциум W3C (World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины, возглавляемая Тимом Джон Бернерс-Ли.

Краткие итоги

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

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

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

Список материалов для самостоятельного изучения

  1. http://www.lingvolab.chat.ru/library/hypertext.htm
  2. http://eakolesnikov.narod.ru/MemexVannevarBush.htm
  3. http://blogerator.ru/page/memex-pim-organizers-chast-1
  4. http://pyramidin.narod.ru/html401/sgmltut.html
  5. http://searchsoa.techtarget.com/definition/SGML
  6. http://zodios.net/htmlcss/istoriya-razvitiya-html.html
  7. http://webstro.org/content/view/121/41/

Учебник HTML5 (2015 г) » Энциклопедия HTML5

HTML5 — наше настоящее и великое будущее!

Сайт посвящён современному языку разметки — HTML5.
Цель сайта: рассказать вам о HTML5 как можно больше.

Ресурс html-5.ru является одновременно энциклопедией, учебником и справочником по языку HTML5, нежели учебником для начинающих по HTML1. Задача сайта заключается в том, чтобы прояснить:

  • Что такое HTML5, в современном веб-строительстве?
  • Какие технологии начал поддерживать этот язык?
  • Какие новые теги появились в HTML5?
  • Чем он отличается от языков HTML4 или XHTML?
  • Можно ли уже сейчас использовать HTML5?
  • и т.п.

Что такое HTML5?

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

Во-первых практически всё что сейчас завязано на создание сайтов, стремится к мобильности (адаптивности), т.е. чтобы любой сайт который вы открываете, вы бы могли прочитать, на любом устройстве будь то, компьютер, ноутбук, планшет или смартфон. В этом вам как раз и помогают такие новые технологии как HTML5, CSS3, современный JavaScript (и его библиотеки) и даже новый тренд в веб-дизайне под название Flat-стиль.

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

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

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

Какие новые технологии появились в HTML5?

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

  1. Элемент (тег) canvas, позволяет создавать векторную графику, анимировать её и даже создавать игры. Цель этой технологии, полностью заменить флеш анимацию на сайте.
  2. Появились новые технологии по хранению локальных данных, которые могут дать больше возможностей для манипуляций с ними, чем при работе с файлами cookies.
  3. Появилась возможность определять местоположение пользователя geolocation.
  4. Как уже упоминалось выше теперь можно смотреть видео и слушать музыку, не подключая сторонние плагины к браузеру.
  5. Другие технологии.

Чем HTML5 отличается от HTML4 и XHTML?

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

Многие теги и атрибуты из HTML4, теперь считаются устаревшими. Но при этом HTML5, сохраняет полную совместимость с предыдущими языками разметки HTML3, HTML4 и XHTML.

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

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

Можно ли использовать язык HTML5 уже сейчас?

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

В заключение

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

1. http://gabdrahimov.ru/html/ — учебник по html для начинающих

Читать далее: Изменения в коде HTML5

Стандарт HTML

Стандарт HTML

Уровень жизни — Последнее обновление 11 ноября 2020 г.

Содержание

  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 Функции, управляемые политикой
    4. 2.4 Общие микросинтаксисы
      1. 2.4.1 Общие идиомы синтаксического анализатора
      2. 2.4.2 Логические атрибуты
      3. 2.4.3 Ключевые слова и перечисляемые атрибуты
      4. 2.4.4 Числа
        1. 2.4.4.1 Целые числа со знаком
        2. 2.4.4.2 Неотрицательные целые числа
        3. 2.4.4.3 Числа с плавающей запятой
        4. 2.4.4.4 Проценты и длины
        5. 2.4.4.5 Ненулевые проценты и длины
        6. 2.4.4.6 Списки чисел с плавающей запятой
        7. 2.4.4.7 Списки измерений
      5. 2.4.5 Даты и время
        1. 2.4.5.1 Месяцы
        2. 2.4.5.2 Даты
        3. 2.4.5.3 Годовые даты
        4. 2.4.5.4 Время
        5. 2.4.5.5 Местные даты и время
        6. 2.4.5.6 Часовые пояса
        7. 2.4.5.7 Глобальные даты и время
        8. 2.4.5.8 Недели
        9. 2.4.5.9 Продолжительность
        10. 2.4.5.10 Неопределенные моменты времени
      6. 2.4.6 Цвета
      7. 2.4.7 Токены, разделенные пробелами
      8. 2.4.8 Токены, разделенные запятыми
      9. 2.4.9 Ссылки
      10. 2.4.10 Медиа-запросы
    5. 2.5 URL-адреса
      1. 2.5.1 Терминология
      2. 2.5.2 Анализ URL-адресов
      3. 2.5. 3 Динамические изменения базовых URL-адресов
    6. 2.6 Получение ресурсов
      1. 2.6.1 Терминология
      2. 2.6.2 Определение типа ресурса
      3. 2.6.3 Извлечение кодировок символов из мета-элементов
      4. 2.6.4 Атрибуты настроек CORS
      5. 2.6.5 Атрибуты политики реферера
      6. 2.6.6 Атрибуты Nonce
      7. 2.6.7 Атрибуты отложенной загрузки
    7. 2.7 Общие интерфейсы DOM
      1. 2.7.1 Отражение атрибутов содержимого в атрибутах IDL
      2. 2.7. 2 Коллекции
        1. 2.7.2.1 Интерфейс HTMLAllCollection
          1. 2.7.2.1.1 [[Call]] ( thisArgument , argumentsList )
        2. 2.7.2.2 Интерфейс HTMLFormControlsCollection

          48 9.7.2.3 Интерфейс HTMLOptionsCollection

      3. 2.7.3 Интерфейс DOMStringList
    8. 2.8 Безопасная передача структурированных данных
      1. 2.8.1 Сериализуемые объекты
      2. 2.8.2 Переносимые объекты
      3. 2.8.3 Structured ( значение , для хранилища [, память ])
      4. 2.8.4 StructuredSerialize (значение , )
      5. 2.8.5 StructuredSerializeForStorage (значение , )
      6. 2.8.6 StructuredDeserialize ( сериализовано , targetRealm [, память ])
      7. 2.8.7 StructuredSerializeWithTransfer ( значение , transferList )
      8. 2.8.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult , targetRealm )
      9. 2.8.9 Выполнение сериализации и перенос из других спецификаций
  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 Средства доступа к дереву 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 Преобразование в атрибут
        4. 3.2.6.4 Атрибут dir
        5. 3.2.6.5 Атрибут стиля
        6. 3.2.6.6 Встраивание пользовательских невидимых данных с атрибутами data- *
      7. 3.2.7 Геттер innerText и установщик
      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 Базовый элемент
      4. 4.2.4 Элемент link
        1. 4.2.4.1 Обработка media attribute
        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 Корпус элемент
      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 Элемент figure
      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 Элемент small
      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 Элемент data
      14. 4.5. 14 Элемент time
      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 для и элементов
      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 Тип ссылки « канонический »

HTML 5

HTML 5 (или HTML5) - текущая версия HTML. Это пятая основная версия HTML - основного языка Всемирной паутины. Предыдущая версия была HTML 4.01.

HTML-теги / элементы

HTML5 включает множество элементов, перенесенных из HTML 4.01, а также множество новых элементов.

Вот список тегов / элементов HTML 5.

Когда был запущен HTML5?

Работа над спецификацией HTML 5 началась в 2004 году.

Когда HTML5 стал Рекомендацией?

HTML5 стал Рекомендацией W3C 28 октября 2014 года. Работа над спецификацией HTML 5.1 продолжается, и ожидается, что она станет Рекомендацией в конце 2016 года.

WHATWG HTML Living Standard уже готов на в том смысле, что это развивающийся стандарт.Он не основывает свой стандарт на каком-либо снимке по времени , скорее, это постоянная работа.

Объясните, пожалуйста? (W3C против WHATWG)

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

Одна группа, Консорциум World Wide Web (W3C), поддерживает спецификацию HTML5, которая представляет собой «снимок» спецификации в определенный момент времени.

W3C также поддерживает HTML 5.1 Nightly , который включает модификации спецификации, которые будут выпущены позже (и под новым номером версии - HTML 5.1).

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

Другая группа, Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG), поддерживает то, что они называют Living Standard для HTML. Это стандарт, который постоянно обновляется. Нет номеров версий (т.е. это HTML , а не HTML5 ). Стандарт может (и меняется) регулярно. Причина этого в том, чтобы оставаться актуальными для реализаций браузеров. Это также позволяет избежать проблем с браузерами, реализующими функции из спецификации «моментального снимка», которая потенциально может содержать известные ошибки, проблемы или ограничения.

Различия между HTML5 и уровнем жизни HTML?

К счастью, различия между спецификацией W3C HTML5 и WHATWG HTML Living Standard весьма незначительны (ну, они есть на момент написания). Эти различия со временем будут увеличиваться из-за того, что спецификация HTML5 является «моментальным снимком», а уровень жизни постоянно развивается. При этом черновик HTML 5.1 также развивается и, как правило, остается в некотором роде со стандартом HTML Living Standard.

Какого стандарта / рекомендации мне следует придерживаться как веб-разработчик?

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

HTML5 Википедия

Пятая и текущая версия языка разметки гипертекста

HTML5 - это язык разметки, используемый для структурирования и представления контента во всемирной паутине.Это пятая и последняя основная версия HTML, рекомендованная Консорциумом Всемирной паутины (W3C). Текущая спецификация известна как HTML Living Standard. Он поддерживается консорциумом основных поставщиков браузеров (Apple, Google, Mozilla и Microsoft), Рабочей группой по технологиям веб-гипертекстовых приложений (WHATWG).

HTML5 был впервые выпущен в общедоступной форме 22 января 2008 года, [3] с крупным обновлением и статусом «Рекомендации W3C» в октябре 2014 года. [2] [4] Его цели заключались в улучшении языка с поддержкой новейших мультимедийных и других новых функций; чтобы язык был легко читаемым человеком и постоянно понимаемым компьютерами и устройствами, такими как веб-браузеры, анализаторы и т. д., без жесткости XHTML; и для сохранения обратной совместимости со старым программным обеспечением. HTML5 предназначен для включения не только HTML 4, но также XHTML 1 и DOM Level 2 HTML. [5]

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

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

,
,
,
,

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

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

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

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