Валидный HTML-документ

До сих пор мы рассматривали отдельные фрагменты кода HTML. Но HTML-документ (или веб-страница, что означает то же самое) требует определённой структуры для того, чтобы стать валидным.

Почему мы заботимся о валидации HTML-документа?

  • Правильность: валидный документ корректно отображается в браузере.
  • Отладка: некорректный код HTML может вызвать ошибки, сложные для выявления.
  • Поддержка: валидный документ легче обновлять позже, даже кому-то другому.

Доктайп

Первой информацией которую мы пишем, является тип HTML-документа — доктайп.

Подумайте о доктайпе как о версии автомобиля на протяжении многих лет: Ford Fiesta, купленный в 1986 году, был Fiesta 2. Если вы покупаете его сегодня, то это Fiesta 7.

Раньше сосуществовало несколько версий HTML (XHTML и HTML 4.01 были конкурирующими стандартами). В настоящее время нормой является HTML5.

Чтобы сообщить браузеру, что HTML-документ представляет собой HTML5, просто начните свой документ со следующей строки:

<!DOCTYPE html>

Вот и всё. Просто установите и забудьте об этом.

Вы можете задаться вопросом, почему это доктайп HTML5 не упоминает цифру 5. В W3C подумали, что предыдущие определения доктайпа были слишком запутанными и воспользовались возможностью, чтобы упростить его, удалив упоминание о версии HTML.

Элемент <html>

Помимо строки с доктайпом, весь ваш HTML-документ должен располагаться внутри элемента <html>:

<!DOCTYPE html>
<html>
  <!-- Здесь остальная часть вашего кода HTML -->
</html>

<html> технически является предком всех элементов HTML.

<head>

Как атрибуты несут дополнительную информацию для элемента HTML, так и элемент <head> несёт дополнительную информацию для всей веб-страницы.

Например, заголовок страницы (отображается на вкладке) находится в <head>:

<head>
  <title>Мой сказочный блог</title>
</head>

Следующие элементы HTML могут появляться в <head> и только в <head>:

  • <link>
  • <meta>
  • <style>

<body>

В то время как <head> содержит только метаданные, не предназначенные для отображения вообще (за исключением <title>), то элемент <body> это место, где мы пишем всё наше содержимое. Всё внутри <body> будет отображаться в окне браузера.

Полностью валидный HTML-документ

Объединив все эти требования, мы можем написать простой и валидный HTML-документ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MarkSheet</title> <meta name="description" content="Простое руководство по HTML"> </head> <body> <p>Привет, мир!</p> </body> </html>

Если вы просмотрите этот пример в браузере, то увидите, что:

  • «MarkSheet» написано на вкладке браузера;
  • «Привет, мир!» — это единственный текст, отображаемый в окне, потому что это единственное содержимое <body>.

W3C предлагает Markup Validation Service для проверки любого HTML-документа на наличие ошибок и предупреждений.

Перейти к заданиям

Автор: Джереми Томас
Последнее изменение: 01.06.2020