HTML — это язык разметки, которым браузер пользуется, чтобы понять структуру страницы. Он не программирует логику, а описывает содержимое: вот заголовок, вот абзац, вот ссылка. CSS отвечает за внешний вид, JavaScript — за поведение. В этой статье мы разберём устройство HTML-документа и создадим скелет будущего DevBlog.
HTML — не язык программирования
HTML расшифровывается как HyperText Markup Language — язык разметки гипертекста. В нём нет переменных, условий и циклов. Его задача — вложить контент в теги и сообщить браузеру, что перед ним: заголовок, список, форма или изображение.
Сравните роли трёх технологий:
| Технология | Отвечает за | Аналог в Python-проекте |
|---|---|---|
| HTML | Структура и смысл | Модели данных |
| CSS | Внешний вид | Шаблоны/темы |
| JavaScript | Интерактивность | Клиентская логика |
Структура HTML-документа
Каждый HTML-файл начинается с обязательного объявления типа документа и нескольких корневых элементов:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevBlog — заметки Python-разработчика</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый HTML-файл.</p>
</body>
</html>
Разберём каждую часть:
<!DOCTYPE html>— сообщает браузеру, что документ написан по стандарту HTML5.<html lang="ru">— корневой элемент; атрибутlangпомогает поисковикам и экранным читалкам.<head>— мета-информация о странице: кодировка, заголовок вкладки, подключение CSS.<meta charset="UTF-8">— кодировка; без неё кириллица превратится в «кракозябры».<meta name="viewport" ...>— масштаб на мобильных устройствах.<title>— текст на вкладке браузера и в поисковой выдаче.<body>— всё, что видит пользователь.
Теги, элементы и атрибуты
Тег — пара угловых скобок с именем: <p>. Большинство тегов парные: открывающий <p> и закрывающий </p>. Некоторые самозакрывающиеся: <br />, <img />.
Элемент — тег вместе с содержимым: <p>Текст абзаца</p>.
Атрибут — дополнительная информация внутри открывающего тега:
<a href="https://python.org" target="_blank">Сайт Python</a>
Здесь href и target — атрибуты тега <a>. Атрибуты всегда записываются в формате имя="значение".
Вложенность
HTML-документ — это дерево. Элементы вкладываются друг в друга, и важно соблюдать порядок закрытия тегов:
<!-- Правильно -->
<div>
<p><strong>Жирный текст</strong> в абзаце.</p>
</div>
<!-- Неправильно — теги пересекаются -->
<div>
<p><strong>Жирный</div>
</strong></p>
Браузеры умеют исправлять ошибки разметки, но поведение при этом непредсказуемо. Пишите чистый вложенный HTML.
Скелет DevBlog
Создайте файл devblog/index.html — это будет главная страница блога:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevBlog</title>
<!-- Сюда позже добавим link rel="stylesheet" -->
</head>
<body>
<!-- Шапка сайта -->
<header>
<h1>DevBlog</h1>
<p>Заметки Python-разработчика</p>
</header>
<!-- Основной контент -->
<main>
<article>
<h2>Первый пост</h2>
<p>Краткое описание поста.</p>
<a href="/posts/first.html">Читать далее</a>
</article>
</main>
<!-- Подвал -->
<footer>
<p>© 2025 DevBlog</p>
</footer>
</body>
</html>
Ключевой момент: теги <header>, <main>, <footer> — семантические. Они не меняют внешний вид, но помогают браузеру, поисковику и читалкам понять роль каждого блока.
Что дальше
Откройте index.html прямо в браузере — перетащите файл на вкладку или нажмите Ctrl+O. Вы увидите неоформленный, но рабочий HTML. В следующих статьях мы добавим теги для разметки контента и подключим CSS.
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!