HTML5 особенности, подсказки и техники, которые вы должны знать
Новый Doctype
По-прежнему используете старый тип документа (doctype), который невозможно запомнить?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Если так, зачем? Переходите к новому HTML5 типу документа (doctype).
Фактически, вы можете вообще не указывать doctype для HTML5. Однако тип документа требуется для текущих и старых браузеров. Браузеры, не понимающие новый тип документа, интерпретируют разметку в стандартном режиме. Итак, можете смело использовать новый HTML5 doctype.
HTML
<!DOCTYPE html>Элемент figure
Рассмотрим следующую разметку для изображения:
HTML
<img src="path/to/image" alt="о изображении"/>
<p>Image of Mars. </p> К сожалению здесь никак не получится связать изображение с подписью ,которая заключена в тег параграф. HTML5 исправляет это, введя новый элемент <figure>. В сочетании с элементом <figcaption>, мы можем семантически верно ассоциировать изображение с подписью.
HTML
<figure>
<img src="path/to/image" alt="о изображении" />
<figcaption>
<p>Это изображение просто фантастика!</p>
</figcaption>
</figure> <small>
Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. Вообразите: в подвале вашего сайта присутствует заявление об авторских правах, согласно определению HTML5, тег <small> наилучший выбор, чтобы обернуть данное заявление.
Перед вами уменьшенный элемент. Нет больше types для скриптов и ссылок
Вы, возможно, все еще добавляете атрибут type в ваши ссылки и скрипты.
HTML
<link rel="stylesheet" href="/path/to/stylesheet.css"
type="text/css" />
<script type="text/javascript"
src="path/to/script.js"></script>В этом нет необходимости. Оба тега по определению ссылаются на таблицу стилей и, соответственно, на скрипт. Таким образом мы можем удалить атрибут type.
HTML
<link rel="stylesheet" href="/path/to/stylesheet.css" />
<script src="path/to/script.js"> </script> Ставить кавычки или нет?
Вот в чем вопрос. Помните, HTML5 не XHTML. Вам не обязательно заворачивать атрибуты в кавычки, если вы этого не хотите. Если отсутствие кавычек упрощает вам жизнь, можете их не ставить.
HTML
<p class=myClass id=someId> Start the reactor. Определите свое мнение на этот счет. Если вы предпочитаете структурированный документ упрощенному документу, кодируйте с кавычками.
Сделайте ваш контент редактируемым
Новые браузеры имеют изящный атрибут, который можно применять к элементам, под названием contenteditable. Как следует из названия, пользователь получает право редактировать любой текст заключенный внутри элемента, включая элементы потомки. Как вы можете увидеть ниже, благодаря этому атрибуту мы получаем возможность редактировать неупорядоченный список в браузере.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Привет. </li>
<li> Привет мир. </li>
<li> Модернизация? А как же. </li>
</ul>
</body>
</html> Или, как мы изучили ранее, вы можете писать так:
HTML
<ul contenteditable=true> Семантический header и footer
Прошли те дни, когда разметка выглядела примерно так:
HTML
<div id="header">
...
</div>
<div id="footer">
...
</div> Элементы типа div, по своей природе, не семантические, даже, несмотря на то, что вы используете уникальные идентификаторы. В HTML5 мы получили доступ к элементам <header> и <footer>. Приведенная выше разметка может быть заменена на следующую разметку:
HTML
<header>
...
</header>
<footer>
...
</footer> Internet Explorer и HTML5
К сожалению, IE вызывает много нареканий при работе с новыми элементами HTML5.
display inline. Необходимо гарантировать правильное отображение блочных элементов HTML5, для этого понадобится следующий стиль:
CSS
header, footer, article, section, nav, menu, hgroup {
display: block;
} К сожалению, IE проигнорирует данные стили, так как данный браузер не имеет понятия о таких элементах как header и т.д. К счастью, есть простое решение:
CSS
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu"); Как ни странно данный код 'образумит' IE. К слову, Remy Sharp создал ява-скрипт, при помощи которого IE понимает новые элементы. HTML5 shiv расположен на Google-хостинге.
CSS
<!–[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>hgroup
Вообразите, у меня на сайте присутствует заголовок (<h1>), за которым сразу следует подзаголовок (<h2>). Однако HTML4 не дает возможности вставлять подзаголовки без добавления узла в структуру и, соответственно, наша воображаемая разметка будет несемантическая. HTML5 ввела новый элемент hgroup, при помощи которого мы можем сгруппировать данные заголовки, не затрагивая структуру документа.
HTML
<header>
<hgroup>
<h1> Гостевая </h1>
<h2> Для тех кто помнит. </h2>
</hgroup>
</header>Элемент output
Как вы, возможно, догадались, элемент output определяет область, которая показывает какое-нибудь вычисление. Вычисление, как правило, происходит при помощи скрипта.
В качестве простого примера рассмотрите нижеприведенный код: по нажатию кнопки submit, элемент output, при помощи javascript, выведет сумму чисел.
HTML
<form action="" method="get">
<p>
10 + 5 = <output name="sum"></output>
</p>
<button type="submit"> Calculate </button>
</form>
<script>
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
}
else { alert('Your browser is not ready yet.'); }
})();
</script>Не многие браузеры поддерживают данный элемент. В предыдущем примере браузеры, не поддерживающие элемент output, выведут модальное окно с предупреждением. Браузеры, поддерживающие элемент output, выведут сумму чисел.
Элемент output может использовать атрибут for для связи с другим элементом формы.
Источник
Статья не завершена
Комментарии к статье