Основы HTML — How to Code

Что такое HTML?

HTML (HyperText Markup Language) — это язык гипертекстовой разметки. Он отвечает за структуру веб-страницы: где будет заголовок, где абзац, где картинка, а где ссылка.

Представь себе дом: HTML — это его каркас (стены, окна, двери), а CSS — это ремонт и дизайн (обои, краска, мебель). Без каркаса дизайн просто не на чем держать.

📖 Интересный факт: HTML был создан в 1991 году Тимом Бернерсом-Ли. Первая версия имела всего 18 тегов. Сегодня в HTML5 их более 100!

Базовая структура HTML-документа

Любой HTML-файл начинается с этой "скелетной" разметки:

<!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>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт.</p>
</body>
</html>

💡 Что здесь происходит?

<!DOCTYPE html> — говорит браузеру, что это HTML5
<html> — корневой элемент всей страницы
<head> — служебная информация (не видна на странице)
<meta charset="UTF-8"> — поддержка русских букв и спецсимволов
<title> — заголовок вкладки браузера
<body> — всё, что внутри, видит пользователь

Теги и атрибуты

Тег — это специальная команда, заключенная в угловые скобки. Большинство тегов парные (есть открывающий и закрывающий). Атрибуты — это дополнительные параметры тегов, которые уточняют их поведение.

<тег атрибут="значение">содержимое</тег>

<a href="https://google.com" target="_blank">Ссылка на Google</a>
<img src="photo.jpg" alt="Мое фото" width="300">

🔥 Важно: Некоторые теги являются одиночными (не имеют закрывающей части): <img>, <br> (перенос строки), <hr> (горизонтальная линия).

Основные теги HTML

Вот таблица самых важных тегов, которые нужно знать новичку:

Тег	Назначение	Пример
📌 Текстовые элементы
`<h1>...</h6>`	Заголовки (от самого важного до самого маленького)	`<h1>Заголовок сайта</h1>`
`<p>`	Абзац текста	`<p>Это абзац.</p>`
`<br>`	Перенос строки (без отступа)	`Строка 1<br>Строка 2`
`<hr>`	Горизонтальная разделительная линия	`<hr>`
🔗 Ссылки и изображения
`<a>`	Ссылка	`<a href="page.html">Текст ссылки</a>`
`<img>`	Изображение	`<img src="photo.jpg" alt="Описание">`
📋 Списки
`<ul>`	Маркированный список (с точками)	`<ul><li>Пункт 1</li></ul>`
`<ol>`	Нумерованный список (с цифрами)	`<ol><li>Пункт 1</li></ol>`
`<li>`	Элемент списка	`<li>Текст пункта</li>`
📦 Контейнеры и структура
`<div>`	Универсальный блочный контейнер	`<div class="wrapper">...</div>`
`<span>`	Универсальный строчный контейнер	`<span class="bold">Текст</span>`
🏗️ Семантические теги (HTML5)
`<header>`	Шапка сайта	`<header>Логотип + меню</header>`
`<nav>`	Навигационное меню	`<nav><a href="/">Главная</a></nav>`
`<main>`	Основное содержание страницы	`<main>...</main>`
`<section>`	Логический раздел страницы	`<section>Блок с новостями</section>`
`<article>`	Самостоятельный контент (статья, пост)	`<article>...</article>`
`<aside>`	Боковая панель (сайдбар)	`<aside>Реклама, виджеты</aside>`
`<footer>`	Подвал сайта	`<footer>Контакты, копирайт</footer>`
🎮 Формы и взаимодействие
`<form>`	Форма для отправки данных	`<form action="send.php">...</form>`
`<input>`	Поле ввода (текст, пароль, кнопка и т.д.)	`<input type="text" placeholder="Имя">`
`<button>`	Кнопка	`<button>Нажми меня</button>`
`<textarea>`	Многострочное поле для текста	`<textarea rows="5"></textarea>`

Пример простой веб-страницы

Вот как выглядит полноценная HTML-страница с использованием разных тегов:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <header>
        <h1>Добро пожаловать на мой сайт!</h1>
        <nav>
            <a href="#">Главная</a> | <a href="#">О нас</a> | <a href="#">Контакты</a>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Обо мне</h2>
            <p>Меня зовут Иван, и я учусь создавать сайты.</p>
            <img src="my-photo.jpg" alt="Мое фото" width="200">
        </section>
        
        <section>
            <h2>Мои любимые языки программирования</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>© 2026 Мой сайт</p>
    </footer>
</body>
</html>

Специальные символы (мнемоники)

Некоторые символы нельзя просто так написать в HTML, так как они используются в синтаксисе. Для них есть специальные коды:

Символ	HTML-код	Описание
<	`<`	Меньше (открывающая скобка)
>	`>`	Больше (закрывающая скобка)
&	`&`	Амперсанд
©	`©`	Знак авторского права
®	`®`	Зарегистрированная торговая марка
	` `	Неразрывный пробел

💎 Главные советы для начинающего верстальщика:

Всегда закрывай теги — незакрытые теги ломают верстку
Соблюдай вложенность — не путай порядок открытия и закрытия тегов
Используй семантические теги вместо универсальных <div> — это улучшает SEO и доступность
Добавляй атрибут alt к картинкам — это важно для слепых пользователей и поисковиков
Проверяй код на валидаторе W3C — это бесплатно и очень полезно