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

05.05.2022

Lesson Progress

0% Complete

До сих пор мы рассматривали отдельные фрагменты кода 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>.

Quizzes

Тест

Full stack designer

Participants 286