Введение в HTML5
HTML5 — это не только новая версия HTML, дополненная новыми элементами и атрибутами, но и набор технологий для создания более мощных и разнообразных веб-сайтов и приложений, которые поддерживают мультимедиа, взаимодействуют с программными интерфейсами и т. д.
Преимущества HTML5
Основные преимущества HTML5 перечислены ниже:
- HTML5 поддерживается всеми современными браузерами.
- HTML5 лучше подходит для мобильных устройств. Его легко использовать.
- HTML5 помогает создавать привлекательные сайты с помощью CSS, JavaScript и т. д.
- HTML5 поддерживает SVG (Scalable Vector Graphics - Wikipedia) и другую векторную графику. В более ранних версиях использование векторной графики было возможно только в сочетании с такими технологиями, как Flash, VML и т. д.
- Код становится чище главным образом благодаря замене тегов div на семантические элементы, которые помогают лучше структурировать содержимое веб-страницы и повышают читаемость.
- HTML5 поддерживает геолокацию, что позволяет определять местоположение пользователей.
- Новые стандарты были определены для воспроизведения мультимедиа (анимации, аудио, видео) прямо в браузере без необходимости устанавливать дополнительные плагины.
- Поддержка веб-хранилища, введённая в HTML5, позволяет хранить большие объёмы данных приложения локально, не влияя на производительность веб-приложения. Данные в локальном хранилище сохраняются даже после закрытия и повторного открытия браузера пользователем.
Недостатки HTML5:
- Он не поддерживается старыми браузерами.
Модели содержимого HTML5
В HTML5 содержимое веб-страницы можно разделить на семантические группы, которые описывают её содержимое. Эти группы называются моделями содержимого. Каждая из этих моделей описывает тип элементов, которые она содержит. Модель содержимого может включать текст и дочерние элементы. Элемент может принадлежать одной или нескольким категориям содержимого.
Ниже перечислены модели содержимого HTML5:
- Метаданные
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Фразовое содержимое
- Встраиваемое содержимое
- Интерактивное содержимое
- Осязаемое содержимое
Модели содержимого могут пересекаться, и это означает, что элементы одновременно принадлежат нескольким категориям. Например, секционное, заголовочное, фразовое, встраиваемое, интерактивное и часть метаданных содержимого относятся к потоковому содержимому. Метаданные и интерактивное содержимое в определённых случаях могут относиться к фразовому содержимому.
Существуют также элементы, которые используются для конкретных целей, например для определения форм. Такие элементы не относятся ни к одной из упомянутых выше моделей содержимого.
Метаданные
Элементы, относящиеся к категории метаданных, содержат информацию об 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>Потоковое содержимое
Элементы, относящиеся к категории потокового содержимого, — это обычно те, которые используются в теле 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,<style>, только если указан атрибут scoped.
Секционное содержимое
Элементы, относящиеся к секционному содержимому, создают независимые разделы в структуре HTML-документа (например, header, footer и т. д.). Обратите внимание, что каждый раздел может иметь свой заголовок и структуру.
К элементам модели секционного содержимого относятся: <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>Заголовочное содержимое
Элементы, относящиеся к модели секционного содержимого, создают раздел в текущей структуре документа, который определяет область действия элементов <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>Фразовое содержимое
Элементы, относящиеся к фразовому содержимому, определяют и размечают текст. К ним относятся <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> and <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 <strong> 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.
Встраиваемое содержимое
Встраиваемое содержимое импортирует другой ресурс или вставляет в документ содержимое из другого языка разметки или пространства имён. Эта модель содержимого включает следующие элементы: <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<canvas> 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<img> tag:</h2>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
<h2>Example of the HTML<svg> tag:</h2>
<svg width="350" height="150">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
</svg>
<br />
</body>
</html>Интерактивное содержимое
Модель интерактивного содержимого включает элементы, специально предназначенные для взаимодействия с пользователем. К ним относятся <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,<menu>, если значение атрибута type равно “toolbar”,<object>, если указан атрибут usemap,<video>, если указан атрибут controls.
Осязаемое содержимое
Содержимое считается осязаемым, если оно не пустое и не скрыто; это содержимое, которое отображается и является значимым. Элементы, модель которых — потоковое содержимое или фразовое содержимое, должны иметь как минимум один осязаемый узел, и этот узел не должен иметь атрибут hidden.
Это не является обязательным условием; бывают случаи, когда элемент может быть пустым. Например, он может быть заполнен после выполнения внешнего скрипта.
Вторичные категории содержимого
Вторичные категории содержимого — это те, которые поддерживают скрипты. Элементы, поддерживающие скрипты, напрямую не вносят вклад в отображаемый результат документа, но поддерживают скрипты либо содержащими или задавая код скрипта напрямую, либо задавая данные, которые будут использоваться скриптами. Элементами, поддерживающими скрипты, являются <script> и <template>. Элементы <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> и <td> называются корнями секционирования. Элементы, относящиеся к прозрачной модели содержимого, — это <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> и <video>. Эти элементы наследуют тип родительского элемента и могут содержать содержимое, разрешённое в их родительском элементе.
Практика
Какие новые элементы были введены в HTML5?