Теги и структура HTML-страницы

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

• HTML задаёт структуру и содержание.
• CSS задаёт внешний вид и расположение.
• JavaScript добавляет поведение, например реакцию на нажатие.

Тег и элемент

Тег - запись в угловых скобках. Он сообщает браузеру, что за элемент начинается или заканчивается. Например, p - сокращение от английского paragraph, «абзац».

У обычного элемента есть открывающий тег, содержимое и закрывающий тег:

<p>Я учусь создавать веб-страницы.</p>

• <p> - открывающий тег: здесь начинается абзац.
• Я учусь создавать веб-страницы. - содержимое.
• </p> - закрывающий тег: здесь абзац заканчивается. Символ / отличает его от открывающего.
• Весь фрагмент целиком - HTML-элемент абзаца.

Поэтому тег и элемент - не одно и то же: тег обозначает границу, а элемент включает границы и содержимое.

Так браузер показывает этот элемент:

Вложенность и форматирование

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

strong (английское strong - «сильный») выделяет важный фрагмент текста. В примере он вложен в абзац:

<p>Я изучаю <strong>HTML</strong> с нуля.</p>

Сначала открывается p, затем strong. Поэтому закрывающие теги идут в обратном порядке: сначала </strong>, затем </p>.

Переносы и отступы помогают увидеть эту структуру. Тот же фрагмент можно записать в несколько строк:

<p>
  Я изучаю
  <strong>HTML</strong>
  с нуля.
</p>

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

ul (сокращение от unordered list) создаёт маркированный список, ol (от ordered list) - нумерованный, а li (от list item) обозначает один пункт. У каждого списка свои дочерние элементы li:

<ul>
  <li>Разметка</li>
  <li>Стили</li>
</ul>
 
<ol>
  <li>Создать HTML-файл</li>
  <li>Добавить содержимое</li>
</ol>

ul или ol - родитель всего списка. Каждый li - отдельный дочерний элемент. Тег li используют внутри списка, а не вместо ul или ol.

Параметры элемента: атрибуты

В открывающем теге можно задать параметры элемента. Они называются атрибутами. Одни атрибуты относятся к конкретным элементам, например href у ссылки. Другие подходят многим элементам, например id и class.

<a id="course-link" class="link" href="/learn">Материалы курса</a>

Большинство атрибутов с текстовым значением записывают по схеме имя="значение": сначала имя, затем знак =, затем значение в одинарных или двойных кавычках. Несколько атрибутов разделяют пробелами; их порядок обычно не важен. В проекте лучше придерживаться одного стиля кавычек. Некоторые логические атрибуты включаются самим присутствием, например <input required />. Здесь href задаёт адрес перехода, id - уникальное имя элемента, а class - имя класса, которое можно назначить нескольким элементам.

Пустые элементы и слэш

У некоторых элементов записывают только один тег: у них нет содержимого и отдельного закрывающего тега. В HTML их называют пустыми элементами (англ. void elements). В учебных материалах их также часто называют самозакрывающимися, но это название может запутать: завершающий слэш сам по себе ничего не закрывает. Например, запись </br> неверна.

br - сокращение от английского break, «разрыв». Элемент <br /> переносит текст на следующую строку внутри того же абзаца. Он не начинает новый абзац:

<p>МИЭТ<br />Москва</p>

В HTML можно написать <br> или <br />: браузер обработает их одинаково, а завершающий слэш в HTML не закрывает элемент. Валидатор HTML не требует слэш. В этом курсе мы будем писать пустые элементы со слэшем, чтобы сразу видеть, что у них нет пары.

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

Например, img (сокращение от image, «изображение») показывает картинку. Это пустой элемент, поэтому закрывающего тега у него нет. Атрибут src задаёт путь к файлу, а alt - текстовую замену изображения:

<img
  src="/learn/course-doc/html-01/window-plant.svg"
  alt="Растение на подоконнике у окна"
  width="640"
  height="400"
/>

Браузер загружает файл из src, а alt описывает его смысл.

Если изображение не загрузится, браузер может показать текст alt. Скринридер - программа, которая озвучивает содержимое страницы, - читает это описание человеку, который не видит картинку. Пишите, что важного изображено именно в контексте страницы. Если картинка только украшает страницу и ничего не добавляет к смыслу, оставьте пустое значение alt="", чтобы скринридер не озвучивал лишнее.

Каркас HTML-документа

Страница состоит не только из того, что видно в окне браузера. <html> - корневой элемент всего документа. В <head> находятся настройки и сведения о документе, а в <body> - содержимое страницы.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Моя страница</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Моя первая страница</h1>
    <p>Этот текст виден на странице.</p>
  </body>
</html>

• <!doctype html> - декларация, а не тег. Она включает современный режим отображения страницы.
• <html lang="ru"> - корневой элемент документа. Атрибут lang указывает язык содержимого.
• <head> содержит настройки и сведения о странице, которые обычно не видны в её основном содержимом.
• <meta charset="utf-8" /> задаёт кодировку текста.
• <meta name="viewport" ... /> помогает браузеру правильно отображать страницу на мобильном экране.
• <title> задаёт название вкладки браузера.
• <body> содержит видимую часть страницы.

Заметьте: у meta и link тоже нет закрывающих тегов. Это пустые элементы. В примерах курса мы записываем их с завершающим слэшем.

Заголовки, абзацы и смысловые элементы

h1-h6 обозначают заголовки разных уровней. Выбирайте уровень по структуре текста, а не по желаемому размеру: внешний вид позже можно задать через CSS. p обозначает абзац, em (англ. emphasis) выделяет смысловое ударение.

<h1>Путеводитель по городу</h1>
<h2>Исторический центр</h2>
<p>Начните прогулку с <strong>главной площади</strong>.</p>

ul создаёт маркированный список, ol - нумерованный, а li обозначает пункт. Элемент a создаёт ссылку, а адрес перехода задаёт атрибут href:

<ol>
  <li>Создайте HTML-файл.</li>
  <li>Добавьте структуру страницы.</li>
</ol>
 
<a href="https://example.com">Открыть сайт</a>

Семантические теги

Название семантического элемента подсказывает его роль. Например, header обозначает вводную область, nav - область навигации, main - основное содержимое, а footer - нижнюю часть страницы или раздела.

<header>
  <nav aria-label="Основная навигация">
    <a href="/">Главная</a>
  </nav>
</header>
 
<main>
  <article>
    <h1>Как устроен HTML</h1>
    <p>HTML описывает структуру страницы.</p>
  </article>
</main>
 
<footer>Материалы курса</footer>

Семантическая разметка помогает:

• разработчику - быстрее находить нужную область страницы в коде и DevTools;
• вспомогательным технологиям, например скринридерам, - распознавать области страницы и помогать переходить между ними;
• поисковым системам - лучше понимать назначение содержимого. Это не гарантирует более высокое место в поиске.

section подходит для тематической части страницы, обычно со своим заголовком. article - для самостоятельного материала, который имеет смысл отдельно от соседних частей. div и span - нейтральные контейнеры: используйте их, когда нужно сгруппировать содержимое или оформить его, а подходящего по смыслу элемента нет.

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

Подробнее: основной синтаксис HTML на MDN, пустые элементы на MDN и запись разметки в JSX на React.dev.

Для семантики и доступности: семантический HTML на MDN, ориентиры страницы в материалах W3C и руководство Google по SEO.