Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Веб-дизайнеру - Спецификация HTML5 (HTML 5)
Теги в HTML5 — это XML-HTML теги, описывающие структуру веб-страницы, предназначены для того чтобы компьютерная программа (поисковый робот и др.) смогла отличать основной контент страницы от остальных частей страницы (фофрмления и элементов навигации): верха, низа, меню, боковых элементов страницы, повторяющихся (динамических) блоков и т.д. Также идет разделение на уровне основного контента (текста старницы). Сам по себе язык HTML5 является надстройкой к HTML, XML, CSS и др.
<!DOCTYPE html> <html lang="ru"> <!-- Заголовок веб-страницы сайта --> <head> <meta charset="windows-1251" /> <title>Название страницы</title> </head> <!-- Тело веб-страницы сайта --> <body> <header>Верх веб-страницы, "шапка"</header> <nav>Основное меню веб-страницы</nav> <article>Основное тело, статья, материал страницы</article> <aside>Сайдбар (боковая панель)</aside> <footer>Нижняя часть страницы, подвал</footer> </body> </html>Структура веб-сайта
<article> </article> - обрамляют основной контент страницы (статью),
<header> </header> - обрамляют шапку страницы,
<footer> </footer> - обрамляют подвал страницы,
<nav> </nav> - обрамляют основное меню страницы,
<aside> </aside> - обрамляют боковую панель страницы (сайдбар),
<section> </section> - обрамляют повторяющиеся блоки на странице (например комментарии).
Элементы кода шаблона веб-страницы HTML5.
HTML5 на уровне структуры страницы
Рассмотрим список новых тегов HTML5, отвечающих за разделение структуры страницы:
<header> </header> - теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также теги header можно использовать как верхнюю часть тега section.
<nav> </nav> - теги обрамляющие основное меню на сайте.
<article> </article> - теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.
<aside> </aside> - теги обрамляющие сайдбар. Сайдбар - это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки.
<footer> </footer> - теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section
<section> </section> - теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.
HTML5 на уровне текста
Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:
<mark> </mark> - текст находящийся между этими тегами становится "выделенным". Одно из предназначений тегов mark, обрамлять слова в тексте, которые например совпадают со словом введенным пользователем в поисковую строку.
<time> </time> - теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.
<details> </details> - теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).
<summary> </summary> - теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера), находятся между тегами details.
Дополнительные теги языка HTML5
Список новых тегов HTML5, обогощающих язык:
<meter> </meter> - теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.
<progress> </progress> - теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.
<command /> - тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.
<menu> </menu> - между этими тегами помещают тег command.
<output> </output> - теги предназначены для вывода работы скрипта.
<datalist> </datalist> - теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.
<figcaption> </figcaption> - теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..
<figure> </figure> - теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.
<hgroup> </hgroup> - теги предназначены для группировки заголовков h*
<keygen /> - тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.
<ruby> </ruby> - теги обрамляют текст и аннотацию к нему.
<rt> </rt> - теги находятся между тегами ruby, предназначены для обрамления аннотации.
<rp> </rp> - теги предназначены для браузеров которые не поддерживают теги ruby.
<wbr /> - тег указывает браузеру в каком месте переносить слово ("мягкий перенос"), если это слово не вмещается в окно браузера.
Теги HTML5 описывающие новые технологии
В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:
<audio> </audio> - теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).
<video> </video> - теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).
<source /> - тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.
<canvas> </canvas> - теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).
Тег <сanvas>
Тег <сanvas> - это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими. Тег <canvas> создан для того, чтобы заменить собою технологию Flash. С помощью тега <canvas> можно рисовать векторные фигуры (изображения), а с помощью JavaScript, манипулировать данными фигурами, создавая тем самым анимацию (мультфильмы и даже игры) на сайте.
Аудио/Видео
С помощью тега <audio> можно внедрять аудиофайлы на страницу и прослушивать их. Элемент <audio> также создает панель с кнопками проигрывания.
С помощью тега <video> можно внедрять видеофайлы на страницу и просматривать их. Элемент <video> также создает панель с кнопками проигрывания.
API JavaScript
Спецификация HTML5 описывает как должен взаимодействовать язык JavaScript, с элементами страницы через технологию DOM. Также в HTML5, появились свои методы манипулирования объектами, например с помощью JavaScript и этих методов, можно програмно управлять кнопками на панели управления аудио/видео.
Поддержка XML-технологий
В HTML-документ написанный с помощью языка HTML5, отныне можно внедрять технологии связанные с различными XML-форматами, например такими как SVG или MathML.
SVG
SVG - Scalable Vector Graphics (язык разметки масштабируемой векторной графики), является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.
Пример кода рисунка "зеленый круг":
<svg> <circle r="50px" cx="60px" cy="70px" fill="green" /> </svg>Результат:
MathML
MathML - Mathematical Markup Language (язык математической разметки) XML-формат. С помощью данного формата можно описывать различные математические формулы.
Какие теги в HTML5, являются устаревшими?
Устаревшими тегами, в спецификации HTML5 являются:
<applet> и <object> вместо них следует использовать тег embed
<acronym> вместо него следует использовать тег abbr
<bgsound /> вместо него следует использовать тег audio
<dir> вместо него следует использовать тег ul
<frame />, <frameset>, <noframes> вместо них следует использовать тег iframe
<isindex /> вместо него следует использовать связку тегов form и input
<listing> и <xmp> вместо них следует использовать теги pre или code
<nextid>
<noembed>
<plaintext> вместо него следует использовать тег pre
<strike> вместо него следует использовать тег s
Вместо тегов форматирования: <basefont />, <big>, <blink>, <center>, <font>, <marquee>, <multicol>, <nobr>, <spacer>, <tt> и <u>, следует использовать CSS-свойства.
Устаревшие теги не рекомендуется использовать при создании сайтов на HTML5, однако это еще не означает что браузеры их больше не поддерживают, вот например работа не рекомендованного тега подчеркивания
<u> </u>
Новые глобальные атрибуты в HTML5
Глобальные атрибуты - это атрибуты, которые могут быть внедрены в любой тег HTML-документа. В HTML5 появились новые глобальные атрибуты, в описаниях ниже они выделены словом Новый
Рассмотрим названия и описания глобальных атрибутов HTML5:
accesskey=" " - позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
class=" " - позволяет устанавливать имя класса,
contenteditable=" " - позволяет редактировать содержимое элемента Новый,
contextmenu=" " - позволяет создавать контекстное меню для элемента Новый,
dir=" " - позволяет управлять направлением текста,
draggable=" " - позволяет пользователю перетаскивать элемент Новый,
dropzone=" " - позволяет указывать, что делать с элементом при перетаскивании Новый,
hiden=" " - позволяет скрывать элемент Новый,
id=" " - позволяет устанавливать уникальный идентификатор для элемента,
lang=" " - позволяет указывать код языка в содержимом элемента,
spellcheck=" " - позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
style=" " - позволяет создавать стиль для элемента,
tabindex=" " - позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab,
title=" " - позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.
Так как в спецификации HTML5, теги превратились в полноценные объекты, то в этих объектах уже изначально заложено понятие глобального атрибута, даже для тех тегов которые еще не описаны в спецификации.
Новшества в структуре кода HTML5 документа
Структура кода в HTML5 претерпела некоторые изменения, вот некоторые из них:
1. В отличии от предыдущих версий языка, в HTML5 существует лишь один доктайп:
<!DOCTYPE html> его например вы можете увидеть в исходниках страниц данного сайта (не забывайте что перед доктайпом ничего не должно быть, ни пробелов, ни переносов строк и т.д.).
2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
<meta http-equiv="Content-Language" content="ru" /> нужно использовать атрибут lang="ru" в теге <html>:
3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
нужно использовать мета-тег <meta charset="windows-1251" />, без атрибутов http-equiv и content
4. При создании JavaSсript сценария, теперь в тег <script>, внедрять атрибуты type="text/javascript" и language="JavaScript" не нужно.
<script src="script.js"></script>5. При внедрении CSS стилей, теперь в теги <style> и <link />, внедрять атрибут type="text/css" не нужно.
<link rel="stylesheet" href="style.css" /> <style></style>6. Ссылка <а> - строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.
В HTML4 или XHTML1, обрамление ссылками выглядело так:
<h3><a href="url">Заголовок</a></h3> <p><a href="url">Абзац</a></p>Теперь при HTML5, можно делать так:
<a href="url"> <h3>Заголовок</h3> <p>Абзац</p></a>По материалам сайта http://html-5.ru/, http://html-5.ru/uchebnik-html5
Сегодня популярными стали публикации всевозможных учебников и учебных пособий, как стать веб-дизайнером и как научиться самому создавать веб-страницы. Поэтому мы решили отказаться от публикации учебных материалов и книг по веб-дизайну и предлагаем Вам более серьезные материалы - документацию и спецификации, переведенные на русский язык. Материал требует наличия начальных знаний и навыков работы в веб-дизайне, знания кодов и носит исключительно справочный характер. Не для продажи.