HTML для начинающих: самые важные теги

HTML: Язык Интернета

Всё, что ты видишь в браузере, начинается здесь. Освой основы за 15 минут!

Что такое HTML?

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

Представь, что HTML — это каркас дома, а CSS (стили) и JavaScript (интерактивность) — это отделка и электричество.

                <!DOCTYPE html>

                <html>

                  <head>

                    <title>Моя первая страница</title>

                  </head>

                  <body>

                    <!-- Здесь будет видимый контент -->

                  </body>

                </html>

💡 Запомни: Почти все HTML-теги состоят из открывающего <тег> и закрывающего </тег> элемента. Контент помещается между ними.

Текст и заголовки

Самые часто используемые теги для работы с текстом:

Заголовки разного уровня важности. <h1> — самый главный (используется один раз на странице), <h6> — наименее важный.

<p>

Абзац текста. Браузер автоматически добавляет отступы сверху и снизу.

<strong> — важный текст (жирный), <em> — акцентированный текст (курсив).

<br>

Перенос строки. Это одиночный тег — у него нет закрывающей части.

Как это выглядит:

Главный заголовок

Заголовок поменьше

Это обычный абзац текста. Здесь мы пишем важную информацию и делаем акценты.

Это второй абзац.
С переносом на новую строку.

Ссылки и картинки

Без этих тегов интернет был бы скучным!

                <!-- Ссылка -->

                <a href="https://youtube.com">Перейти на YouTube</a>

                <!-- Картинка -->

                <img src="kotik.jpg" alt="Милый котик">

Атрибуты — это дополнительные настройки тегов, которые пишутся внутри открывающего тега.

href — указывает адрес ссылки
src — путь к картинке
alt — описание картинки (показывается, если картинка не загрузилась)

🌐 Протоколы: В ссылках используй https:// для внешних сайтов. Для ссылки на почту: <a href="mailto:hello@example.com">

Списки

Два основных типа списков:

                <!-- Маркированный список -->

                <ul>

                  <li>Первый пункт</li>

                  <li>Второй пункт</li>

                </ul>

                <!-- Нумерованный список -->

                <ol>

                  <li>Первый шаг</li>

                  <li>Второй шаг</li>

                </ol>

Результат:

Мои любимые игры:

Minecraft
Fortnite
Roblox

Как приготовить чай:

Вскипятить воду
Положить чайный пакетик
Подождать 3 минуты

Блочные и строчные элементы

Блочные элементы занимают всю доступную ширину и начинаются с новой строки:

<div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>

Строчные элементы занимают только необходимую ширину и не начинают новую строку:

<a>, <strong>, <em>, <img>, <span>

🎯 Div и Span: <div> — универсальный блочный контейнер, <span> — универсальный строчный контейнер. Используются для группировки и стилизации.

Пора практиковаться!

Создай свой первый HTML-документ:

                <!DOCTYPE html>

                <html>

                <head>

                  <title>Моя страничка</title>

                </head>

                <body>

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

                  <p>Я изучаю HTML!</p>

                </body>

                </html>

1. Открой Блокнот (Windows) или TextEdit (Mac)
2. Скопируй код выше
3. Сохрани файл как index.html
4. Открой его в браузере!