§ 29. Основы НТМL

Определения и обозначения

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

Тег — запись в угловых скобках, например <p> или </p>, указывающая браузеру, как обозначить или обработать часть страницы. По тегам браузер распознаёт назначение содержимого. Поэтому обычный текст страницы можно организовать в понятную структуру.

HTML-элемент — часть документа, обычно состоящая из открывающего тега, содержимого и закрывающего тега. Например, элемент абзаца включает запись <p>, текст и </p>. Бывают элементы без содержимого, которым не требуется отдельный закрывающий тег.

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

Как это устроено

Браузер читает HTML-файл как описание структуры, а не как обычный текст для показа. Встретив тег, он определяет роль следующего фрагмента и строит внутреннее представление документа. Сами теги обычно не отображаются пользователю, потому что служат инструкциями для обработки, а на экране появляется результат их применения.

Общий каркас начинается с объявления типа документа <!DOCTYPE html>, которое помогает браузеру выбрать современный режим обработки. Корневой элемент <html> содержит две основные части: <head> и <body>. В <head> размещают метаданные и <title> — заголовок вкладки, а в <body> помещают содержимое, видимое на странице.

Открывающий и закрывающий теги задают границы элемента, поэтому браузер понимает, где начинается и заканчивается абзац или заголовок. Если один элемент находится внутри другого, сначала открывают внешний элемент, затем внутренний. Закрывать их нужно в обратном порядке: внутренний элемент закрывается первым, иначе структура становится неоднозначной.

Атрибуты записывают в открывающем теге после имени элемента, обычно в форме имя="значение". Например, в записи <a href="https://example.com">Сайт</a> href сообщает браузеру адрес перехода. Такой подход отделяет основное содержимое ссылки от дополнительной информации о её поведении.

Разметка организует текст с помощью заголовков, абзацев, списков и ссылок. Заголовки показывают уровни частей документа, абзацы отделяют смысловые фрагменты, а список объединяет однотипные пункты. Внешний вид и структура не совпадают: HTML задаёт смысл и расположение элементов, а оформление дополнительно определяется стилями CSS и настройками браузера.

Основные элементы HTML-документа

Таблица помогает сопоставить назначение элемента с его записью и особенностями. При чтении сначала определите, какую часть страницы он описывает, затем проверьте парность тегов и наличие атрибутов. Примеры можно использовать как шаблоны для небольших HTML-документов.

Разбор задач

Задача 1. Найти элементы во фрагменте

Дан фрагмент <p>Читайте <b>внимательно</b>!</p>. Нужно определить открывающие и закрывающие теги, содержимое и границы двух вложенных элементов. Проверим не только названия тегов, но и порядок их расположения.

1. Первым открывается <p>, поэтому внешний элемент — абзац.
2. Внутри него открывается <b>, затем находится слово «внимательно», после которого стоит </b>.
3. После закрытия внутреннего элемента записан знак препинания, а последним закрывается </p>.

Границы элемента <b> — от его открывающего тега до </b>, а границы элемента <p> — от <p> до </p>. Внешний элемент содержит внутренний. Порядок закрытия правильный: сначала b, затем p.

Задача 2. Составить минимальный документ

Нужно создать страницу с заголовком вкладки, заголовком страницы и одним абзацем. Заголовок вкладки относится к <head>, а видимые заголовок и абзац — к <body>. Поэтому сначала составим каркас, а затем поместим содержимое в правильные разделы.

1. Запишем <!DOCTYPE html> и откроем корневой элемент <html>.
2. Внутри <head> добавим <title>Моя страница</title>.
3. В <body> разместим <h1>Добро пожаловать</h1> и <p>Это моя первая страница.</p>, затем закроем элементы.

Получится документ: <!DOCTYPE html> <html> <head><title>Моя страница</title></head> <body><h1>Добро пожаловать</h1><p>Это моя первая страница.</p></body> </html>. Заголовок вкладки и содержимое страницы находятся в разных частях каркаса. Такое разделение помогает браузеру правильно обработать документ.

Задача 3. Добавить список и исправить ссылку

Добавим к странице список из двух пунктов и ссылку на адрес https://example.com. Пусть исходный фрагмент содержит ошибку: <ul><li>Первый</li><li>Второй</ul> и <a>Сайт</a>. Нужно восстановить парность тегов и указать адрес перехода.

1. Закроем второй пункт перед закрытием списка: <li>Второй</li></ul>.
2. Добавим атрибут href в открывающий тег ссылки: <a href="https://example.com">Сайт</a>.
3. Проверим, что каждый открывающий тег получил закрывающий, а атрибут находится внутри открывающего тега.

Исправленный фрагмент: <ul><li>Первый</li><li>Второй</li></ul> <a href="https://example.com">Сайт</a>. Список теперь имеет правильную вложенность, а ссылка знает адрес перехода. Проверка структуры позволяет найти ошибку до открытия файла в браузере.

Типичные ошибки

Путать HTML с языком программирования. Так происходит, потому что браузер действительно выполняет обработку разметки. Проверьте себя: ищите в HTML описание структуры, а не условия, циклы и алгоритмы.

Пропускать закрывающий тег или нарушать порядок вложенности. Ошибку допускают, когда воспринимают теги как независимые пометки. Для проверки сопоставьте каждую пару и закройте вложенные элементы в обратном порядке.

Записывать атрибут вне открывающего тега или без значения. Обычно забывают, что атрибут относится к конкретному элементу и должен находиться после его имени. Проверьте запись вида имя="значение" внутри открывающих угловых скобок.

Считать, что тег гарантирует нужное оформление. Один и тот же структурный элемент может выглядеть по-разному из-за CSS и настроек браузера. Отделяйте вопрос «что это за часть страницы» от вопроса «как она выглядит».

Связь с другими темами

Для работы с HTML нужно понимать, как устроены файлы и папки, а также уметь сохранять текстовый файл с нужным расширением. Это позволяет создать документ и открыть его браузером как веб-страницу.

Гиперссылки связывают HTML с адресами интернет-ресурсов и устройством Всемирной паутины. Атрибут href хранит адрес, по которому браузер выполняет переход.

Основы HTML становятся базой для изучения CSS и JavaScript. CSS отвечает преимущественно за оформление, а JavaScript добавляет странице программируемое поведение.

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

• HTML служит для разметки структуры и содержания веб-страницы.
• Теги записываются в угловых скобках.
• Большинство элементов состоит из открывающего и закрывающего тегов.
• Вложенные элементы закрывают в обратном порядке относительно открытия.
• Атрибуты записывают в открывающем теге.
• Содержимое страницы размещают в теле HTML-документа.