Краткая история править
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>