|
Зgравсmвуйте! Bас инmерeсyюm kлueнmcкuе 6aзы gанныx?
== Краткая история ==
[http://www.w3.org/TR/html5/ HTML5] является эволюционным развитием [http://www.w3.org/TR/html401/ HTML4.01] с сохранением обратной совместимости и добавлением новых возможностей [http://www.w3.org/TR/html5-diff/ (W3C)]/[https://html-differences.whatwg.org/ (WHATWG)].
Конкурирующий стандарт [http://www.w3.org/TR/xhtml2/ XHTML2.0], который так и не был окончательно принят, предполагал более значительные изменения.
Параллельно с [http://www.w3.org/ W3C] развитием HTML5 занимается и [https://whatwg.org/ WHATWG]. Причём [https://platform.html5.org/history/ с 2004 года] WHATWG, а с 2007 W3C, у которой до этого приоритетом был стандарт XHTML2.0.
В качестве стандарта W3C HTML5 был принят 28 октября 2014 года, а W3C HTML5.1 планируется в конце 2016 года. Стандарт WHATWG HTML является живым (Living Standard), то есть изменения в него вносятся постоянно.
В [http://www.w3.org/html/landscape/ документе] можно посмотреть отличия различных HTML-спецификаций (между [https://html.spec.whatwg.org/multipage/ WHATWG HTML], [http://www.w3.org/TR/html5/ W3C HTML5] и [http://www.w3.org/TR/html51/ W3C HTML5.1]).
== Что нового? ==
* В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: <nowiki><!DOCTYPE html></nowiki>.
* HTML5 поддерживает [[w:MathML|MathML]] и [[w:SVG|SVG]].
* Новые теги:
** <nowiki><section></nowiki>, <nowiki><article></nowiki>, <nowiki><aside></nowiki>, <nowiki><header></nowiki>, <nowiki><footer></nowiki>, <nowiki><nav></nowiki>, <nowiki><main></nowiki>, <nowiki><hgroup></nowiki> (уже считается устаревшим в W3C),
** <nowiki><figure></nowiki>, <nowiki><figcaption></nowiki>, <nowiki><video></nowiki>, <nowiki><audio></nowiki>, <nowiki><source></nowiki>, <nowiki><track></nowiki>, <nowiki><picture></nowiki>, <nowiki><canvas></nowiki>, <nowiki><svg></nowiki>, <nowiki><math></nowiki>, <nowiki><embed></nowiki> (для вставки контента с плагином (только)),
** <nowiki><datalist></nowiki>, <nowiki><keygen></nowiki>, <nowiki><output></nowiki>, <nowiki><progress></nowiki>, <nowiki><meter></nowiki>, <nowiki><dialog></nowiki>,
** <nowiki><data></nowiki>, <nowiki><time></nowiki>, <nowiki><mark></nowiki>, <nowiki><ruby></nowiki>, <nowiki><rt></nowiki>, <nowiki><rp></nowiki>, <nowiki><bdi></nowiki>, <nowiki><wbr></nowiki>,
** <nowiki><details></nowiki>, <nowiki><summary></nowiki>, <nowiki><menu></nowiki>, <nowiki><menuitem></nowiki> (нужно использовать вместо тега <nowiki><command></nowiki>).
* Новые значения атрибута type для тега <nowiki><input></nowiki>:
** date, datetime, datetime-local, time, month, week,
** color, email, tel, number, range, search, url.
* Новые атрибуты для тегов, например:
** autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега <nowiki><input></nowiki>,
** autocomplete, autofocus, placeholder, required и другие для <nowiki><textarea></nowiki>,
** async для тега <nowiki><script></nowiki>,
** srcset для тега <nowiki><img></nowiki>,
** download для тегов <nowiki><a></nowiki> и <nowiki><area></nowiki>.
* Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов, например:
** contenteditable, spellcheck, contextmenu, hidden, draggable/dropzone.
* Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать [[CSS]]:
** <nowiki><basefont></nowiki>, <nowiki><big></nowiki>, <nowiki><center></nowiki>, <nowiki><font></nowiki>, <nowiki><strike></nowiki>, <nowiki><tt></nowiki>.
* Исчезновение фреймов (<nowiki><frame></nowiki>, <nowiki><frameset></nowiki>, <nowiki><noframes></nowiki> (кроме <nowiki><iframe></nowiki>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.
* Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные:
** вместо <nowiki><acronym></nowiki> нужно использовать тег <nowiki><abbr></nowiki>,
** вместо <nowiki><applet></nowiki> использовать <nowiki><object></nowiki>,
** вместо <nowiki><dir></nowiki> использовать <nowiki><ul></nowiki>,
** вместо <nowiki><bgsound></nowiki> — тег <nowiki><audio></nowiki>,
** вместо <nowiki><listing></nowiki> и <nowiki><xmp></nowiki> — теги <nowiki><pre></nowiki> или <nowiki><code></nowiki>,
** вместо <nowiki><strike></nowiki> — <nowiki><del></nowiki> или <nowiki><s></nowiki>,
** вместо <nowiki><isindex></nowiki> — комбинацию тега <nowiki><form></nowiki> и текстового поля.
* Не поддерживаются некоторые атрибуты у тегов, например:
** charset и rev у тегов <nowiki><link></nowiki> и <nowiki><a></nowiki>,
** coords, shape и name у тега <nowiki><a></nowiki>,
** align у всех тегов,
** background, bgcolor, text, topmargin, rightmargin, bottommargin, leftmargin, link, alink, vlink у тега <nowiki><body></nowiki>.
* Новые API:
** Рисование 2D-картинок в реальном времени ([[w:Canvas|Canvas]]),
** Контроль над проигрыванием медиафайлов,
** Хранение данных в браузере,
** Редактирование,
** Drag-and-drop,
** Работа с сетью,
** MIME.
* Новые элементы в DOM.
== Теги ==
=== <nowiki><!--...--></nowiki> ===
==== Описание ====
Тег для комментариев. При просмотре страницы браузером текст внутри этих тегов игнорируется
==== Отличия от HTML4.01 ====
Никаких
==== Использование ====
<pre><!--Это комментарий, он не будет виден-->
<p>Это будет отображаться</p></pre>
=== !DOCTYPE ===
==== Описание ====
Валидатор для документа. В нём описывается какая версия HTML/XHTML используется в файле.
==== Отличия от HTML 4.01 ====
В HTML 4.01 было три валидатора:
* Strict (Строгий, только с рекомендуемыми опциями)
* Transitional (Переходный с не рекомендуемыми опциями)
* Frameset (с поддержкой фреймов)
В HTML5:
<source lang="html5">
<!DOCTYPE html>
</source>
=== A ===
==== Описание ====
Тег для гиперссылок.
==== Отличия от HTML4.01 ====
Разные атрибуты
==== Атрибуты ====
{| class="wikitable" border="1"
|-
! Атрибут
! Значение
! Описание
|-
| href
| URL
| URL для перехода
|-
| hreflang
| код языка
| Язык страницы в URL
|-
| media
| тип медиа
| Тип медиа URL. Значение по умолчанию — все типы
|-
| ping
| URL
| URL, которая получает сообщение о переходе пользователя по ссылке.
|-
| rel
|alternate<br />archives<br />author<br />bookmark<br />contact<br />external<br />feed<br />first<br />help<br />icon<br />index<br />last<br />license<br />next<br />nofollow<br />noreferrer<br />pingback<br />prefetch<br />prev<br />search<br />stylesheet<br />sidebar<br />tag<br />up
| Показывает связь между текущим документом и документом с URL, указанным в href
|-
| target
| _blank<br />_self<br />_parent<br />_top
| Указывает браузеру как открыть ссылку: <br /> _blank — в новом окне <br /> _self — в окне где был открыт документ с ссылкой <br /> _parent — в родительском окне <br /> _top — во всем окне (полный экран)<br />Или в какой фрейм открыть ссылку (имя фрейма).
|-
| type
| mime_type
| Показывает MIME файла в URL
|}
==== Использование ====
<pre><a href="http://example.com" target="_blank">Это ссылка, которая откроется в новом окне</a></pre>
Название сайта <nowiki>http://example.com</nowiki> обычно используется в качестве примера, чтобы не приводить в качестве ссылки адреса реальных сайтов.
=== ABBR ===
==== Описание ====
Этот тег используется для маркировки аббревиатур и акронимов, как ГАЗ или ФГДС.
==== Отличия от HTML 4.01 ====
Никаких.
==== Использование ====
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
<title>
Тег abbr
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
Сейчас мы расскажем про <abbr title="Ультразвуковое исследование">УЗИ</abbr>
</p>
</body>
</html>
</source>
=== ACRONYM ===
Этот тег не поддерживается в HTML5. Используйте тег '''abbr''' для выделения акронимов.
=== ADDRESS ===
==== Описание ====
Этот тег используется для выделения информации о контактной информации автора или владельца страницы.
==== Отличия от HTML4.01 ====
Никаких
==== Использование ====
<pre>Наш адрес: <address>Москва, ул. Васи Пупкина, д. 93, стр. 1. Телефон: (495)725-36-34</address></pre>
=== APPLET ===
Этот тег не поддерживается в HTML5. Используйте тег '''object''' для java-апплетов.
=== AREA ===
==== Описание ====
Определяет фигуру в карте. Должен находиться в теге '''map'''
==== Отличия от HTML4.01 ====
В HTML5 у тега появляются новые атрибуты, а некоторые старые не поддерживаются.
==== Атрибуты ====
{| class="wikitable" border="1"
|-
! Атрибут
! Значения
! Описание
|-
| 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
имя_фрейма
|
Указывает браузеру как открыть ссылку: <br /> _blank - в новом окне <br /> _self - в окне где был открыт документ с ссылкой <br /> _parent - в родительском окне <br /> _top - в всем окне<br>Или в какой фрейм открыть ссылку (имя фрейма).
|-
| type
|mime-тип
|Определяет mime-тип для URL
|}
==== Использование ====
<source lang="html5">
<!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>
</source>
=== ARTICLE ===
==== Описание ====
Тег определяет статью, пост и т. п.
==== Отличия от HTML4.01 ====
Это новый тег.
==== Использование ====
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
<title>
Тег article
</title>
</head>
<body>
<article>
<h3>
Первый взгляд на HTML5
</h3>
<!-- Текст статьи -->
</article>
</body>
</html>
</source>
=== ASIDE ===
==== Описание ====
Тег определяет боковую панель
==== Отличия от HTML 4.01 ====
Это новый тег.
==== Использование ====
<source lang="html5">
<!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://nullbox.ru/user1">
TVBEST
</a>
<span class="rating">
22.30
</span>
</li>
<li>
<a href="http://nullbox.ru/user6">
Slim
</a>
<span class="rating">
19.34
</span>
</li>
<li>
<a href="http://nullbox.ru/user40">
Goli
</a>
<span class="rating">
17.02
</span>
</li>
<li>
<a href="http://nullbox.ru/user2">
Bems
</a>
<span class="rating">
15.54
</span>
</li>
<li>
<a href="http://nullbox.ru/user16">
Ихачеха
</a>
<span class="rating">
13.91
</span>
</li>
</ol>
</aside>
</body>
</html>
</source>
=== AUDIO ===
==== Описание ====
Тег для вывода аудио-плеера
==== Отличия от HTML 4.01 ====
Это новый тег
==== Использование ====
<source lang="html5">
<!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>
</source>
=== B ===
==== Описание ====
Тег форматирует текст, находящийся в нем, жирным.
==== Отличия от HTML4.01 ====
Нет.
==== Использование ====
<pre>
Я <b>хочу</b> сделать это, но я пока этого не сделал.
</pre>
=== BASE ===
==== Описание ====
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа.
==== Отличия от HTML4.01 ====
Никаких.
==== Использование ====
<pre>
<head>
<base href="http://www.w3schools.com/css/" target="_blank" />
</head>
</pre>
=== BASEFONT ===
==== Описание ====
Этот тег не поддерживается в HTML5. Используйте CSS вместо этого тега.
=== BDO ===
==== Описание ====
Указывает направление текста.
==== Отличия от HTML4.01 ====
Никаких.
==== Использование ====
<pre>
<bdo dir="rtl">
Этот текст будет выглядеть, так
</bdo>
кат ,ьтедялгыв тедуб тскет тотЭ
</pre>
=== BIG ===
==== Описание ====
Это тег не поддерживает в HTML5. Используйте CSS для увеличения шрифта текста.
=== BLOCKQUOTE ===
==== Описание ====
Тег определяет цитату.
==== Отличия от HTML4.01 ====
Никаких.
==== Использование ====
<pre>
<blockquote cite="http://www.example.com">
Флеш-технологии все больше завоёвывают просторы всемирной сети, и те, кто их осваивают, имеют возможность получить на нашем сайте
дополнительный опыт, благодаря исходникам и живому общению на форуме.
</blockquote>
</pre>
=== BODY ===
==== Описание ====
Тег определяет «тело» страницы, место, где будет размещаться весь контент.
==== Отличия от HTML4.01 ====
Устарели некоторые атрибуты.
==== Использование ====
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
<title>
Заголовок документа
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Очень длинный и интересный контент сайта...
</body>
</html>
</source>
=== BR ===
==== Описание ====
Тег определяет перенос на другую строку.
==== Отличия от HTML4.01 ====
Никаких.
==== Использование ====
<pre>
Он<br/>
Она<br/>
Оно<br/>
</pre>
=== BUTTON ===
==== Описание ====
Определяет кнопку.
==== Отличия от HTML 4.01 ====
Новые атрибуты: autofocus, form, formaction, formenctype, formmethod, formnovalidate и formtarget.
==== Использование ====
<source lang="html5">
<!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>
</source>
=== CANVAS ===
==== Описание ====
Холст для рисования анимации, управляется при помощи JavaScript.
==== Отличия от HTML4.01 ====
Это новый тег.
==== Атрибуты тега ====
'''height''' и '''width''' — высота и ширина соответственно (хотя лучше использовать CSS).
==== Использование ====
Если Ваш браузер поддерживает HTML5 Canvas, то Вы увидите ниже прямоугольник:
<source lang="html5">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</source>
<source lang="javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,80,100);
</source>
<source lang="html5">
</script>
<title>
Тег canvas
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>
</source>
== Источник информации ==
* http://www.w3schools.com/html/default.asp
* http://www.w3schools.com/html/html5_intro.asp
[[Категория:HTML]]
[[Категория:Языки разметки]]
[[Категория:Веб-разработка]]
| 