Войти
» » » Нововведения в структуру документа HTML 5

Нововведения в структуру документа HTML 5

Нововведения в структуру документа HTML 5

С введением в пользование HTML 5, оформление документа html претерпело некоторые изменения, вот основные из них:

- был убран формат синтаксиса и теперь доктайп может быть только <!DOCTYPE html>, теперь любой документ может начинаться только с него. Что значительно упростило работу с html.

- проще стало указывать язык документа, если раньше нужно было прописывать <meta http-equiv="content-language" content="ru" />, то теперь достаточно <html lang="ru">

- уменьшилась строка с указанием кодировки сайта, если раньше писали <meta http-equiv="content-type" content="text/html; charset=utf-8" />, то теперь достаточно <meta charset="utf-8" />, без атрибутов http-equiv и content.

- теперь не нужно при создании JavaSсript сценария внедрять атрибуты type="text/jаvascript" и language="jаvascript", а достаточно указать адрес скрипта <script src="script.js"></script>

- при внедрении CSS стилей пропала надобность атрибутов type="text/css", а необходим только адрес файла стилей <link rel="stylesheet" href="style.css" />

- Ссылка <а> - теперь может быть блочным значением и даже включать в себе несколько блоков.

Так же в новую структуру были добавлены и новые теги, которые можно разделить на три части в зависимости от их предназначения:

Теги семантического описания структуры страницы:

Эти теги предназначены для поисковых систем и помогают роботам определить в каком месте сайта что расположено и лучше проиндексировать. Являются очень важными тегами для продвижения сайта и если вы хотите иметь большую посещаемость, то их необходимо применять по всему сайту.

<header> </header> — в этот тег заключается шапка страницы.

<nav> </nav> — в этот тег нужно поместить главное меню сайта со всеми разделами и подразделами.

<article> </article> — в него заключается основной контент страницы, то есть статья, новость или сообщение форума.

<aside> </aside> — боковая панель сайта содержащая дополнительную информацию: последние комментарии, виджеты, список последних записей, контакты, социальные кнопки, рекламу.

<footer> </footer> — подвал сайта, как правило содержит имя автора, контактную информацию, счётчики, копирайты и тому подобную информацию.

<section> </section> — теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

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

Теперь рассмотрим, какие семантические теги и для чего можно использовать в самом тексте:

<mark> </mark> — выделяет текст жирным шрифтом, текст выделенный этим тегом поисковые системы будут считать более важным на странице.

<time> </time> — указывают дату и время, устанавливаются в формате ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

<details> </details> — работает на подобии спойлера, в них можно помещать скрытую информацию.

<summary> </summary> — эти теги обрамляют заголовок скрытого текста, должны находиться между тегами <details> </details>.

Дополнительные теги:

<meter> </meter> — теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

<progress> </progress> — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

<command /> — тег должен находиться между тегами menu, используется при создании сценариев на jаvascript.

<menu> </menu> — между этими тегами помещают тег command.

<output> </output> — теги предназначены для вывода работы скрипта.

<datalist> </datalist> — теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

<figcaption> </figcaption> — теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..

<figure> </figure> — теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

<hgroup> </hgroup> — теги предназначены для группировки заголовков h1, h2, h3, h4, h5, h6.

<keygen /> — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<ruby> </ruby> — теги обрамляют текст и аннотацию к нему, работают не во всех браузерах, можно заменить тегами <rp> </rp>

<rt> </rt> — теги находятся между тегами ruby, предназначены для обрамления аннотации.

<rp> </rp> — теги предназначены для браузеров которые не поддерживают теги ruby.

<wbr /> — тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Новые технологии воплощённые в жизнь благодаря HTML 5, с их помощью можно просматривать на сайте различные элементы (аудио и видео файлы, игры, приложения) без использования плагинов и расширений браузера:

<audio> </audio> — теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

<video> </video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

<source /> — тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.

<canvas> </canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования jаvascript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию, но это пока только в теории…


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas