§ 3. Основы языка разметки HTML

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

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

Тег — заключённая в угловые скобки команда разметки. Открывающий тег выглядит, например, как

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

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

Текст абзаца

весь фрагмент является элементом, а слова внутри тегов — его содержимым. Понятие элемента удобно, когда нужно говорить о целой части страницы, а не только о её границах.

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

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

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

У парного элемента открывающий тег начинает область содержимого, а закрывающий — завершает её. Например, в

Добро пожаловать!

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

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

Атрибут записывают внутри открывающего тега, потому что он уточняет именно этот элемент. Имя атрибута указывает, какой параметр задаётся, а значение сообщает браузеру конкретные данные: например, адрес или имя файла. Значение обычно берут в кавычки, чтобы оно однозначно читалось, даже если в нём есть пробелы.

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

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

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

Разбор задач

Задача 1. Записать разметку страницы с заголовком «Моя страница» и одним абзацем текста. Нужно подобрать элементы по назначению: для главного заголовка подходит h1, а для абзаца — p. Содержимое каждой части помещают между открывающим и закрывающим тегами.

1. Записываем открывающий тег <h1>, затем текст заголовка и закрывающий тег </h1>. Так браузер получает границы заголовка.

2. Следом добавляем пару тегов абзаца и помещаем между ними его текст. Каждый элемент закрываем до начала следующего, чтобы части страницы не смешались.

Ответ: <h1>Моя страница</h1> <p>Здесь находится текст абзаца.</p>.

Задача 2. Найти и исправить ошибки во фрагменте, где заголовок и абзац вложены и закрыты в неправильном порядке. Например, дано: <h1>Заголовок <p>Текст</h1> </p>. Сначала определяем порядок открытия тегов и проверяем, какой элемент оказался внутри другого.

1. Первым открыт h1, а затем p, значит абзац является дочерним элементом заголовка. Это неудачная структура: абзац должен быть самостоятельным элементом, а не частью заголовка.

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

Ответ: <h1>Заголовок</h1> <p>Текст</p>. Если по условию элементы действительно должны быть вложены, внутренний тег закрывают первым, то есть строго в обратном порядке их открытия.

Задача 3. Создать фрагмент страницы с гиперссылкой на заданный адрес и изображением из указанного файла. Здесь важно различать текст элемента и данные, передаваемые браузеру через атрибуты. Адрес ссылки записывают в href, а имя или путь к файлу изображения — в src.

1. В теге ссылки указываем href и заключаем адрес в кавычки. Между открывающим и закрывающим тегами <a> размещаем понятный пользователю текст ссылки.

2. Для изображения используем тег <img> и указываем в атрибуте src имя заданного файла. Само изображение не записывают между открывающим и закрывающим тегами: тег img не имеет такой пары.

Ответ: <a href="https://example.com">Перейти на сайт</a> <img src="photo.jpg">. В примере адрес и имя файла — значения атрибутов, а «Перейти на сайт» — содержимое ссылки.

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

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

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

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

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

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

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

Для оформления страниц HTML используют вместе с CSS, который управляет внешним видом элементов. JavaScript добавляет реакции на действия пользователя и другую интерактивность. Разделение этих задач помогает менять оформление или поведение, не перестраивая всю разметку.

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

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