Викиучебник

HTML/HTML5

< HTML
(перенаправлено с «Html5»)

Краткая историяПравить

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 имя_фрейма 

Указывает браузеру как открыть ссылку: 
 _blank - в новом окне 
 _self - в окне где был открыт документ с ссылкой 
 _parent - в родительском окне 
 _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>

Источник информацииПравить

СсылкиПравить

Источник — https://ru.wikibooks.org/w/index.php?title=HTML/HTML5&oldid=204541