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

Введение

В этом уроке мы рассмотрим, как правильно организовать HTML-документ. Структура HTML-документа является основой для правильного отображения веб-страницы в браузере. Понимание этой структуры поможет вам создавать более структурированные и читаемые веб-страницы.

Основные части HTML-документа

HTML-документ состоит из нескольких ключевых частей:

Декларация DOCTYPE
Элемент <html>
Элемент <head>
Элемент <body>

Давайте рассмотрим каждую из них подробнее.

1. Декларация DOCTYPE

Декларация <!DOCTYPE html> указывает браузеру, что документ написан с использованием HTML5. Это необходимо для того, чтобы браузер правильно интерпретировал код. Декларация DOCTYPE всегда должна быть первой строкой в вашем HTML-документе.

<!DOCTYPE html>

2. Элемент `<html>`

Элемент <html> является корневым элементом вашего HTML-документа. Он обрамляет весь контент на странице и указывает браузеру, что это HTML-документ. Внутри <html> располагаются два основных раздела: <head> и <body>.

<html>
  <!-- Содержимое документа -->
</html>

3. Элемент `<head>`

Элемент <head> содержит метаданные о вашем веб-документе. Эти метаданные включают информацию, которая не отображается непосредственно на странице, но необходима для правильного отображения и работы веб-сайта. Внутри <head> обычно располагаются следующие элементы:

<title>: Заголовок документа, который отображается в строке заголовка браузера.
<meta>: Метаданные, такие как описание, ключевые слова и кодировка символов.
<link>: Ссылки на внешние ресурсы, такие как таблицы стилей (CSS).
<script>: Включение внешних или встроенных скриптов jаvascript.

<head>
  <meta charset="UTF-8">
  <title>Название страницы</title>
  <link rel="stylesheet" href="styles.css">
</head>

4. Элемент `<body>`

Элемент <body> содержит весь видимый контент вашей веб-страницы. Все, что будет отображаться на экране пользователя, должно быть заключено в этом элементе. Внутри <body> можно размещать заголовки, абзацы, изображения, ссылки, таблицы, формы и другие элементы.

<body>
  <h1>Добро пожаловать на мой сайт</h1>
  <p>Это мой первый сайт, созданный с использованием HTML.</p>
</body>

Полный пример HTML-документа

Теперь давайте соберем все элементы вместе и посмотрим на полный пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Моя первая веб-страница</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Добро пожаловать на мой сайт</h1>
  <p>Это мой первый сайт, созданный с использованием HTML.</p>
</body>
</html>

В этом примере:

Декларация <!DOCTYPE html> сообщает браузеру, что используется HTML5.
Элемент <html> обрамляет весь документ.
Внутри <head> определены метаданные и заголовок страницы.
Внутри <body> находится видимый контент страницы.

Заключение

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

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