Кратко об 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>

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

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>