Базовый HTML

Чтение — около 12 минут· без учёта практики

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

HTML-заголовки

Заголовки определяются тегами от <h1> до <h6>: элемент <h1> определяет наиболее важный заголовок, а <h6> — наименее важный. Заголовок <h1> — главный заголовок страницы, за ним следуют заголовки разделов <h2>, подразделов <h3> и так далее. Браузеры по умолчанию показывают заголовки жирным шрифтом разного размера и добавляют пустое пространство до и после каждого заголовка.

Уровни заголовков от h1 до h6

Шесть уровней заголовков с оформлением браузера по умолчанию. Поменяйте уровень любого заголовка (например, h3 на h2 в открывающем и закрывающем тегах) и посмотрите на результат.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>HTML-заголовки</title>
  </head>
  <body>
    <h1>Здесь содержится заголовок первого уровня</h1>
    <h2>Здесь содержится заголовок второго уровня</h2>
    <h3>Здесь содержится заголовок третьего уровня</h3>
    <h4>Здесь содержится заголовок четвёртого уровня</h4>
    <h5>Здесь содержится заголовок пятого уровня</h5>
    <h6>Здесь содержится заголовок шестого уровня</h6>
  </body>
</html>

Заголовки показывают структуру документа

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

Например, страница Тони могла бы иметь такую структуру:

HTML

<h1>Сайт Тони</h1>
<h2>Обо мне</h2>
<h2>Мои игрушки</h2>
<h3>Канат с мячиком</h3>
<h3>Резиновая косточка</h3>
<h2>Мой день</h2>

Чтобы структура оставалась понятной, придерживайтесь трёх правил:

Один заголовок первого уровня на странице. Стандарт HTML не запрещает несколько <h1>, но я настоятельно рекомендую использовать один: он называет всю страницу.
Уровни без пропусков. Для подраздела внутри раздела <h2> используйте <h3>, а не <h4>. Следующий самостоятельный раздел снова начинается с <h2>: между двумя разделами одного уровня не обязательно добавлять подраздел.
Уровень выбирают по смыслу, а не по размеру. Если заголовок кажется слишком крупным, его размер меняют с помощью CSS, о котором мы поговорим позже. Обычный текст не оформляют заголовком ради крупного шрифта.

Абзацы

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

HTML горизонтальная линия

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

В следующем примере мы после каждого абзаца используем элемент <hr>, который тематически разделяет страницу:

Тематический разрыв между абзацами

Линии между абзацами создаёт элемент hr. Удалите один из тегов hr и посмотрите, как изменится результат.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Пример использования тега hr</title>
  </head>
  <body>
    <p>Первый абзац</p>
    <hr>
    <p>Второй абзац</p>
    <hr>
    <p>Третий абзац</p>
  </body>
</html>

Не используйте <hr> только ради декоративной линии или отступа: оформление задают с помощью CSS. Перед новым разделом с собственным заголовком линия тоже не нужна — раздел и так отделён заголовком.

HTML перевод строки

Тег <br> устанавливает перевод строки в том месте, где этот тег указан. Это тоже пустой элемент без закрывающего тега.

Рассмотрим пример по мотивам стихотворения Александра Пушкина, обращённого к Анне Керн:

Перевод строки внутри абзаца

Стихотворение — один абзац, строки которого разделены элементом br. Удалите один br, и две строки сольются в одну.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>HTML перевод строки</title>
  </head>
  <body>
    <p>По мотивам стихотворения А. С. Пушкина</p>
    <!-- Текст стихотворения помещён в отдельный абзац -->
    <p>
      Я помню чудное мгновенье:<br>
      Передо мной явилась ты,<br>
      Как мимолётное виденье,<br>
      Как пинчер чистой красоты.
    </p>
  </body>
</html>

Обратите внимание, что весь текст стихотворения помещён в один абзац. Элемент <br> нужен там, где перенос строки — часть содержания: в стихах, почтовых адресах. Разделять им абзацы или создавать вертикальные отступы не стоит: для абзацев есть <p>, а отступы задают с помощью CSS.

Перенос длинных слов

Тег <wbr> (англ. word break opportunity) позволяет указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, в слишком длинном слове или адресе URL).

Отличие тега <wbr> от <br> заключается в том, что в месте тега <br> браузер обязательно переносит содержимое на новую строку, а встречая элемент <wbr>, — только по необходимости.

Перенос длинного слова по необходимости

В первом абзаце есть <wbr>, во втором — нет. Сужайте и расширяйте область результата, перетаскивая разделитель между кодом и результатом.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Пример использования элемента wbr</title>
  </head>
  <body>
    <p>Текст, в котором встречается оченьоченьоченьоченьдлинное<wbr>словооченьдлинное.</p>
    <p>Текст, в котором встречается оченьоченьоченьоченьдлинноесловооченьдлинное.</p>
  </body>
</html>

Когда область результата станет уже длинного слова, браузер перенесёт первое слово в месте, где мы указали <wbr>, а второе слово выйдет за край области.

Вложенность элементов

Элементы HTML-документа вложены друг в друга: заголовок и абзац находятся внутри <body>, а <body> и <head> — внутри <html>. Отношения между ними называют по аналогии с семейным деревом:

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

Так выглядит дерево документа со страницей Тони из предыдущего урока:

Код

html
├── head
│   ├── meta
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p

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

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

Элемент <b> выделяет текст жирным шрифтом; его мы рассмотрим в статье «Форматирование текста».

В правильном фрагменте p содержит текст «Тони» и элемент b с текстом «любит гулять»: сначала закрывается b, затем p. Отдельно показана ошибка в исходном коде — p закрыт раньше b; дерево для ошибочного кода не изображено. — Дерево показывает вложенность правильного фрагмента. Перестановка закрывающих тегов нарушает её в исходном коде.

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

Как браузер исправляет неверную вложенность

Заголовок второго уровня ошибочно вложен в абзац. Посмотрите, во что браузер превратил этот код.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Неверная вложенность</title>
  </head>
  <body>
    <h1>Сайт Тони</h1>
    <p>Больше всего я люблю <h2>прогулки</h2> и игрушки.</p>
  </body>
</html>

Кликните правой кнопкой мыши по слову «прогулки» в результате и выберите «Просмотреть код» (Inspect). В инструментах разработчика видно, что браузер закрыл абзац перед заголовком, текст «и игрушки.» оказался вне абзаца, а из лишнего закрывающего тега </p> получился новый пустой абзац. В редакторе при этом остаётся написанный вами код — так же, как в исходном коде страницы («Просмотр кода страницы»): инструменты разработчика показывают дерево, которое браузер построил на самом деле.

На моей странице всё оказалось не на своих местах!

Частая ошибка — страница выглядит не так, как написан код

Если отступы, абзацы или оформление ведут себя странно, сравните свой код с деревом в инструментах разработчика. Если браузер закрыл элемент раньше, чем вы ожидали, или поместил его внутрь другого элемента, проверьте порядок закрывающих тегов и допустимость вложенности. Найти ошибки помогает и валидатор HTML, с которым мы познакомимся в статье «Компьютерный код».

Специальные символы

Некоторые символы HTML считает частью разметки. Знак < начинает тег, поэтому текст «Тег <p> создаёт абзац» браузер прочитает как код и создаст абзац вместо того, чтобы показать надпись. Знак & начинает мнемонику — запись символа по имени. Чтобы вывести такие символы как текст, записывайте их мнемониками:

Мнемоника	Символ	Когда нужна
`<`	<	знак «меньше» в тексте, например при показе тега
`>`	>	знак «больше»; записывают в паре с `<` для наглядности
`&`	&	амперсанд, если за ним следуют буквы и его можно принять за начало мнемоники
`"`	"	двойная кавычка внутри значения атрибута, записанного в двойных кавычках
` `	(пробел)	неразрывный пробел: браузер не переносит строку в этом месте и не схлопывает такие пробелы

Специальные символы в тексте

Замените < и > в первом абзаце на знаки < и > и посмотрите, что станет с надписью.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Специальные символы</title>
  </head>
  <body>
    <p>Тег &lt;p&gt; создаёт абзац.</p>
    <p>Тони &amp; его игрушки</p>
    <p>Тони весит 8&nbsp;кг.</p>
  </body>
</html>

Неразрывный пробел ставят между числом и единицей измерения (8 кг), между инициалами и фамилией: так они не окажутся на разных строках. Русские буквы, кавычки-ёлочки «» и тире — обычные символы, в кодировке UTF-8 их пишут как есть.

Полный список мнемоник приведён в справочнике «Мнемоники HTML».

HTML изображения

Любую HTML-страницу тяжело представить без изображений. Чтобы добавить изображение на страницу, используют тег <img>. Это пустой элемент без закрывающего тега: изображение не вкладывается в него как текст, а загружается из отдельного файла.

Чтобы указать файл изображения, добавьте к тегу <img> атрибут src (от англ. source — источник). Атрибуты — дополнительные сведения об элементе: они задают его свойства, например адрес изображения, альтернативный текст или размеры.

Синтаксис атрибутов

Атрибут состоит из имени и значения:

HTML

имя_атрибута="значение"

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

HTML

<тег имя_атрибута="значение"> <!-- пустой элемент -->
<тег имя_атрибута="значение">содержимое</тег> <!-- элемент с содержимым -->

В теге можно перечислить несколько атрибутов, разделяя их пробелом (порядок атрибутов не важен):

HTML

<тег имя_атрибута1="значение" имя_атрибута2="значение" имя_атрибута3="значение">

В примерах учебника я записываю значения атрибутов в двойных кавычках и без пробелов вокруг знака =. Это соглашение учебника: в ряде случаев HTML допускает и другие записи. Подробно атрибуты мы рассмотрим в следующем уроке.

Основные атрибуты изображения

Рассмотрим основные атрибуты тега <img>, которые вы будете применять в повседневной работе с изображениями:

исходный файл (src) — местонахождение файла (если указано только имя файла, а не путь, то браузер ожидает найти файл в той же папке, где находится и веб-страница).
альтернативный текст (alt) — текст, который заменяет изображение, если его не удаётся отобразить; его же зачитывают программы экранного доступа.
размер (width и height) — ширина и высота в пикселях. Рекомендуется всегда указывать ширину и высоту изображения. Если они не указаны, браузер не резервирует место под изображение и при медленной загрузке страница будет «прыгать».
всплывающая подсказка (title) — при наведении указателя на изображение значение атрибута отображается в виде всплывающей подсказки. На телефонах навести указатель нельзя, поэтому важные сведения в подсказку не помещают.

Рассмотрим пример, в котором добавим на страницу фотографию Тони:

Фотография Тони на странице

Измените значение width на 150 и удалите атрибут height — посмотрите, как браузер масштабирует фотографию. Затем допишите или удалите любой символ в значении src.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Пример использования тега img</title>
  </head>
  <body>
    <h1>Привет! Меня зовут Тони</h1>
    <img src="assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
  </body>
</html>

В этом примере для изображения установили следующие значения:

атрибутом src указали путь к файлу tony.png, который находится в папке assets рядом со страницей.
атрибутом alt указали альтернативный текст, который пользователь увидит, если изображение по каким-либо причинам не удаётся отобразить.
задали ширину (width) 300 и высоту (height) 400 пикселей.

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

Если в имени файла в src допущена ошибка, браузер не найдёт изображение и покажет на его месте альтернативный текст. Так же поступит и программа экранного доступа: прочитает значение alt вместо изображения.

Как написать альтернативный текст

Альтернативный текст должен передавать то, ради чего изображение размещено на странице. Представьте, что вы рассказываете о странице по телефону: что вы скажете вместо фотографии?

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

Проверьте себя

Задание

Тони хочет, чтобы на его странице появилась фотография с любимой игрушкой. В редакторе ниже — текст страницы Тони без разметки, а в папке assets примера лежит фотография tony-toy.png размером 300 на 400 пикселей. Разметьте страницу:

«Привет! Меня зовут Тони» — заголовок первого уровня, «Моя любимая игрушка» и «Мой стишок» — второго;
текст под первым заголовком и оба фрагмента текста под «Моя любимая игрушка» — абзацы;
после первого абзаца об игрушке — фотография assets/tony-toy.png с размерами и альтернативным текстом, описывающим фотографию;
перед абзацем «Вечером игра закончилась…» — тематический разрыв, обозначающий переход к новой сцене;
стишок — один абзац, каждая строка которого начинается с новой строки;
в записи «8 кг» — неразрывный пробел.

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

Выполните задание

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body>
    Привет! Меня зовут Тони

    Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду.

    Моя любимая игрушка

    Это канат с мячиком. Хозяин бросает его, а я приношу обратно — почти всегда.

    Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.

    Мой стишок

    Я маленький, но смелый,
    Гуляю целый день,
    А вечером на кресле
    Сплю — и мне не лень.
  </body>
</html>

Продолжите в VS Code

Создайте в папке my-site папку assets.
Скачайте фотографию Тони и сохраните её в папку assets под именем tony-toy.png.
Откройте файл index.html из папки my-site, замените его код кодом из редактора выше (кнопка «Копировать код»), сохраните файл и откройте его в браузере.

Ожидаемый результат: страница в браузере выглядит так же, как в редакторе, и показывает фотографию. Если вместо фотографии виден альтернативный текст, проверьте, что папка называется assets, файл — tony-toy.png и папка лежит рядом с index.html.

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