HTML — каркас любой веб-страницы
HTML — это язык разметки, не программирования. Не считает, не сравнивает — описывает структуру: «здесь заголовок, здесь параграф, здесь картинка». Любой сайт = HTML + CSS (внешний вид) + JavaScript (поведение).
Тег и его части
Тег:
Открывающий + содержимое + закрывающий. Самозакрывающиеся (без содержимого): <img src="..." />, <br />, <input ... />. Атрибуты добавляют параметры — например
Регистр не важен, но конвенция — всё строчными.
Скелет документа
Любая HTML-страница начинается с <!DOCTYPE html> (говорит браузеру «это HTML5»). Дальше <html> с двумя детьми: <head> (служебное — title, мета, шрифты, стили) и <body> (всё, что видит пользователь). В head обычно: charset, viewport, title (то что в табе браузера), link (стили, шрифты).
Главные структурные теги
<div> — общий «блочный» контейнер без смысла, для группировки и стилизации. <span> — то же, но строчный (внутри текста). Лучше: семантические теги, у которых ЕСТЬ смысл — <header>, <nav>, <main>, <section>, <article>, <footer>. Для скринридеров и SEO они важнее <div>.
Тексты, ссылки, картинки
Заголовки: <h1> (главный, один на страницу), <h2>-<h6> (подзаголовки, иерархия как в книге). Параграф: <p>. Жирный: <strong>, курсив: <em>. Ссылка: <a href="...">. Картинка:
alt обязателен (для скринридеров и когда картинка не загрузилась). Списки: <ul><li>...</li></ul> (маркированный) или <ol> (нумерованный).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая страница</title>
</head>
<body>
<header>
<h1>EvolCode</h1>
<nav>
<a href="#about">О нас</a>
<a href="#contact">Контакты</a>
</nav>
</header>
<main>
<section id="about">
<h2>Что мы делаем</h2>
<p>
Учим вайбкодеров <strong>понимать</strong> код,
который пишет ИИ.
</p>
<img src="/hero.jpg" alt="Студент с ноутбуком" />
</section>
<section>
<h2>Преимущества</h2>
<ul>
<li>Объяснения в контексте твоего файла</li>
<li>Без воды, по делу</li>
<li>Активное обучение, а не лекции</li>
</ul>
</section>
<article>
<h2>Свежее</h2>
<p>Новый трек по Claude уже доступен.</p>
</article>
</main>
<footer id="contact">
<p>© 2026 EvolCode. <a href="mailto:hello@evolcode.app">Написать</a></p>
</footer>
</body>
</html>Минимальная страница со всеми ключевыми блоками