Студия продвижения сайтов / Справочник HTML /

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

HTML (HyperText Markup Language) является основным языком разметки для создания веб-страниц. HTML-документ имеет четкую структуру, состоящую из различных элементов, которые обеспечивают правильное отображение и функциональность страницы. Мы рассмотрим три ключевых элемента структуры HTML-документа: html, head, и body.

Основная структура HTML-документа:

<!DOCTYPE html>
<html>
<head>
    <!-- Секция head -->
</head>
<body>
    <!-- Секция body -->
</body>
</html>

Элемент HTML

Элемент html является корневым элементом документа и содержит всю разметку страницы. Все другие элементы (включая head и body) находятся внутри html.

Пример:

<html>
    <!-- Все остальные элементы здесь -->
</html>

Элемент HEAD

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

Пример:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя веб-страница</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

<meta charset="UTF-8"> — Устанавливает кодировку символов для страницы.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Обеспечивает адаптивность страницы на мобильных устройствах.
<title> — Определяет заголовок страницы, который отображается на вкладке браузера.
<link> — Подключает внешний файл стилей CSS.
<script> — Подключает внешний JavaScript-файл.

Элемент body

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

Пример:

<body>
    <h1>Добро пожаловать на мою веб-страницу</h1>
    <p>Это пример параграфа текста.</p>
    <img src="image.jpg" alt="Пример изображения">
    <a href="https://example.com">Перейти на Example.com</a>
</body>

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