Модуль 2 · Знакомство с HTML

Урок 2.1 — Наш первый тег: h1

В этом уроке мы начнём писать настоящий HTML-код. Вы узнаете, что такое тег на примере h1 — самого главного заголовка на странице. И создадите свою первую веб-страницу.

🏷️

Давайте начнём с самого простого

Вы уже знаете из прошлого урока, что HTML состоит из тегов. Тег — это команда для браузера. Сегодня мы познакомимся с первым и самым важным тегом — h1.

Вот как он выглядит:

HTML · Первый тег — h1

&lt;h1&gt;Привет, мир!&lt;/h1&gt;

Давайте разберём эту строчку по буквам. В ней три части:

1 Открывающий тег: <h1>

Символ < — угловая скобка открывает тег. Буквы h1 — имя тега. Символ > — угловая скобка закрывает тег. Всё вместе: <h1>. Это команда браузеру: «Внимание! Сейчас начнётся самый главный заголовок».

2 Содержимое: Привет, мир!

Это текст, который вы увидите на странице. Он находится между открывающим и закрывающим тегом. Браузер возьмёт этот текст и покажет его как заголовок — крупно и жирно.

3 Закрывающий тег: </h1>

Отличается от открывающего косой чертой (слешем) перед именем тега: </h1>. Это команда браузеру: «Заголовок закончился, дальше может быть что-то другое». Не забудьте закрыть тег — это частая ошибка новичков!

💡 Почему тег называют «контейнером»?

Представьте пластиковый контейнер для еды. У него есть крышка (открывающий тег), внутри — еда (содержимое), и снова крышка (закрывающий тег). Вы открываете контейнер, кладёте еду, закрываете. Точно так же работают HTML-теги: <h1> — открыли, положили текст, </h1> — закрыли. Без закрывающего тега «контейнер» останется открытым, и браузер не поймёт, где заканчивается заголовок.

📑

Что значит h1

Буква h в теге h1 означает heading — в переводе с английского «заголовок». Цифра 1 означает уровень. h1 — это заголовок первого уровня, самый главный на всей странице.

Представьте книгу. У книги есть название (h1), названия глав (h2), названия разделов внутри главы (h3) и так далее. h1 — это название всей книги. Он должен быть один и только один. Как у книги не может быть двух названий, так и у веб-страницы не может быть двух главных заголовков.

Вот как выглядят заголовки разных уровней в браузере:

HTML · Заголовки разных уровней

&lt;h1&gt;Название книги&lt;/h1&gt;
&lt;h2&gt;Название главы&lt;/h2&gt;
&lt;h3&gt;Название раздела&lt;/h3&gt;
&lt;h4&gt;Подраздел&lt;/h4&gt;
&lt;h5&gt;Пункт&lt;/h5&gt;
&lt;h6&gt;Подпункт&lt;/h6&gt;

Обратите внимание: h1 — самый крупный, h6 — самый мелкий. Но мы пока будем использовать только h1. Остальные заголовки разберём в следующем уроке.

⚠️ Важное правило: один h1 на страницу

На одной веб-странице должен быть ровно ОДИН тег h1. Только один. Это требование не языка HTML, а правил хорошего тона (семантики). Поисковые системы (Google, Яндекс) смотрят на h1, чтобы понять, о чём страница. Если h1 будет несколько, поисковик запутается. Запомните: один сайт — один главный заголовок.

👁️

Как браузер показывает заголовок

Когда браузер видит тег h1, он понимает: «Это самый важный текст на странице. Нужно показать его крупно и жирно». По умолчанию (без CSS) браузер показывает h1 очень большим шрифтом, жирным начертанием и добавляет отступы сверху и снизу.

Вот как это выглядит.

HTML · Что написано в коде

&lt;h1&gt;Мой первый заголовок&lt;/h1&gt;

Браузер берёт содержимое тега h1 и отображает его в виде большого жирного заголовка. Всё, что находится между <h1> и </h1>, становится заголовком.

💡 Про угловые скобки

В примерах на этой странице мы пишем <h1> вместо <h1>. Это потому, что настоящие угловые скобки браузер воспринял бы как команду. В своём коде вы используете обычные скобки: <h1>.

🚀

Создаём первую веб-страницу

А теперь — самое интересное. Мы создадим веб-страницу, на которой будет только ОДИН заголовок h1. И это будет полноценная, работающая веб-страница!

Пошаговая инструкция:

Откройте VS Code. Запустите программу. Если у вас её нет — вернитесь к уроку 1.1, там написано, как установить.

Создайте новый файл: File → New File (Ctrl+N / Cmd+N).

Напишите код (вручную, не копируйте!):

&lt;h1&gt;Привет, это моя первая веб-страница!&lt;/h1&gt;

Сохраните файл: File → Save As... (Ctrl+S / Cmd+S). Назовите index.html. Расширение должно быть .html, а не .txt.

Откройте в браузере: Кликните на файл правой кнопкой → «Открыть с помощью» → Chrome. Или перетащите файл в окно браузера.

Готово! Вы увидите текст «Привет, это моя первая веб-страница!» крупным жирным шрифтом. Это ваш первый сайт!

💡 Что будет, если не закрыть тег?

Попробуйте написать <h1>Привет! без закрывающего тега. Сохраните, откройте в браузере. Скорее всего, вы всё равно увидите заголовок — браузеры умные и часто «догадываются», что вы имели в виду. Но полагаться на это нельзя. Всегда закрывайте теги.

✏️

Экспериментируем с заголовком

Теперь, когда ваша первая страница работает, давайте поэкспериментируем. Измените текст внутри тега h1 на что-то другое. Например:

&lt;h1&gt;Я учусь создавать сайты!&lt;/h1&gt;

Сохраните файл (Ctrl+S) и обновите страницу в браузере (F5). Текст изменился! Вот как просто работают веб-страницы: изменили код → сохранили → обновили браузер → получили новый результат.

Попробуйте разные варианты:

&lt;h1&gt;Всем привет!&lt;/h1&gt;

&lt;h1&gt;HTML — это просто!&lt;/h1&gt;

&lt;h1&gt;Мой первый заголовок&lt;/h1&gt;

⚠️ Помните: только один h1 на страницу!

В этом уроке мы используем ТОЛЬКО один тег h1. Не пишите два. Даже если очень хочется. Потом, когда мы изучим другие заголовки, вы сможете добавить h2, h3 и так далее. Но h1 останется один — на то он и главный!

🤔

Почему теги так важны

Вы можете спросить: «Зачем нужны теги? Почему нельзя просто написать текст в файле и открыть его в браузере?» Отличный вопрос! Давайте проверим на практике.

Создайте файл no-tags.html и напишите в нём просто текст без тегов:

Привет!
Это моя страница без тегов.
Я просто написал текст.

Сохраните и откройте в браузере. Вы увидите обычный текст. Браузер покажет его как одну строку (или несколько, в зависимости от того, как вы сохранили). Но этот текст — просто текст. Браузер не знает, что здесь заголовок, а что абзац. Для него это просто слова.

А теперь напишите тот же текст с тегом h1:

<h1>Привет!</h1>

Браузер увидит тег h1 и поймёт: «Это заголовок! Нужно показать его крупно и жирно, потому что он самый важный на странице». Теги дают браузеру смысл. Без тегов — просто текст. С тегами — структурированная веб-страница.

Теги также важны для:

🔍 Поисковых систем — Google смотрит на тег h1, чтобы понять тему страницы и показать её в результатах поиска.

♿ Доступности — скринридеры (программы для незрячих) используют теги для навигации по странице.

🎨 Стилей (CSS) — позже мы научимся применять стили к тегам, чтобы менять их внешний вид.

🧑‍💻 Разработчиков — когда код написан тегами, его легко читать и понимать другим программистам.

💡 Запомните главное

HTML без тегов — это как книга без оглавления, заголовков и абзацев. Сплошной текст, в котором невозможно ориентироваться. Теги делают информацию понятной и структурированной. Они превращают «просто текст» в «веб-страницу».

⚠️

Частые ошибки с тегом h1

❌ Ошибка 1: Несколько h1 на странице

Некоторые новички думают: «Хочу большой заголовок — поставлю h1. Хочу ещё один большой заголовок — поставлю ещё h1». Так делать нельзя! h1 должен быть один. Если вам нужен ещё один крупный заголовок, используйте h2 или h3. Правильно: один h1 + сколько угодно h2, h3, h4, h5, h6.

❌ Ошибка 2: h1 в логотипе на каждой странице

Частая ошибка: сделать логотип сайта тегом h1 и повторять его на каждой странице. h1 должен отражать уникальное содержание конкретной страницы, а не название сайта. Логотип обычно делают тегом a или span, а h1 используют для заголовка текущей страницы: «Каталог товаров», «О компании», «Контакты».

❌ Ошибка 3: Пропуск h1

Некоторые вообще забывают про h1 и начинают страницу сразу с h2 или p. Это неправильно: каждая страница должна иметь ровно один h1. Даже если это просто «О компании» или «Контакты» — это ваш главный заголовок. Не пропускайте его!

❌ Ошибка 4: Использование h1 для изменения размера

«Мне нужен крупный текст, я поставлю h1». Это неправильно. h1 нужен для обозначения САМОГО ВАЖНОГО заголовка, а не для того, чтобы сделать текст большим. Размер шрифта меняется через CSS (мы изучим это позже). А h1 — про смысл, а не про размер!

🧩

Аналогии, чтобы запомнить

📰 Аналогия с газетой

Представьте газету. У неё есть название (h1). Внутри — разделы (h2): «Новости», «Спорт», «Погода». Внутри разделов — статьи (h3). Каждая статья может иметь подзаголовки (h4). А текст статей — это обычные абзацы p. Без этих заголовков газета была бы просто стеной текста, в которой невозможно ориентироваться. То же самое с веб-страницей!

🏗️ Аналогия со строительством

HTML-теги — это как строительные блоки. h1 — это фундамент, самая важная часть. h2 — это несущие стены. h3 — перегородки. p — это внутренняя отделка. Каждый элемент выполняет свою функцию. Если перепутать блоки (поставить h3 вместо h1), конструкция будет ненадёжной. Соблюдайте иерархию!

✏️

Практическое задание

📝 Задание 1. Страница «О курсе»

Создайте файл about-course.html. Напишите в нём один заголовок h1: «Добро пожаловать на курс HTML/CSS». Сохраните и откройте в браузере. Наслаждайтесь результатом!

🔍 Задание 2. Найдите h1 на любом сайте

Откройте любой сайт, нажмите F12, перейдите на вкладку Elements. Найдите тег h1. Посмотрите, какой текст внутри. Это главный заголовок страницы. Попробуйте изменить его через DevTools (двойной клик → новый текст).

🧠 Задание 3. Что будет, если...

Попробуйте написать два h1 на одной странице. Сохраните, откройте. Что произошло? Вы увидели два заголовка. Браузер это позволяет, но так делать не надо. Теперь удалите один h1 и оставьте как было.

📌

Что важно запомнить

1️⃣

Тег — это команда браузеру. Парный тег состоит из открывающего, содержимого и закрывающего.

2️⃣

h1 — заголовок первого уровня, самый главный. h = heading (заголовок).

3️⃣

Один h1 на страницу. Это правилом хорошего тона и важно для поисковых систем.

4️⃣

Всегда закрывайте теги </h1>. Незакрытый тег может сломать страницу.

5️⃣

Цикл работы: написал код → сохранил → обновил браузер → увидел результат.

🚀

Поздравляю!

Вы создали свою первую веб-страницу. Это огромный шаг! Теперь вы знаете, что такое тег, как работает h1 и как смотреть результат в браузере. В следующем уроке мы расширим наши знания — познакомимся с абзацами, переносом строк и всеми заголовками от h1 до h6.

До встречи в уроке 2.2!

Урок 2.1: Наш первый тег: h1

9 вопросов