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>

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

Ссылки

Эта статья взята у (из) Викиучебник. Текст лицензируется по Creative Commons Attribution-Share Alike 4.0. К медиа файлам могут применятся дополнительные условия.