Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между тегами <body> и </body>. Здесь размещаются большинство элементов html.
Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML5, их предназначение и использование.
Как правило, одним из первых элементов html-документа является элемент head, задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.
Для установки заголовка документа, который отображается на вкладке браузера, используется элемент title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элемент title</title> </head> <body> <p>Содержание документа HTML5</p> </body> </html>
Элемент base
позволяет указать базовый адрес, относительно которого устанавливаются другие адреса, используемые в документе:
<!DOCTYPE html> <html> <head> <base href="content/"> <meta charset="utf-8"> <title>Элемент base</title> </head> <body> <a href="newpage.html">Перейти</a> </body> </html>
Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл newpage.html
Можно также указывать полный адрес:
<base href="http://www.microsoft.com/">
В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html
Элемент meta определяет метаданные документа.
Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой кодировкой является utf-8:
<meta charset="utf-8">
При этом надо помнить, что указанная элементе meta
кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет
указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM.
Например, выбор кодировки в Notepad++:
Элемент meta
также имеет два атрибута: name
и content. Атрибут name
содержит имя метаданных, а content
- их значение.
По умолчанию в HTML определены пять типов метаданных:
application name: название веб-приложения, частью которого является данный документ
author: автор документа
description: краткое описание документа
generator: название программы, которая сгенерировала данный документ
keywords: ключевые слова документа
Надо отметить, что наиболее актуальным является тип description
. Его значение поисковики часто используют в качестве аннотации к документу
в поисковой выдаче.
Добавим в документ ряд элементов meta:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="content/"> <title>Элемент title</title> <meta name="description" content="Первый документ HTML5"> <meta name="author" content="Bill Gates"> </head> <body> <a href="newpage.html">Содержание документа HTML5</a> </body> </html>