HTML (HyperText Markup Language) — язык разметки гипертекста, который описывает структуру веб-страницы.
HTML не управляет цветами, размерами или шрифтами — он отвечает только за смысл и организацию информации.
HTML говорит браузеру: «что это такое», а не «как это должно выглядеть».
Пример:
<h1>Новости компании</h1>
<p>Мы открыли новый филиал в Казани.</p>
<a href="news.html">Подробнее</a>
Здесь браузер видит:
<h1> — главный заголовок;<p> — абзац текста;<a> — ссылка на другую страницу.Браузер сам решает, как это показать (по умолчанию <h1> — крупнее, <a> — синим цветом и подчёркнута).
То есть:
HTML — что есть на странице,
CSS — как это выглядит,
JavaScript — что с этим можно делать.
Любая страница начинается с базового шаблона:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Название страницы</title>
</head>
<body>
<!-- Основное содержимое -->
</body>
</html>
Описание частей:
| Элемент | Назначение |
|---|---|
<!DOCTYPE html> |
сообщает браузеру, что это документ в стандарте HTML5 |
<html lang="ru"> |
корневой элемент, определяет язык документа |
<head> |
техническая информация: кодировка, заголовок, мета-теги |
<body> |
всё видимое пользователю содержимое |
<head> обычно размещают:<meta charset="UTF-8">
<title>Новости компании</title>
<meta name="description" content="Новости компании: события, достижения, обновления.">
Почему это важно:
<meta charset> предотвращает проблемы с кодировкой.<title> отображается в вкладке браузера и влияет на SEO.<meta description> помогает поисковику показывать краткое описание страницы.HTML5 ввёл семантические теги, которые позволяют делать структуру осмысленной:
| Тег | Назначение | Пример |
|---|---|---|
<header> |
Шапка страницы или блока | <header><h1>Мой блог</h1></header> |
<nav> |
Навигационное меню | <nav><a href="#">Главная</a></nav> |
<main> |
Основной контент страницы (один на странице) | <main>...</main> |
<section> |
Раздел логически связанного контента | <section><h2>Новости</h2></section> |
<article> |
Независимая единица контента (новость, пост, карточка) | <article>...</article> |
<aside> |
Боковая информация (реклама, ссылки, факты) | <aside>...</aside> |
<footer> |
Подвал страницы или блока | <footer>© 2025 Мой сайт</footer> |
<body>
<header>
<h1>Газета “IT-сфера”</h1>
<nav>
<a href="#">Главная</a>
<a href="#">Новости</a>
<a href="#">Контакты</a>
</nav>
</header>
<main>
<section>
<h2>Главные новости</h2>
<article>
<h3>Открыт новый филиал компании</h3>
<p>Филиал открыт в Казани и уже принимает клиентов.</p>
</article>
</section>
</main>
<footer>
<p>© 2025 Газета “IT-сфера”</p>
</footer>
</body>
Даже без CSS человек понимает:
🟥 Плохо:
<div class="block">
<div class="title">О компании</div>
<div class="text">Мы работаем с 2010 года.</div>
</div>
🟩 Хорошо:
<section>
<h2>О компании</h2>
<p>Мы работаем с 2010 года.</p>
</section>
Теперь ясно, что это раздел “О компании”, а не просто блок текста.
HTML имеет шесть уровней заголовков:
<h1>Главный заголовок</h1>
<h2>Подраздел</h2>
<h3>Подраздел внутри подраздела</h3>
<h1> — основной смысл.<h2>–<h6> создают структуру “дерева содержания”.<h1>Кофейня "Арома"</h1>
<h2>Меню</h2>
<h3>Кофе</h3>
<h3>Десерты</h3>
<h2>Контакты</h2>
Пользователь и поисковик видят, как структурирована страница.
| Тег | Назначение | Пример |
|---|---|---|
<p> |
Абзац текста | <p>Это пример абзаца.</p> |
<br> |
Перенос строки | строка 1<br>строка 2 |
<strong> |
Важное выделение | <strong>Внимание!</strong> |
<em> |
Эмоциональное выделение | <em>Особенно</em> интересно |
<mark> |
Подсветка текста | <mark>HTML</mark> — язык разметки |
<blockquote> |
Цитата | <blockquote>Лучше кофе — только книга.</blockquote> |
<cite> |
Автор/источник | <cite>Анна Иванова</cite> |
<time> |
Время или дата | <time datetime="2025-11-11">11 ноября 2025</time> |
<address> |
Контактная информация | <address>г. Казань, ул. Баумана, 10</address> |
<article>
<h2>Объявление</h2>
<p><strong>Важно:</strong> завтра кофейня работает до 16:00.</p>
<p>Полный график смотрите <a href="schedule.html">здесь</a>.</p>
</article>
<ul>)<ul>
<li>Капучино</li>
<li>Латте</li>
<li>Эспрессо</li>
</ul>
<ol>)<ol>
<li>Выбрать кофе</li>
<li>Добавить сахар</li>
<li>Насладиться вкусом</li>
</ol>
<table>)Используются для данных, а не для разметки макета:
<table>
<thead>
<tr><th>Блюдо</th><th>Цена</th></tr>
</thead>
<tbody>
<tr><td>Чизкейк</td><td>350 ₽</td></tr>
<tr><td>Кофе латте</td><td>250 ₽</td></tr>
</tbody>
</table>
data-*Атрибуты позволяют хранить дополнительные сведения.
Примеры:
<img src="photo.jpg" alt="Фото сотрудника">
<a href="mailto:info@site.ru" title="Написать письмо">Связаться</a>
<li data-price="350">Чизкейк</li>
alt — описание картинки для доступности;title — подсказка при наведении;data-* — пользовательские данные, которые можно использовать в скриптах.Поисковые системы читают HTML по структуре, а не по внешнему виду.
Чтобы страница индексировалась корректно:
✅ Используй логичные заголовки:
<h1>Новости компании</h1>
<h2>Открыт новый филиал</h2>
✅ Добавляй описание в <meta name="description">.
✅ Не злоупотребляй <strong> и <em> — только по смыслу.
✅ Структурируй текст списками и подзаголовками.
Когда один пишет HTML, а другой добавляет CSS, важно, чтобы структура была:
Пример:
<article class="news-item">
<header>
<h2 class="news-title">Компания открыла филиал</h2>
<time datetime="2025-11-10" class="news-date">10 ноября 2025</time>
</header>
<p class="news-summary">Филиал открыт в Казани и уже принимает клиентов.</p>
<a href="#" class="news-link">Читать полностью</a>
</article>
Такой HTML можно легко стилизовать позже, а пока он полностью понятен и читаем.
| Ошибка | Почему плохо | Как правильно |
|---|---|---|
Использовать <div> везде |
Потеря смысла структуры | Применяй семантические теги |
Пропускать alt у изображений |
Недоступность | <img src="..." alt="Описание"> |
Несколько <h1> на странице |
Сбивает структуру | Один <h1> на страницу |
| Использовать теги для оформления | Нарушает семантику | HTML — про смысл, CSS — про вид |
Вложенные <a> |
Некорректно по стандарту | Ссылки не могут содержать другие ссылки |
Перед публикацией стоит:
Хороший HTML — это понятная структура, смысл и логика, а не внешний вид.
Главное правило:
“Пиши код так, чтобы человек понял смысл страницы, даже если выключить все стили.”