Введение в HTML5 - Учим HTML

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

На этой странице рассматривается, что изменилось в HTML5 по сравнению с HTML4: новые семантические элементы, новые типы полей ввода форм, новые JavaScript API и способы встраивания нативного аудио и видео. Если вы только начинаете работать с разметкой, сначала прочитайте введение в HTML.

HTML5 и HTML Living Standard

HTML5 был опубликован как стабильная рекомендация W3C в 2014 году. С тех пор язык больше не заморожен в виде пронумерованных версий. Сейчас его поддерживает WHATWG в виде HTML Living Standard — единой спецификации, которая обновляется непрерывно, а не переиздаётся как «HTML6». В повседневном употреблении «HTML5» просто означает современный HTML: стандарт, который сегодня реализует ваш браузер.

Преимущества HTML5

Основные преимущества HTML5 перечислены ниже:

Он поддерживается каждым современным браузером — как на десктопах, так и на мобильных устройствах — уже более десяти лет.
Он более дружелюбен к устройствам и проще в создании благодаря значительно упрощённому объявлению <!DOCTYPE html> и <meta charset="UTF-8">.
Он работает в тесной связке с CSS и JavaScript для создания привлекательных интерактивных сайтов.
Он поддерживает SVG (масштабируемую векторную графику) и <canvas> для работы с графикой. В более ранних версиях векторная графика требовала плагинов, таких как Flash или VML.
Разметка становится чище благодаря замене универсальных контейнеров <div> на семантические элементы, которые лучше структурируют страницу и улучшают читаемость и доступность.
Он открывает доступ к местоположению пользователя через Geolocation API.
Он воспроизводит мультимедиа (аудио, видео) прямо в браузере через нативные элементы <audio> и <video> без каких-либо дополнительных плагинов. Смотрите раздел мультимедиа HTML.
Он вводит Web Storage, позволяя приложениям хранить данные локально и сохранять их даже после закрытия и повторного открытия браузера.

Что изменилось от HTML4 к HTML5

Удалённые и устаревшие элементы в HTML5

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

Презентационные элементы, такие как <font>, <center>, <big>, <strike>, и прежняя роль стилизации элемента <u>.
Модель фреймов: <frameset>, <frame> и <noframes> (используйте <iframe>, если встраивание действительно необходимо).
Презентационные атрибуты, такие как align, bgcolor, border для таблиц, cellpadding/cellspacing — замените их на CSS.

Добавлено в HTML5

Семантические элементы — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> и другие.
Нативный мультимедиа — элементы <audio> и <video>.
Новые типы полей ввода и атрибуты форм — email, date, range и другие.
Графика — элемент <canvas> для двумерного рисования и встроенный <svg>.
JavaScript API — Web Storage, Geolocation, Web Workers, WebSockets и другие (см. ниже).

Новые семантические элементы

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

Элемент	Назначение
`<header>`	Вводный контент или группа навигационных ссылок
`<nav>`	Блок основных навигационных ссылок
`<main>`	Основное содержимое документа
`<article>`	Самостоятельный, независимо распространяемый фрагмент контента
`<section>`	Тематическая группировка контента, обычно с заголовком
`<aside>`	Контент, косвенно связанный с окружающим содержимым, например боковая панель
`<footer>`	Нижний колонтитул ближайшего раздела или страницы
`<figure>` / `<figcaption>`	Самостоятельный медиаконтент с необязательной подписью

Полный разбор с примерами читайте в разделе Семантические элементы в HTML5.

Новые типы полей ввода и атрибуты форм

HTML5 добавил типы полей ввода, предоставляющие пользователям специализированные элементы управления (средства выбора даты, ползунки, цветовые колёса) и позволяющие браузеру самостоятельно проверять введённые данные. К распространённым типам относятся email, url, tel, search, number, range, date и color.

Новые атрибуты, такие как placeholder, required, autofocus и pattern, сокращают объём JavaScript, необходимого для подсказок и валидации.

<form>
  <label>Email: <input type="email" placeholder="[email protected]" required></label>
  <label>Birthday: <input type="date"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Quantity: <input type="number" min="1" max="10"></label>
  <label>Favorite color: <input type="color"></label>
  <label>Website: <input type="url" autofocus></label>
  <button type="submit">Submit</button>
</form>

Подробнее читайте на странице тега <input>.

Новые JavaScript API

HTML5 также стандартизировал набор браузерных API, превративших веб-страницы в полноценные приложения:

Canvas 2D — рисование графики, диаграмм и игр попиксельно на элементе <canvas>.
Web Storage — localStorage и sessionStorage хранят данные в формате «ключ/значение» в браузере между посещениями.
Geolocation — запрос у пользователя его географического местоположения.
Web Workers — выполнение скриптов в фоновом потоке, чтобы интерфейс оставался отзывчивым.
WebSockets — открытие постоянного двустороннего соединения с сервером для передачи данных в реальном времени.
History API — изменение URL и истории навигации без полной перезагрузки страницы.

Нативное аудио и видео

Элементы <audio> и <video> воспроизводят медиа напрямую без каких-либо плагинов. Используйте атрибут controls, чтобы показать встроенный интерфейс управления воспроизведением браузера, добавьте один или несколько элементов <source>, чтобы браузер мог выбрать поддерживаемый формат, и добавьте резервный текст для очень старых браузеров.

<!DOCTYPE html>
<html>
  <head>
    <title>Native audio and video</title>
  </head>
  <body>
    <video width="320" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <audio controls>
      <source src="sound.mp3" type="audio/mpeg">
      <source src="sound.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

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

Модели контента HTML5

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

Модели контента HTML5 перечислены ниже:

Метаданные (Metadata content)
Потоковый контент (Flow content)
Секционирующий контент (Sectioning content)
Контент заголовков (Heading content)
Фразовый контент (Phrasing content)
Встроенный контент (Embedded content)
Интерактивный контент (Interactive content)
Воспринимаемый контент (Palpable content)

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

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

Метаданные (Metadata content)

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

В эту категорию входят: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> и <title>.

Пример элементов, относящихся к метаданным:

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Потоковый контент (Flow content)

Элементы, относящиеся к категории потокового контента, как правило, используются в теле HTML-документа (внутри тегов <body>).

В эту категорию входят: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

Пример элементов, относящихся к потоковому контенту:

Пример элементов, относящихся к категории потокового контента

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
    <hr/>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <hr/>
      <ol type="A">
        <li>Coca-Cola</li>
        <li>Ice Tea</li>
        <li>Fanta</li>
      </ol>
    </div>
  </body>
</html>

Попробуйте сами »

Следующие элементы относятся к потоковому контенту, но только при выполнении определённого условия:

<area>, только внутри <map>,
<link>, только если указан атрибут itemprop,
<meta>, только если указан атрибут itemprop.

Секционирующий контент (Sectioning content)

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

Элементами модели секционирующего контента являются: <article>, <aside>, <nav> и <section>.

Пример элементов, относящихся к секционирующему контенту:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Article about flower</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
    </section>
  </body>
</html>

Попробуйте сами »

Контент заголовков (Heading content)

Элементы, относящиеся к модели секционирующего контента, создают раздел в текущей структуре документа, определяя область действия элементов <header>, <footer> и контента заголовков.

Элементами контента заголовков являются: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> и <hgroup>.

Пример элементов, относящихся к контенту заголовков:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
      <h3>Some text or subtitle.</h3>
    </hgroup>
  </body>
</html>

Попробуйте сами »

Фразовый контент (Phrasing Content)

Элементы, относящиеся к фразовому контенту, определяют и размечают текст. Это <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> и <wbr>.

Пример элементов, относящихся к фразовому контенту:

Пример элементов, относящихся к фразовому контенту:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example with HTML tags</h1>
    <p>
      Here is some text <sub> with the sup tag</sub>.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
    <p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
    <p>We’ve used &lt;strong&gt; tag to highlight <strong> this important part of the text</strong>.</p>
    <p>The important part of the text is highlighted by the <em> in italic</em>.</p>
  </body>
</html>

Попробуйте сами »

Следующие элементы относятся к фразовому контенту, но только при выполнении определённого условия:

<a>, если содержит только фразовый контент,
<area>, только внутри элемента <map>,
<del>, если содержит только фразовый контент,
<ins>, если содержит только фразовый контент,
<link>, если указан атрибут itemprop,
<map>, если содержит только фразовый контент,
<meta>, если указан атрибут itemprop.

Встроенный контент (Embedded content)

Встроенный контент импортирует другой ресурс или вставляет в документ содержимое из другого языка разметки или пространства имён. Данная модель контента включает следующие элементы: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg> и <video>.

Примеры элементов, относящихся к встроенному контенту:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Canvas Example !', 50, 100);
    </script>
    <h2>Example of the HTML&lt;img&gt; tag:</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br />
  </body>
</html>

Попробуйте сами »

Интерактивный контент (Interactive content)

Модель интерактивного контента включает элементы, специально предназначенные для взаимодействия с пользователем. Это <a> (если указан атрибут href), <button>, <details>, <embed>, <iframe>, <label>, <select> и <textarea>.

Пример элементов, относящихся к интерактивному контенту:

Пример интерактивного контента:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of Interactive content</h1>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br /><br />
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
      <br />
      <button type="button">Send</button>
    </form>
  </body>
</html>

Попробуйте сами »

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

<audio>, если указан атрибут controls,
<img>, если указан атрибут usemap,
<input>, если атрибут type не равен hidden,
<object>, если указан атрибут usemap,
<video>, если указан атрибут controls.

Воспринимаемый контент (Palpable content)

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

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

Вторичные категории контента

Вторичные категории контента — это те, которые поддерживают скрипты. Элементы, поддерживающие скрипты, непосредственно не влияют на отображаемый результат документа, но поддерживают скрипты — либо содержа или задавая код скрипта напрямую, либо указывая данные, которые будут использоваться скриптами. Элементами, поддерживающими скрипты, являются <script> и <template>. Элементы <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> и <td> называются корнями секционирования. Элементами, относящимися к модели прозрачного контента, являются <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> и <video>. Эти элементы наследуют тип родительского элемента и могут содержать контент, допустимый в их родительском элементе.

Практика

Какой элемент был введён в HTML5 для воспроизведения медиа без плагинов?

Элемент video с атрибутом controls и дочерними элементами sourceЭлемент fontЭлемент framesetЭлемент center

Практика

Какой DOCTYPE объявляет документ HTML5?

DOCTYPE htmlDOCTYPE HTML PUBLIC с длинным URL DTDDOCTYPE html5В HTML5 DOCTYPE не нужен