← Введение в HTML Блочные и строчные теги →

Основы HTML: теги, атрибуты, структура

🧱 Фундамент языка гипертекстовой разметки

HTML строится из специальных команд — тегов. Браузер читает теги и понимает, как показывать страницу.

1. Типы тегов

Теги бывают четырёх видов.

Парные теги (открывающий + закрывающий)

<p>Текст абзаца</p>
<strong>Жирный текст</strong>
<em>Курсив</em>

Одиночные теги (не требуют закрытия)

<br>       — перенос строки
<hr>       — горизонтальная линия
<img>      — изображение
<input>    — поле ввода

Самозакрывающиеся теги (вариант записи)

<br />     — со слэшем перед >
<hr />
<img src="photo.jpg" />

📌 Разницы между <br> и <br /> нет. Оба варианта работают. Современный стандарт рекомендует писать без слэша, но вы можете встретить оба варианта в разных кодах.

2. Вложенность тегов

Теги могут находиться внутри других тегов. Это называется вложенностью.

<div>
    <p>Текст внутри div</p>
    <strong>Жирный текст</strong>
</div>

Важное правило: закрывать теги нужно в обратном порядке — тот, кто открылся последним, закрывается первым.

✅ <p><strong>Текст</strong></p>
❌ <p><strong>Текст</p></strong>

⚠️ Ошибки вложенности — одна из самых частых проблем у новичков. Браузер может «додумать» закрытие тега за вас, но это приводит к неожиданному поведению страницы.

3. Регистр тегов

Теги можно писать в любом регистре: <P>, <p>, <Pp> — браузер поймёт. Но по стандарту и здравому смыслу теги пишут строчными буквами (нижний регистр).

✅ <body>
✅ <h1>
❌ <BODY>
❌ <H1>

4. Атрибуты тегов

Атрибуты — это дополнительные свойства тега. Они уточняют команду: куда перейти, какую картинку показать, какой стиль применить.

<a href="https://example.com">Ссылка</a>
<img src="photo.jpg" alt="Описание фото">
<input type="text" placeholder="Ваше имя">

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

5. Кавычки в атрибутах

Значения атрибутов нужно заключать в кавычки. Можно использовать двойные или одинарные — главное, чтобы не смешивать в одном атрибуте.

✅ <a href="https://site.com">
✅ <a href='https://site.com'>
❌ <a href=https://site.com>   (без кавычек — риск ошибки)

📌 Если внутри значения нужны кавычки, их можно чередовать: внешние двойные, внутренние одинарные — или наоборот.

6. Структура HTML-документа

Любой HTML-документ имеет обязательный каркас. Вот как он выглядит:

<!DOCTYPE html>
<html>
    <head>
        <title>Заголовок вкладки</title>
    </head>
    <body>
        <h1>Привет, мир!</h1>
        <p>Моя первая страница</p>
    </body>
</html>

Что такое DOCTYPE?

<!DOCTYPE html> — это не тег, а объявление типа документа. Оно пишется в самом начале и говорит браузеру: «используй современный стандарт HTML5 для отображения этой страницы».

Без этой строчки браузер может включить «режим совместимости» (quirk mode), из-за чего страница будет отображаться непредсказуемо. Поэтому DOCTYPE всегда должен быть первым в файле.

📌 Устаревшие версии HTML (4.01, XHTML) имели длинные и сложные DOCTYPE. В HTML5 всё свели к этой короткой записи.

Остальные теги из примера

<html> — корневой элемент, внутри которого находится вся страница
<head> — служебная информация (не видна на странице)
<title> — заголовок вкладки браузера
<body> — содержимое страницы (видно пользователю)

📓 Из тетради: «Запомните эту структуру раз и навсегда. Каждый HTML-файл будет начинаться с неё.