Три ключевых тега, с которых реально всё начинается, — это <html>, <head> и <body>. Разберём, зачем они нужны и как их правильно использовать, на простых примерах.
Что такое <html>
Тег <html> — это «обёртка» всей страницы. Он говорит браузеру: «Всё, что внутри, — это HTML‑документ». Это корневой элемент: он охватывает всё содержимое страницы от начала до конца.
У тега <html> часто добавляют атрибут lang, чтобы указать язык страницы. Это полезно и для браузера, и для поисковиков, и для скринридеров (программ, которые читают страницу вслух).
Пример:
<!DOCTYPE html> <html lang="ru"> <!-- весь остальной контент страницы --> </html>
<!DOCTYPE html>— не тег, а декларация. Она сообщает браузеру, что используется современный стандарт HTML5. Её всегда ставят первой строкой.lang="ru"— указывает, что язык контента — русский.
Что находится внутри <head>
Содержимое тега <head> не видно напрямую на странице. Там хранится техническая информация: заголовок вкладки, кодировка, ссылки на стили, метаданные и скрипты, которые нужны для работы страницы.
Основные вещи, которые обычно кладут в <head>:
<meta charset="UTF-8">— кодировка. Без неё вместо русских букв могут появиться «кракозябры».<title>— заголовок страницы, который виден во вкладке браузера.- Ссылки на CSS (
<link>), скрипты (<script>), иконки сайта и т. д.
Пример:
<head> <meta charset="UTF-8"> <title>Моя первая страница</title> <link rel="stylesheet" href="style.css"> </head>
Важно: в <head> нельзя размещать видимый контент (текст, картинки, кнопки). Если туда случайно положить обычный текст, браузер его либо проигнорирует, либо покажет не там, где ты ожидаешь.
Что находится внутри <body>
В теге <body> находится всё, что пользователь реально видит на странице: текст, картинки, кнопки, формы, видео и т. п. Это «рабочая зона» документа.
Пример:
<body> <h1>Привет, мир!</h1> <p>Это мой первый абзац на HTML.</p> <img src="photo.jpg" alt="Описание картинки"> <button>Нажми меня</button> </body>
Именно сюда ты будешь добавлять основной контент страницы.
Полный пример простой страницы
Соберём всё вместе, чтобы было видно, как эти три тега работают в связке:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример базовой разметки</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } h1 { color: #333; } p { color: #555; } </style> </head> <body> <h1>Добро пожаловать</h1> <p>Это пример простой HTML‑страницы.</p> <ul> <li>Пункт списка 1</li> <li>Пункт списка 2</li> <li>Пункт списка 3</li> </ul> <a href="https://example.com">Ссылка на пример</a> </body> </html>
Что здесь происходит:
<!DOCTYPE html>говорит браузеру, что это HTML5.<html lang="ru">задаёт язык документа.- В
<head>мы указали кодировку, заголовок вкладки и добавили немного стилей прямо в HTML (для простоты примера). - В
<body>разместили видимые элементы: заголовок, абзац, список и ссылку.
Загрузка...