На сайте есть несколько отдельных статей о новинках в HTML5. Здесь будут собраны общие новости.
<!DOCTYPE html>
Регистр не важен. Даже можно обойтись без доктайпа.
<meta charset="UTF-8">
Данная кодировка должна стать по умолчанию.
Раньше использовалось:
<script type="text/javascript" src="myfile.js"></script>
Можно проще:
<script src="myfile.js></script>
Это работало и раньше. Но тогда был еще и VBScript.
Аналогично для CSS есть укороченный вариант:
<link rel="stylesheet" href="myfile.css">
Canvas - замена плагинов типа Flash и Silverlight. Это среда для создания динамических картинок.
На сайте есть несколько примеров на эту тему. Начать с базового знакомства.
Чтобы встроить аудиофайл в документ
<audio src="music.mp3"></audio>
Атрибут autoplay будет запускать музыку автоматически
<audio src="music.mp3" autoplay></audio>
А если еще хотите, чтобы музыка играла без остановки бесконечно, то используйте loop
<audio src="music.mp3" autoplay loop></audio>
Можно добавить элементы управления при проигрывании музыки (игра, стоп, пауза)
<audio src="music.mp3" controls></audio>
Вы можете не пользоваться встроенными элементами управления, а создать свои собственные и через JavaScript взаимодействовать с Audio API
<audio id="player" src="music.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1>Громче</button>
<button onclick="document.getElementById('player').valign-=0.1>Тише</button>
</div>
У тега есть атрибут preload с тремя возможными значениями: none, auto, metadata. используя конструкцию preload="none" вы сообщаете браузеру, что подгружать аудиофайл заранее не нужно.
Браузеры поддерживают разные форматы файлов. Чтобы избежать ситуации, когда в одном браузере файл не проигрывается, можно продублировать все файлы в разных форматах и указать их с помощью элемента source.
<audio controls>
<source src="music.ogg">
<source src="music.mp3">
</audio>
Также вы можете указать MIME-тип для файла
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio.mpeg">
</audio>
Элемент video похож на audio. У него есть необязательные атрибуты autoplay, loop, preload. Можно указать расположение файла через атрибут src или поместить внутри тега видео элемент source. Также можете отобразить интерфейс с помощью атрибута controls или создать свои управляющие элементы. Еще нужно позаботиться о размерах видео через атрибуты ширины и высоты.
<video src="movie.mp4" controls width="360" height="240"></video>
Можно добавить атрибут poster="someimage.jpg" для вывода изображения к видеоролику.
Можно указать альтернативные форматы.
<video controls width="360" height="240" poster="placeholder.jpg">
<source src="movie.ogv" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>
Атрибут placeholder добавляет текст-подсказку в текстовое поле, который исчезает при получении фокуса и вводе символов.
<input type="text" placeholder="Введите имя кота">
Чтобы значительно ускорить ввод данных, установите курсор в первое поле формы при загрузке страницы. Раньше для решения задачи использовался JavaScript. Теперь это заложено в спецификация HTML5. Добавьте атрибут autofocus к любому полю формы.
<label for="name">Name</label>
<input type="text" name="name" autofocus id="name">
Конструкции вида autofocus="true" или другие варианты не нужны. Если атрибут autofocus присутствует, то браузер применяет его. На странице должен быть только один атрибут autofocus. Если таких элементов будет несколько, браузер размещает курсор в последнем поле автофокуса.
Атрибут работает не только для input, но и на других полях формы - textarea, select.
Чтобы объявить поле формы обязательным для заполнения, следует добавить в соответствующий элемент атрибут required. Например, добавим атрибут required в поля имени, фамилии и электронной почты.
Без использования JavaScript вы получаете поддержку проверки данных. Причем, введённые данные должны быть похожи на электронный адрес для второго поля. Простой набор символов не прокатить. Проверьте самостоятельно. Оставьте сначала оба поля пустыми и нажмите на кнопку, чтобы увидеть результат. Далее комбинируйте различные сочетания.
Атрибут pattern позволяет задать регулярное выражение, по которому будут проверяться данные пользователя для поля с паролем. Использование атрибута с регулярным выражением требует, чтобы поле содержало не менее 8 символов, среди которых присутствуют хотя бы одна цифра, буква верхнего регистра и один специальный символ.
<input id="password" type="password" name="password" value=""
autocomplete="off" placeholder="8-10 characters"
pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\W]).*$"
title="Password must be 8 or more characters with at Least one number, an uppercase Letter, and one speciaL
character" />
Позволяет отключить автозаполнение. По умолчание оно включено. Для отключения off, для включения - on
<form action="send.php" autocomplete="off">
Также можно использовать комбинацию, когда заполнение включено в форме, но отключено для какого-нибудь текстового поля внутри этой формы.
Тег meter отображает рисунок, на котором общее значение представлено в диапазоне. Необходимо указать минимум min и максимум max, а также промежуточное значение value. Многие думают, что этот элемент формы с атрибутами похож на некоторые инпуты числового типа, однако в нем нет атрибута name, и он не отправляется на сервер.
По умолчанию meter задает минимум в 0 или приравнивает его к value, зависит от того, что меньше. Максимальное значение по умолчанию равно 1 или value, зависит от того, что больше. Используйте meter, когда есть минимальное, максимальное и оптимальные значения, а само значение может увеличиваться и уменьшаться. Например, оценка за тест. Если указать эти три атрибута, то в браузерах с поддержкой meter отобразится зеленая полоска.
С помощью meter и значений low, high и optimum можно показывать, когда значение находится в нужном диапазоне. Если value находится в промежутке между min и low, метр будет желтым. Если между low и high, полоска будет зеленая. Если value в промежутке high и max, полоса будет красной. На данный момент значение optimum не имеет визуального эффекта.
Тег meter нельзя использовать для индикации прогресса. Для этого есть тег progress, с помощью которого можно выразить прогресс в процентах.
Задача output – принимать и отображать результат вычислений. Тег output необходимо задействовать в тех случаях, когда пользователь может видеть значение, но не может напрямую манипулировать им, а также когда значение можно изменять из другого поля формы. Пример – расчет общей стоимости товара с доставкой и сборами в корзине.
Значение output хранится между открывающим и закрывающим тегом. Обновлять значение можно с помощью JS. У output есть атрибут for, который используется для отсылки к полям формы по ID, чьи значения используются для вычисления output.
Атрибуты name и value тега output передаются вместе с формой.
Тег keygen используется для создания пары из открытого и закрытого ключа, а также для передачи открытого ключа из пары. Opera, Chrome, Safari, Android и Firefox полностью поддерживают этот элемент и отображают его в виде выпадающего списка, где можно выбрать длину ключей. Хотя во всех браузерах разные опции.
Тег keygen представил также два новых атрибута: challenge, который задает строку для передачи с открытым ключом, а также keytype, задающий тип ключа. На момент написания статьи keytype поддерживает только значение rsa, распространенный алгоритм криптографического шифрования с открытым ключом.
В HTML5 один optgroup можно вставлять в другой, что удобно использовать для создания многоуровневых меню select.
В HTML4 размеры textarea необходимо было задавать через rows и cols атрибуты. В HTML5 эти атрибуты больше не нужны. Ширину и высоту текстовой области теперь нужно задавать через CSS.
В HTML5 появился атрибут wrap. Атрибут применяется к textarea и принимает значения soft (по умолчанию) и hard. Со значением soft текст передается без разрывов строк, сохраняются только разрывы, которые пользователь поставил сам. Со значением hard текст передается со всеми разрывами строк, которые могут появиться из-за размера поля. Если wrap задан в hard, необходимо указать атрибут cols.
Не используйте больше у себя: frame, frameset, noframes.
acronym - используйте вместо него abbr. Хотя на самом деле термины акроним и аббревиатура различаются, но для веба используется один тег.
font, big, center, strike - используйте вместо них CSS (font-size, text-align).
Также считаются устаревшими некоторые атрибуты в тегах - bgcolor, cellspacing, cellpadding, valign. Используйте CSS.
Родственник big - элемент small решили не считать устаревшим. У него поменяли значение - раньше это просто текст, отображаемый шрифтом маленького размера. Теперь - это то, что набирается мелким шрифтом. Примеры - юридические примечания, условия использования. По сути одно и тоже, только раньше было как оформление, сейчас - как элемент семантики.
Также оставили элемент b. Раньше он отображал текст полужирным шрифтом. Теперь - чтобы текст "стилистически" отличался от обычного текста, не придавая дополнительной важности для семантики. Если текст важен, то его следует выделять элементом strong.
Элемент i раньше выделял текст курсивом. Теперь - это текст, произнесенный другим голосом или с другим настроением, не предполагая усиления важности. Для реального усиления используйте em.
Не стоит слишком заморачиваться по поводу различий - используйте, что удобно.
Немного изменилось описание тега cite, который отвечал за цитату и выводил текст курсивом. Разница столь ничтожна, что можно не обращать внимания и использовать везде, если вам нужно привести цитату.