Краткая история
правитьHTML5 является эволюционным развитием HTML4.01 с сохранением обратной совместимости и добавлением новых возможностей (W3C)/(WHATWG).
Конкурирующий стандарт XHTML2.0, который так и не был окончательно принят, предполагал более значительные изменения.
Параллельно с W3C развитием HTML5 занимается и WHATWG. Причём с 2004 года WHATWG, а с 2007 W3C, у которой до этого приоритетом был стандарт XHTML2.0.
В качестве стандарта W3C HTML5 был принят 28 октября 2014 года, а W3C HTML5.1 планируется в конце 2016 года. Стандарт WHATWG HTML является живым (Living Standard), то есть изменения в него вносятся постоянно.
В документе можно посмотреть отличия различных HTML-спецификаций (между WHATWG HTML, W3C HTML5 и W3C HTML5.1).
Что нового?
править- В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: <!DOCTYPE html>.
- HTML5 поддерживает MathML и SVG.
- Новые теги:
- <section>, <article>, <aside>, <header>, <footer>, <nav>, <main>, <hgroup> (уже считается устаревшим в W3C),
- <figure>, <figcaption>, <video>, <audio>, <source>, <track>, <picture>, <canvas>, <svg>, <math>, <embed> (для вставки контента с плагином (только)),
- <datalist>, <keygen>, <output>, <progress>, <meter>, <dialog>,
- <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>,
- <details>, <summary>, <menu>, <menuitem> (нужно использовать вместо тега <command>).
- Новые значения атрибута type для тега <input>:
- date, datetime, datetime-local, time, month, week,
- color, email, tel, number, range, search, url.
- Новые атрибуты для тегов, например:
- autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега <input>,
- autocomplete, autofocus, placeholder, required и другие для <textarea>,
- async для тега <script>,
- srcset для тега <img>,
- download для тегов <a> и <area>.
- Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов, например:
- contenteditable, spellcheck, contextmenu, hidden, draggable/dropzone.
- Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать CSS:
- <basefont>, <big>, <center>, <font>, <strike>, <tt>.
- Исчезновение фреймов (<frame>, <frameset>, <noframes> (кроме <iframe>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.
- Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные:
- вместо <acronym> нужно использовать тег <abbr>,
- вместо <applet> использовать <object>,
- вместо <dir> использовать <ul>,
- вместо <bgsound> — тег <audio>,
- вместо <listing> и <xmp> — теги <pre> или <code>,
- вместо <strike> — <del> или <s>,
- вместо <isindex> — комбинацию тега <form> и текстового поля.
- Не поддерживаются некоторые атрибуты у тегов, например:
- charset и rev у тегов <link> и <a>,
- coords, shape и name у тега <a>,
- align у всех тегов,
- background, bgcolor, text, topmargin, rightmargin, bottommargin, leftmargin, link, alink, vlink у тега <body>.
- Новые API:
- Рисование 2D-картинок в реальном времени (Canvas),
- Контроль над проигрыванием медиафайлов,
- Хранение данных в браузере,
- Редактирование,
- Drag-and-drop,
- Работа с сетью,
- MIME.
- Новые элементы в DOM.
Теги
править<!--...-->
правитьОписание
правитьТег для комментариев. При просмотре страницы браузером текст внутри этих тегов игнорируется
V.S.
Использование
править<!--Это комментарий, он не будет виден--> <p>Это будет отображаться</p>
!DOCTYPE
правитьОписание
правитьВалидатор для документа. В нём описывается какая версия HTML/XHTML используется в файле.
Отличия от HTML 4.01
правитьВ HTML 4.01 было три валидатора:
- Strict (Строгий, только с рекомендуемыми опциями)
- Transitional (Переходный с не рекомендуемыми опциями)
- Frameset (с поддержкой фреймов)
В HTML5:
<!DOCTYPE html>
A
правитьОписание
правитьТег для гиперссылок.
Отличия от HTML4.01
правитьРазные атрибуты
Атрибуты
правитьАтрибут | Значение | Описание |
---|---|---|
href | URL | URL для перехода |
hreflang | код языка | Язык страницы в URL |
media | тип медиа | Тип медиа URL. Значение по умолчанию — все типы |
ping | URL | URL, которая получает сообщение о переходе пользователя по ссылке. |
rel | alternate archives author bookmark contact external feed first help icon index last license next nofollow noreferrer pingback prefetch prev search stylesheet sidebar tag up |
Показывает связь между текущим документом и документом с URL, указанным в href |
target | _blank _self _parent _top |
Указывает браузеру как открыть ссылку: _blank — в новом окне _self — в окне где был открыт документ с ссылкой _parent — в родительском окне _top — во всем окне (полный экран) Или в какой фрейм открыть ссылку (имя фрейма). |
type | mime_type | Показывает MIME файла в URL |
Использование
править<a href="http://example.com" target="_blank">Это ссылка, которая откроется в новом окне</a>
Название сайта http://example.com обычно используется в качестве примера, чтобы не приводить в качестве ссылки адреса реальных сайтов.
ABBR
правитьОписание
правитьЭтот тег используется для маркировки аббревиатур и акронимов, как ГАЗ или ФГДС.
Отличия от HTML 4.01
правитьНикаких.
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Тег abbr
</title>
<meta charset="UTF-8" />
</head>
<body>
<p>
Сейчас мы расскажем про <abbr title="Ультразвуковое исследование">УЗИ</abbr>
</p>
</body>
</html>
ACRONYM
правитьЭтот тег не поддерживается в HTML5. Используйте тег abbr для выделения акронимов.
ADDRESS
правитьОписание
правитьЭтот тег используется для выделения информации о контактной информации автора или владельца страницы.
Отличия от HTML4.01
правитьНикаких
Использование
правитьНаш адрес: <address>Москва, ул. Васи Пупкина, д. 93, стр. 1. Телефон: (495)725-36-34</address>
APPLET
правитьЭтот тег не поддерживается в HTML5. Используйте тег object для java-апплетов.
AREA
правитьОписание
правитьОпределяет фигуру в карте. Должен находиться в теге map
Отличия от HTML4.01
правитьВ HTML5 у тега появляются новые атрибуты, а некоторые старые не поддерживаются.
Атрибуты
правитьАтрибут | Значения | Описание |
---|---|---|
alt | Текст | Определяет альтернативный текст |
coords | если shape="rect" то coords="left, top, right, bottom"
если shape="circ" то coords="centerx, centery, radius" если shape="poly" то coords="x1,y1,x2,y2,..,xn, yn" |
Определяет координаты фигуры |
href | URL | Определяет URL для фигуры |
hreflang | Двухбуквенный код языка | Язык URL для фигуры |
media | media query | Определяет тип медиа в URL. По умолчанию: все. |
nohref | - | Больше не поддерживается |
rel | alternate
archives author bookmark external first help index last license next nofollow noreferrer prefetch prev search sidebar tag up |
Определяет отношение документа из URL к текущему документу |
shape | rect
rectangle circ circle poly polygon |
Определяет форму фигуры |
target | _blank
_parent _self _top имя_фрейма |
Указывает браузеру как открыть ссылку: |
type | mime-тип | Определяет mime-тип для URL |
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Тег area
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
</body>
</html>
ARTICLE
правитьОписание
правитьТег определяет статью, пост и т. п.
Отличия от HTML4.01
правитьЭто новый тег.
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Тег article
</title>
</head>
<body>
<article>
<h3>
Первый взгляд на HTML5
</h3>
<!-- Текст статьи -->
</article>
</body>
</html>
ASIDE
правитьОписание
правитьТег определяет боковую панель
Отличия от HTML 4.01
правитьЭто новый тег.
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Тег aside
</title>
<meta http-equiv="Content-Type" content="text/html" />
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<aside>
<h3>
Топ пользователей
</h3>
<ol type="1">
<li>
<a href="http://example.com/user1">
TVBEST
</a>
<span class="rating">
22.30
</span>
</li>
<li>
<a href="http://example.com/user6">
Slim
</a>
<span class="rating">
19.34
</span>
</li>
<li>
<a href="http://example.com/user40">
Goli
</a>
<span class="rating">
17.02
</span>
</li>
<li>
<a href="http://example.com/user2">
Bems
</a>
<span class="rating">
15.54
</span>
</li>
<li>
<a href="http://example.com/user16">
Ихачеха
</a>
<span class="rating">
13.91
</span>
</li>
</ol>
</aside>
</body>
</html>
AUDIO
правитьОписание
правитьТег для вывода аудио-плеера
Отличия от HTML 4.01
правитьЭто новый тег
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Тег audio
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<audio src="data/sounds/Zebrahead_Whats_going_on.mp3" controls="controls" autoplay="autoplay">
Ваш браузер не поддерживает аудио-тег HTML5.
</audio>
</body>
</html>
B
правитьОписание
правитьТег форматирует текст, находящийся в нем, жирным.
Отличия от HTML4.01
правитьНет.
Использование
правитьЯ <b>хочу</b> сделать это, но я пока этого не сделал.
BASE
правитьОписание
правитьУказывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа.
Отличия от HTML4.01
правитьНикаких.
Использование
править<head> <base href="http://www.w3schools.com/css/" target="_blank" /> </head>
BASEFONT
правитьОписание
правитьЭтот тег не поддерживается в HTML5. Используйте CSS вместо этого тега.
BDO
правитьОписание
правитьУказывает направление текста.
Отличия от HTML4.01
правитьНикаких.
Использование
править<bdo dir="rtl"> Этот текст будет выглядеть, так </bdo> кат ,ьтедялгыв тедуб тскет тотЭ
BIG
правитьОписание
правитьЭто тег не поддерживает в HTML5. Используйте CSS для увеличения шрифта текста.
BLOCKQUOTE
правитьОписание
правитьТег определяет цитату.
Отличия от HTML4.01
правитьНикаких.
Использование
править<blockquote cite="http://www.example.com"> Флеш-технологии все больше завоёвывают просторы всемирной сети, и те, кто их осваивают, имеют возможность получить на нашем сайте дополнительный опыт, благодаря исходникам и живому общению на форуме. </blockquote>
BODY
правитьОписание
правитьТег определяет «тело» страницы, место, где будет размещаться весь контент.
Отличия от HTML4.01
правитьУстарели некоторые атрибуты.
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Заголовок документа
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Очень длинный и интересный контент сайта...
</body>
</html>
BR
правитьОписание
правитьТег определяет перенос на другую строку.
Отличия от HTML4.01
правитьНикаких.
Использование
правитьОн<br> Она<br> Оно<br>
BUTTON
правитьОписание
правитьОпределяет кнопку.
Отличия от HTML 4.01
правитьНовые атрибуты: autofocus, form, formaction, formenctype, formmethod, formnovalidate и formtarget.
Использование
править<!DOCTYPE html>
<html>
<head>
<title>
Тег button
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<button onclick="alert('Спасибо!')">
Нажми на меня!
</button>
</body>
</html>
CANVAS
правитьОписание
правитьХолст для рисования анимации, управляется при помощи JavaScript.
Отличия от HTML4.01
правитьЭто новый тег.
Атрибуты тега
правитьheight и width — высота и ширина соответственно (хотя лучше использовать CSS).
Использование
правитьЕсли Ваш браузер поддерживает HTML5 Canvas, то Вы увидите ниже прямоугольник:
<!DOCTYPE html>
<html>
<head>
<title>
Тег canvas
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>