Кратко об HTML5

Добавлено 26 октября 2015 в 04:05

Doctype

Doctype до HTML5 был довольно длинным и громоздким. Новый doctype HTML5 выглядит так:

<!DOCTYPE html>

Doctype не чувствителен к регистру, и я в основном пишу его в нижнем регистре.

Указание кодировки

В HTML4 кодировка указывалась так:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Но в HTML5 было сокращено до

<meta charset="UTF-8">

SVG и MathML

В HTML5 элементы SVG и MathML могут использоваться напрямую в HTML документе.

Это делает следующий пример полностью валидным HTML:

<!doctype html>  
<html lang="en">  
  <head>
    <meta charset="UTF-8">
    <title>Using SVG in HTML</title>
  </head>
  <body>
    An SVG circle:
    <svg>
      <circle r="42" cx="42" cy="42" fill="rgb(28,77,70)"/>
    </svg>
  </body>
</html>  

SVG круг:

Другие изменения

В HTML5 теперь могут использоваться пустые элементы в стиле XML. Это немного выравнивает HTML5 с XHTML и делает оба следующих элемента валидными:

<meta charset="UTF-8">  
<meta charset="UTF-8"/> 

Логические атрибуты могут не использовать знак равенства и значение.

Например:

<input type="checkbox" checked="checked"> <!-- HTML4 and XHTML -->  
<input type="checkbox" checked>           <!-- HTML5 -->

Нормализация пробелов была удалена из значений атрибутов. Это означает, что пробелы в id или аналогичных атрибутах больше не игнорируются, и элемент <input> теперь может использовать символы новой строки.

Новые элементы структурирования

  • <main> представляет собой основное содержание документа или приложения. Предполагает добавление ARIA роли "main" к элементу, пока Internet Explorer больше не будет нуждаться в дополнительной поддержке (<main role="main">);
  • <section> представляет собой простой раздел документа или приложения. Должен включать в себя дочерний элемент заголовка для обозначения структуры документа;
  • <article> представляет собой независимый контент документа, например, сообщение в блоге, новостная статья или любой блок контента;
  • <aside> представляет собой часть документа, содержимое которой связано с остальным контентом, и которую можно рассматривать отдельно от документа;
  • <header> представляет собой группу вводных или навигационных средств. Может содержать элементы заголовка, логитип сайта, форму поиска и т.д.;
  • <footer> представляет собой подвал для ближайшему разделу, как правило, содержит информацию об авторе раздела или ссылки на связанный контент;
  • <nav> представляет собой раздел документа, предназначенный для навигации;
  • <figure> преставляет собой самостоятельный контент, например, изображение, видео, цитата, фрагмент кода и т.д.;
  • <figcaption> представляет собой подпись к изображению. Элемент <figcaption> должен быть первым или последним дочерним элементом элемента <figure> и не является обязательным;
  • <template> может использоваться, чтобы включить произвольный HTML код, который будет клонирован во время работы JavaScript приложения.

Другие новые элементы

  • <audio> используется для встраивания музыкального контента в документы;
  • <picture> – контейнер, в который оборачивается элементы <img>, чтобы указать несколько источников изображений для элемента <img>;
  • <video> используется для встраивания видеоконтента в документы;
  • <source> используется для указания нескольких медиаисточников для элементов <audio>, <picture> и <video>;
  • <track> используется для указания данных, зависящих от времени, (например, субтитры) для элементов <audio> или <video>;
  • <embed> используется для встраивания внешних приложений или контента. Этот элемент не был стандартизирован до HTML5;
  • <mark> используется для выделения текста в качестве справочной информации;
  • <progress> используется в веб-приложениях для индикации хода выполнения задания;
  • <meter> представляет собой скалярное значение в известном диапазоне или дробное значение;
  • <time> представляет собой дату или время;
  • <ruby>, <rt> и <rp> позволяют использовать разметку ruby аннотаций;
  • <bdi> изолирует участок текста, который может быть отформатирован в направлении, отличном от направления остального текста за его пределами;
  • <wbr> представляет собой место, в котором браузер может (необязательно) прервать строку;
  • <canvas> используется для рисования произвольной графики с помощью JavaScript;
  • <datalist> содержит набот элементов <option>, которые представляют собой значения, доступные для других элементов управления. Например, <input list="something"><datalist id="something"><option>else</option></datalist>;
  • <output> представляет собой результат расчетов или действий пользователя;
  • <input type="color"> используется для выбора цвета;
  • <input type="date"> используется для выбора даты (без времени);
  • <input type="datetime"> используется для выбора даты и времени (на основе часового пояса UTC);
  • <input type="datetime-local"> используется для выбора даты и времени (без часового пояса);
  • <input type="email"> используется для ввода адреса электронной почты;
  • <input type="month"> используется для ввода месяца и года (без часового пояса);
  • <input type="number"> используется для ввода числа с плавающей запятой;
  • <input type="range"> используется для выбора числа с плавающей запятой из заданного диапазона;
  • <input type="search"> – однострочное текстовое поле для ввода строки поиска; разрывы строки автоматически удаляются из входного значения;
  • <input type="tel"> используется для ввода номера телефона;
  • <input type="time"> используется для ввода значения времени (без часового пояса);
  • <input type="url"> используется для ввода URL;
  • <input type="week"> используется для ввода даты, состоящей из номера года и номера недели (без часового пояса).

Удаленные элементы

Следующие элементы были удалены, так как для оформления внешнего вида документа необходимо использовать CSS:

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <strike>
  • <tt>

Следующие элементы были удалены, так как вредили понятности и удобству использования:

  • <frame>
  • <frameset>
  • <noframes>

Следующие элементы были удалены, так как могут быть заменены другими:

  • <acronym>, используйте <abbr> для аббревиатур;
  • <applet>, используйте <object>;
  • <isindex>, используйте HTML формы;
  • <dir>, используйте <ul>.

Новые атрибуты

  • autofocus может быть задан на элементах <button>, <input>, <select>, <textarea>. Обеспечивает декларативный способ для задания фокуса на элементе управления формы во время загрузки страницы;
  • placeholder может быть задан на элементах <input> и <textarea>. Обеспечивает подсказку для помощи пользователю. Атрибут placeholder не должен использоваться в качестве замены элементу <label>;
  • required может быть задан на элементах <input>, <select>, <textarea>. Указывает, что пользователь должен заполнить значение, чтобы отправить форму. Для элемента <select> первый элемент <option> должен быть заполнителем с пустым значением (<option value="">Выбери что-нибудь</option> или <option></option>);
  • disabled на элементе <fieldset> выключает все элементы управления формы, которые являются его потомками;
  • элемент <input> может принимать несколько атрибутов для каждого нового типа, вы можете найти всех их на Mozilla Developer Network - <input> Element;
  • maxlength, minlength и wrap введены для элемента <textarea>;
  • элемент <form> может имень новый атрибут novalidate для отключению любой проверки во время представления;
  • атрибут async для <script> заставляет скрипт загружаться и выполняться асинхронно;
  • атрибут reversed элемента <ol> указывает, что список идет в убывающем порядке;
  • элемент <img> может принимать новый атрибут crossorigin для использования CORS для запроса на исвлечение, и, если он успешен, позволяет чтение данных изображения с помощью canvas API;
  • атрибуты contenteditable переключают элемент в редактируемый элемент, которым пользователь может управлять;
  • атрибуты data-*, которые предназначены только для веб-разработчиков для использования в JavaScript и CSS;
  • атрибут hidden теперь может использоваться с любым элементом HTML, чтобы визуально скрыть его от пользователя;
  • атрибуты role и aria-* для помощи пользователям вспомогательных технологий;
  • атрибут spellcheck подсказывает, можно ли проверить орфографию контента;
  • атрибуты translate подсказывают переводчикам, стоит ли переводить контент.

Несколько существующих атрибутов были изменены или удалены в HTML5, вы можете прочитать об этих изменениях в официальном документе W3C об измененных атрибутах HTML5 и об удаленных из HTML5 атрибутах.

Разделы и содержание в HTML5

В то время как в предыдущих версиях HTML структура документа и содержание определялись только через элементы заголовков, в HTML5 разделы могут быть вложенными и иметь собственную иерархию заголовков.

Пример документа HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>HTML4 Outline Example</title>
  </head>
  <body>
    <div class="header">
      <h1>radioprog.ru</h1>
    </div>
    <div class="article">
      <h2>Кратко об HTML5</h2>
      <p>...</p>
      <h3>Doctype</h3>
      <p>...</p>
      <h4>Список возможных doctype</h4>
      <ul>...</ul>
      <h3>Указание кодировки</h3>
      <p>...</p>
    </div>
  </body>
</html>  

Приводит к следующей схеме:

  1. radioprog.ru
    1. Кратко об HTML5
      1. Doctype
        1. Список возможных doctype
    2. Указание кодировки

Пример документа HTML5:

<!doctype html>  
<html>  
  <head>
    <meta charset="UTF-8">  
    <title>HTML5 Outline Example</title>
  </head>
  <body>
    <header>
      <h1>radioprog.ru</h1>
    <header>
    <main role="main">
      <article>
        <header>
          <h1>Кратко об HTML5</h1>
        </header>
        <section>
          <p>...</p>
          <h1>Doctype</h1>
          <p>...</p>
          <h2>Список возможных doctype</h2>
          <ul>...</ul>
          <h1>Указание кодировки</h1>
          <p>...</p>
        </section>
      </article>
    </main>
  </body>
</html>  

Приводит к следующей схеме:

  1. radioprog.ru
    1. Кратко об HTML5
      1. Doctype
        1. Список возможных doctype
      2. Указание кодировки

Как видите, каждая секция имеет свою собственную иерархию, первый заголовок опеределяет, на каком уровне начинается иерархия.

Здесь не упомянуто несколько незначительных изменений в HTML5, но если интересно, то взгляните на оригинальный документ W3C изменений HTML5.


На сайте работает сервис комментирования DISQUS, который позволяет вам оставлять комментарии на множестве сайтов, имея лишь один аккаунт на Disqus.com.


Сообщить об ошибке