Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p><a>#статьи</a></p>

2 <ul><li>4 сен 2025</li>

3 <li>0</li>

4 </ul><p>Разбираем, для чего нужен тег < body > в HTML и как его использовать.</p>

5 <p>Иллюстрация: Polina Vari для Skillbox Media</p>

6 <p>Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.</p>

7 <p>HTML-страница состоит из двух больших частей: "головы" и "тела". В "голове" (<em><head></em>) хранится служебная информация - например, название страницы и ссылки на стили. А в "теле" (<body>) находится всё, что видит пользователь: заголовки, тексты, картинки, кнопки, видео.</p>

8 <p>Без <body> сайт не сможет полноценно работать: браузеры, конечно, подставят его автоматически, но правильная и понятная разметка всегда должна содержать этот тег.</p>

9 <p>В этой статье мы разберём, что такое <body>, какие у него есть атрибуты, какие элементы можно размещать внутри и как он влияет на стили и работу скриптов.</p>

10 <p><strong>Содержание</strong></p>

11 <ul><li><a>Где находится тег <body></a></li>

12 <li><a>Какие элементы можно размещать в <body></a></li>

13 <li><a>Атрибуты тега <body></a></li>

14 <li><a>Что будет, если пропустить тег <body></a></li>

15 <li><a>Как взаимодействуют скрипты внутри <body> взаимодействуют с DOM</a></li>

16 <li><a>Как стилизовать <body> с помощью CSS</a></li>

17 <li><a>Доступность контента в <body></a></li>

18 </ul><p>Тег <body> всегда идёт после <head> и заканчивается перед закрывающим тегом </html>. Всё, что вы хотите показать пользователю, нужно писать именно внутри него.</p>

19 <p>Простейшая страница с <body> выглядит так:</p>

20 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Пример страницы</title> </head> <body> <h1>Заголовок страницы</h1> <p>Это абзац текста.</p> <img src="photo.jpg" alt="Фото"> </body> </html><p>В этом примере в теле страницы находятся заголовок, абзац и картинка. Всё это браузер показывает пользователю.</p>

21 <p>Важно помнить: в одном HTML-документе может быть только один <body>. Если поставить два и больше, браузер начнёт "путаться", и результат будет непредсказуемым.</p>

22 <p>Внутри <body> можно размещать почти всё содержимое сайта. Именно здесь находятся тексты, картинки, видео, таблицы, формы и кнопки. То есть всё то, с чем взаимодействует пользователь.</p>

23 <p>Есть только одно ограничение: теги, которые относятся к "голове" документа, - например, <title>, <meta>, <link> - внутри <body> использовать нельзя. Для них отведён <head>.</p>

24 <p>А вот что можно добавлять в тело страницы:</p>

25 <ul><li><strong>Тексты и заголовки</strong> - от <h1> до <h6>, абзацы <p>, цитаты <blockquote>.</li>

26 <li><strong>Списки</strong> - нумерованные <ol>, маркированные <ul>, а также списки описаний <dl>.</li>

27 <li><strong>Мультимедиа</strong> - изображения <img>, видео <video>, аудио <audio>, анимации и SVG-графику.</li>

28 <li><strong>Формы и таблицы</strong> - поля ввода, кнопки, таблицы, индикаторы загрузки, прогресс-бары.</li>

29 <li><strong>Структурные блоки</strong> - контейнеры <div> и <span>, а также семантические элементы вроде <header>, <nav>, <main>, <footer>.</li>

30 <li><strong>Скрипты</strong> - с помощью тега <script> можно подключать JavaScript.</li>

31 </ul><p>Главное - соблюдать правила вложения. Допустим, тег <li> (пункт списка) должен находиться только внутри <ul> или <ol>, а не сам по себе.</p>

32 <p>С помощью атрибутов можно задавать характеристики страницы: стили, язык текста и дополнительные данные или реакцию на действия пользователя.</p>

33 <p>Атрибуты бывают трёх видов:</p>

34 <ul><li><strong>Глобальные</strong> - их можно использовать почти при любом HTML-теге.</li>

35 <li><strong>Событийные</strong> - позволяют запускать JavaScript при действиях пользователя.</li>

36 <li><strong>Устаревшие</strong> - они сохранились со времён старого HTML, но сегодня их лучше не использовать, вместо них применяют CSS.</li>

37 </ul><p>Глобальные атрибуты (class, id, lang, style) описывают свойства элемента:</p>

38 <p><strong>id</strong> - уникальный идентификатор страницы (обычно у <body> он единственный).</p>

39 <body id="main-page"> ... </body><p>С его помощью можно, например, легко находить body в JavaScript:</p>

40 <p><strong>HTML</strong></p>

41 <body id="app"><p><strong>JS</strong></p>

42 const body = document.getElementById("app"); body.style.backgroundColor = "beige";<p>Или назначать стиль для конкретной страницы в многооконном сайте:</p>

43 <p><strong>CSS</strong></p>

44 body#app { background: lightblue; }<p>Здесь для страницы с идентификатором app назначается голубой фон, при этом другие страницы сайта могут иметь другой стиль.</p>

45 <p>class - классы для стилизации и работы скриптов. Атрибут class задаёт имя (или несколько имён) класса элемента.</p>

46 <p>Например:</p>

47 <body class="homepage dark-theme user-logged-in"> <h1>Привет!</h1> <p>Это пример, где у &lt;body&gt; сразу три класса.</p> </body><p><strong>CSS</strong></p>

48 body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } /* Класс homepage - оформление главной страницы */ body.homepage { background: lightblue; } /* Класс dark-theme - тёмная тема */ body.dark-theme { background: #111; color: #eee; } /* Класс user-logged-in - пользователь авторизован */ body.user-logged-in::before { content: "✔ Пользователь в системе"; display: block; margin-bottom: 15px; color: limegreen; font-weight: bold; }<p>В результате получим:</p>

49 <em>Скриншот: Google Chrome / Skillbox Media</em><p>style - встроенные стили (inline CSS). Это CSS-правила, которые записаны прямо в теге <body> с помощью атрибута style, а не во внешнем файле и не в блоке <style>. Они применяются ко всей видимой части документа.</p>

50 <body style="background-color: lightblue; color: darkblue; font-family: Arial, sans-serif;"> <h1>Привет!</h1> <p>Это пример использования атрибута style у &lt;body&gt;.</p> </body><p>Здесь:</p>

51 <ul><li>background-color: lightblue; - фон страницы голубой;</li>

52 <li>color: darkblue; - цвет текста тёмно-синий;</li>

53 <li>font-family: Arial, sans-serif; - весь текст будет набран гарнитурой Arial.</li>

54 </ul><p>Встроенные стили используют редко, в основном при тестах или для быстрых правок. В реальной разработке лучше подключать CSS с помощью тега <style> или отдельного файла - так код будет чище и гибче.</p>

55 <p>lang - указывает язык содержимого страницы. Обычно атрибут lang ставят в <html>, но иногда его нужно указать именно у <body> - например, если язык содержимого отличается от языка документа в целом:</p>

56 <html lang="en"> <head> <title>Многоязычный сайт</title> </head> <body lang="ru"> <h1>Добро пожаловать!</h1> </body> </html><p>Здесь:</p>

57 <ul><li><html lang="en"> - английский устанавливается как базовый (например, для метаданных и служебных частей).</li>

58 <li><body lang="ru"> - указывает на то, что страница русскоязычная.</li>

59 </ul><p><strong>dir</strong> - направление текста:</p>

60 <ul><li>ltr - слева направо (по умолчанию для русского, английского);</li>

61 <li>rtl - справа налево (арабский, иврит);</li>

62 <li>auto - браузер определяет автоматически.</li>

63 </ul><body dir="rtl"> <h1>مرحبا بالعالم</h1> <p>Это пример текста, который идёт справа налево.</p> </body><p>data-* - это специальные атрибуты, которые хранят дополнительные данные прямо в разметке. Эти данные не видно на странице, но к ним можно обращаться через JavaScript или CSS.</p>

64 <p>Например:</p>

65 <p><strong>HTML</strong></p>

66 <body data-theme="dark" data-user="guest" data-page="home"> <h1>Главная страница</h1> </body><p>Доступ из JavaScript:</p>

67 <script> // Получаем body const body = document.body; // Читаем data-атрибуты console.log(body.dataset.theme); // "dark" console.log(body.dataset.user); // "guest" console.log(body.dataset.page); // "home" // Меняем тему body.dataset.theme = "light"; </script><p><strong>CSS:</strong></p>

68 /* Стили для темы */ body[data-theme="dark"] { background: #222; color: #fff; } body[data-theme="light"] { background: #fff; color: #000; }<p>Это специальные атрибуты HTML, которые запускают JavaScript-код, когда с элементом что-то происходит (например, клик, загрузка, ввод текста или закрытие страницы). Они задают обработчики событий прямо в HTML.</p>

69 <p>Событийные атрибуты чаще всего используются для простых примеров. В реальной разработке вместо них обычно применяют<strong>addEventListener</strong> - встроенный метод JavaScript, который "подписывается" на событие (клик, нажатие клавиши, прокрутку и так далее) и выполняет определённую функцию, когда оно произойдёт. Это считается современным и гибким способом работы с событиями.</p>

70 <p>Вот часто используемые событийные атрибуты:</p>

71 <ul><li>onload - показывает сообщение, когда страница загрузилась;</li>

72 <li>onresize - пишет в консоль, если изменяется размер окна;</li>

73 <li>onkeydown - выводит сообщение при нажатии клавиши;</li>

74 <li>onclick - пишет в консоль при клике мышкой;</li>

75 <li>onbeforeunload - запрашивает подтверждение перед закрытием страницы.</li>

76 </ul><p>Например:</p>

77 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример событийных атрибутов</title> </head> <body onload="alert('Страница полностью загрузилась!')" onkeydown="alert('Вы нажали клавишу: ' + event.key)" onbeforeunload="return 'Вы уверены, что хотите покинуть страницу?'" > <h1>Привет!</h1> <p>Попробуйте нажать клавишу.</p> </body> </html><p>Перепишем тот же пример так, чтобы вместо событийных атрибутов в <body> использовать addEventListener.</p>

78 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример с addEventListener</title> </head> <body> <h1>Привет!</h1> <p>Попробуйте нажать клавишу.</p> <script> // Когда страница загрузится window.addEventListener("load", () => { alert("Страница полностью загрузилась!"); }); // Нажатие клавиши window.addEventListener("keydown", (event) => { alert("Вы нажали клавишу: " + event.key); }); // Перед уходом со страницы window.addEventListener("beforeunload", (event) => { event.preventDefault(); // Нужно для некоторых браузеров event.returnValue = "Вы уверены, что хотите покинуть страницу?"; }); </script> </body> </html><p>Эти атрибуты использовались в HTML4 для оформления, но сейчас их заменяют CSS:</p>

79 <ul><li>alink - цвет активной ссылки;</li>

80 <li>background - URL фонового изображения;</li>

81 <li>bgcolor - цвет фона;</li>

82 <li>link - цвет непосещённых ссылок;</li>

83 <li>text - цвет текста;</li>

84 <li>vlink - цвет посещённых ссылок.</li>

85 </ul><p>Пример:</p>

86 <body bgcolor="#f0f0f0" text="#333" link="#0066cc" vlink="#660099">  </body><p>Современная альтернатива (CSS):</p>

87 body { background-color: #f0f0f0; color: #333; } a:link { color: #0066cc; } a:visited { color: #660099; }<p>По правилам HTML тег <body> обязателен: без него страница считается неполной. Но современные браузеры умные и умеют подставлять его автоматически.</p>

88 <p>Допустим, вы написали код без <body>:</p>

89 <!DOCTYPE html> <html> <head> <title>Пример</title> </head> <h1>Заголовок</h1> <p>Абзац текста.</p> </html><p>Что делает браузер: он видит элементы <h1> и <p> после <head> и автоматически вставляет <body> ... </body>. Фактически код будет таким:</p>

90 <html> <head> <title>Пример</title> </head> <body> <h1>Заголовок</h1> <p>Абзац текста.</p> </body> </html><p>Даже если вы забудете и <head>, и <body>, браузер достроит их за вас. Но такая разметка будет невалидной - валидатор выдаст ошибку.</p>

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

92 <p>Когда браузер загружает страницу, он идёт сверху вниз: сначала читает <html>, потом <head>, затем <body> и всё, что в нём находится. При этом параллельно строится структура документа -<strong>DOM</strong>(Document Object Model).</p>

93 <p>JavaScript может обращаться только к элементам, которые уже есть в DOM. Поэтому, если скрипт запускается раньше, чем браузер успел создать нужный элемент, код работать не будет.</p>

94 <p>Есть несколько способов решить эту проблему:</p>

95 <p>Если разместить скрипт после разметки, то элементы уже будут загружены к тому моменту, когда браузер до него дойдёт.</p>

96 <body> <button id="btn">OK</button> <script> const button = document.getElementById("btn"); button.onclick = () => alert("Нажато!"); </script> </body><p>Здесь кнопка создаётся первой, и только потом выполняется скрипт. Поэтому всё работает.</p>

97 <p>Если подключать внешний JavaScript с помощью <script src="...">, можно добавить атрибут defer. Тогда код загрузится параллельно, но выполнится только после того, как браузер соберёт весь DOM.</p>

98 <script src="app.js" defer></script><p>Именно этот способ чаще всего применяют в реальной разработке: страница загружается быстрее, а скрипты не спотыкаются о недостающие элементы.</p>

99 <p>Тег <body> часто используют, чтобы задать базовое оформление для всей страницы. Например, общий фон, цвет текста или шрифт. Все элементы внутри <body> наследуют эти стили, если у них не прописаны собственные.</p>

100 <p>Самый простой пример:</p>

101 body { font-family: Arial, sans-serif; /* Общий шрифт */ color: #333; /* Цвет текста */ background-color: #f0f0f0; /* Фон */ }<p>Теперь весь текст будет набран шрифтом Arial, цвет станет тёмно-серым, а фон - светло-серым.</p>

102 <p>Есть несколько моментов, о которых полезно знать:</p>

103 <ul><li><strong>Фон:</strong>цвет или картинку, указанные для <body>, будет видно за всеми элементами страницы.</li>

104 <li><strong>Отступы:</strong>почти все браузеры добавляют к <body> небольшой внешний отступ (margin). Поэтому разработчики часто обнуляют его в начале работы:</li>

105 </ul>body { margin: 0; }<ul><li><strong>Высота и прокрутка:</strong>можно управлять тем, как страница растягивается и прокручивается.</li>

106 </ul>body { min-height: 100vh; /* Растянуть на всю высоту окна */ overflow-x: hidden; /* Убрать горизонтальную прокрутку */ }<ul><li><strong>Разница с</strong> <strong><html>:</strong>стили в <html> обычно влияют на всё окно браузера (например, задают общий фон), а стили в <body> применяются к "листу" контента, который видит пользователь.</li>

107 </ul><p>Вот пример, который показывает, чем стили в <body> отличаются от стилей в <html>:</p>

108 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Космос</title> <style> /* Фон всего окна браузера */ html { background: linear-gradient(to bottom, #0d1b2a, #000); height: 100%; } /* Белый "лист" контента */ body { margin: 40px; background-color: rgba(255, 255, 255, 0.1); color: #f1f1f1; font-family: "Trebuchet MS", sans-serif; text-align: center; border-radius: 20px; padding: 40px; backdrop-filter: blur(5px); /* Создаём эффект "стекла" */ } h1 { font-size: 3rem; margin-bottom: 20px; text-shadow: 0 0 10px #00f0ff; } p { font-size: 1.2rem; line-height: 1.6; } </style> </head> <body> <h1>???? Привет из космоса!</h1> <p> Тег <code>html</code> задаёт фон всей страницы, а тег <code>body</code> создаёт полупрозрачное "окно", на котором читается текст. </p> </body> </html><p>Страница будет выглядеть так:</p>

109 <em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы страница была удобна для всех пользователей, включая людей с ограниченными возможностями здоровья, нужно правильно оформлять содержимое внутри <body>.</p>

110 <p><strong>Используйте семантические теги:</strong>заголовки <h1> - <h6>, списки, абзацы и структурные элементы (<header>, <main>, <footer>). Это помогает экранным читалкам ориентироваться на странице.</p>

111 <p><strong>Добавляйте альтернативные тексты.</strong>Для изображений указывайте alt. Если картинка будет недоступна, останется хотя бы текст с её описанием, который смогут воспроизвести экранные читалки для людей с ограничениями зрения:</p>

112 <img src="cat.jpg" alt="Серый кот лежит на подоконнике"><p><strong>Следите за контрастом и читаемостью.</strong>Текст должен быть контрастным по отношению к фону и не слишком мелким - не менее 16 px.</p>

113 <p><strong>Доступность с клавиатуры.</strong>Все кнопки, ссылки и формы должны быть доступны через Tab. Используйте атрибуты tabindex, если нужно задать особое поведение некоторых элементов. Избегайте элементов, до которых можно добраться только с помощью мыши.</p>

114 <p>Иногда стандартных тегов не хватает для доступности. Например, вы сделали кнопку с помощью <div>. Для глаз пользователя это кнопка, а для экранного диктора - просто блок. Чтобы исправить это, используют ARIA-атрибуты (Accessible Rich Internet Applications). Они помогают описать элемент более точно.</p>

115 <ul><li>role - задаёт роль элемента.</li>

116 </ul><div role="button" tabindex="0">Отправить</div><p>Теперь диктор озвучит этот блок как кнопку, а tabindex="0" позволит выбрать её с клавиатуры.</p>

117 <ul><li>aria-label - даёт текстовое описание, если видимой подписи нет.</li>

118 </ul><button aria-label="Закрыть окно">✖</button><p>Диктор озвучит "Закрыть окно", даже если на странице только символ ✖.</p>

119 <ul><li>aria-hidden="true" - скрывает элемент от диктора.</li>

120 </ul><span aria-hidden="true">★</span><p>Звёздочка видна, но не читается вслух, это просто декоративный элемент</p>

121 <p>ARIA - не замена семантической разметки. Если есть подходящий тег (<button>, <nav>, <header>), используйте его. ARIA-атрибуты нужны только в случаях, когда обычных средств не хватает.</p>

122 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>