Boxes and sections

English

Bigger pages need structure — clear areas, not one long pile.
A <div> is a plain box. A <span> is a small inline box for a few words.
Boxes group things together, so you can arrange and style them later.

Русский

Блоки и секции

Большие страницы требуют структуры — четких областей, а не одного длинного кучи элементов.
<div> — это обычный блок. <span> — это маленький встроенный блок для нескольких слов.
Блоки группируют элементы вместе, чтобы вы могли позже arrange и стилизовать их.

English

Named sections

HTML has special boxes with meaningful names:
<header> (top), <main> (the main content), <footer> (bottom), <nav> (menu links).
They work like <div>, but the names tell people — and search engines — what each part is.

Русский

Именованные секции

HTML имеет специальные блоки со смысловыми названиями:
<header> (верхняя часть), <main> (основное содержимое), <footer> (нижняя часть), <nav> (ссылки меню).
Они работают как <div>, но названия сообщают людям и поисковым системам, что представляет собой каждая часть.

<header>
  <h1>My site</h1>
</header>
<main>
  <p>Welcome to my page.</p>
</main>
<footer>
  <small>Made by me</small>
</footer>

English

Classes name your boxes

A class is a label you add to a tag: <div class="card">.
It does nothing on its own — but soon, CSS will use it to style that box.
This is your bridge into the next half of the course.

Русский

Классы дают имена вашим блокам

Класс — это метка, которую вы добавляете к тегу: <div class="card">.
Сам по себе он ничего не делает, но скоро CSS использует его для стилизации этого блока.
Это ваш мост к следующей половине курса.

English

Common mistakes

<div> is a block (new line); <span> is inline (stays in the text).
Use semantic tags like <header> and <nav> where they fit.

Русский

Распространенные ошибки

<div> — это блочный элемент (новая строка); <span> — это встроенный элемент (остается в тексте).
Используйте семантические теги, такие как <header> и <nav>, где они уместны.

English

Now you try

Add a <header> and a <footer>, then give a box a class.
Next lesson, we start making things look good with CSS.

Русский

Теперь попробуйте сами

Добавьте <header> и <footer>, а затем присвойте блоку класс.
На следующем уроке мы начнем делать вещи красивыми с помощью CSS.

Explore · ⁨Исследовать⁩

A box wraps its content · ⁨Блок оборачивает свое содержимое⁩

A <div> is a box: content surrounded by padding, border, margin. · ⁨Блок ⟨<div>⟩ — это контейнер: содержимое, окруженное отступами, рамкой и полем.⁩

Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · ⁨Задайте странице верхний и нижний отступы. Оберните заголовок в ⟨<header>⟩, а примечание — в ⟨<footer>⟩.⁩

<h1>My site</h1>
<p>Welcome!</p>
<small>Made by me</small>

Give this box a name so we can style it later. Add class="card" to the <div>. · ⁨Дайте этой блоку имя, чтобы мы могли стилизовать его позже. Добавьте class="card" в <div>.⁩