Документы html5

Спецификация HTML5 представляет собой совместную эволюцию и описание трех технологий: HTML, CSS3 и JavaScript. HTML обеспечивает структурные элементы, CSS фокусируется на том, как превратить эту структуру в нечто визуально привлекательное и удобное в использовании, а JavaScript предлагает мощь, необходимую для обеспечения функциональности и построения полноценных веб-приложений.

Структура документа

Основной частью документа является его структура. Она определяет элементы для размещения статического или динамического содержимого и служит основной платформой для приложений. Структура должна обеспечивать форму, порядок и гибкость, и она должна быть прочной как фундамент здания. К структуре документов HTML предъявляются строгие требования. Все части документы отделены друг от друга, каждая из них объявлена и заключена в определенные теги. Следующий листинг определяет структуру документа.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="description" content="This is an HTML5 example">

<meta name="keywords" content="HTML5, CSS3, JavaScript">

<title>This text is the title of the document</title>

<link rel="stylesheet" href="mystyles.css">

</head>

<body>

Тело документа

</body>

</html>

Элемент <doctype> указывает тип создаваемого нами документа. Эта строка должна идти самой первой в файле html, и перед ней не должно быть ни пробелов, ни пустых строк. Она активирует стандартный режим браузеров для интерпретации HTML5, когда это возможно (или игнорирует его в противном случае).

После объявления типа документа мы переходим к построению древовидной структуры HTML. Как всегда, в корне дерева находится элемент <html>. Внутри этого элемента помещается весь остальной код HTML. Единственный атрибут, указания которого требует HTML5, - это атрибут lang открывающего тега <html>. Он определяет язык содержимого в создаваемом нами документе. Для английского языка его значение равно “en”, для русского - “ru”. HTML5 чрезвычайно гибкий инструмент. Элемент <html> можно использовать без атрибутов или вообще не добавлять в код. Но в целях обеспечения совместимости, а также с учетом парсирования, рекомендуется следовать некоторым базовым правилам.

Элемент <head>. HTML-код, который добавляется между тегами <html>, делится на два основных раздела: первый представляет собой «голову», а второй – «тело» кода. Сам тег по сравнению с предыдущими версиями языка не изменился, т.е. его назначение остается таким же. Внутри тега <head> мы:

• опеределяем заголовок веб-страницы;

• объявляем кодировку символов;

• добавляем общую информацию о документе;

• приводим ссылки на внешние файлы, содержащие стили, сценарии.

За исключением заголовка, вся остальная информация, содержащаяся между тегами <head> и </head>, на экране обычно не отображается.

Содержимое видимой части документа описывается внутри тега <body>. Данный тег также не изменился по сравнению с предыдущими версиями HTML.

«Голова» документа. Здесь было добавлено несколько изменений и новшеств, среди которых тег <meta>. В документе <html> может быть несколько тегов <meta>, содержащих общие объявления, однако эта информация не отображается в окне браузера. Она используется только поисковыми системами и устройствами, которым требуются предварительные данные о нашем документе. Атрибут charset определяет кодировку символов, т.е. указывает на то, каким образом текст должен отображаться на экране. Атрибут name внутри тега <meta> определяет тип тега, а в атрибуте content объявляется его значение.

В HTML5 одинарные теги не обязательно должны иметь закрывающий слеш, но рекомендуется ставить его для совместимости, например:

<meta charset="utf-8" />

<title>. Как и раньше, используется для определения заголовка документа, отображаемого в заголовке окна.

<link>. Используется для подключения к документу стилей, сценариев из внешних файлов. В HTML5 избавились от необходимости указывать тип подключаемой таблицы стилей, таким образом, атрибут type больше не используется. Теперь для внедрения файла со стилями достаточно двух атрибутов: rel и href. Атрибут rel определяет отношение – чем для нашего документа является подключаемый файл, атрибут href – содержит адрес ресурса в сети.