Comments and neat nesting · Комментарии и аккуратная вложенность
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
Comments
- A comment is a note for you, not for the reader.
- The browser ignores it — it never shows on the page.
- Write it like this:
<!-- this is a comment -->.
Русский
Комментарии
- Комментарий — это заметка для себя, а не для читателя.
- Браузер его игнорирует — он никогда не показывается на странице.
- Пишите его так:
<!-- this is a comment -->.
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
English
Tags go inside tags
- HTML tags nest: one pair can sit inside another.
- A
<div>is a plain box you can put other things in. - Indent the inside tags a little, so the nesting is easy to read.
Русский
Теги вкладываются друг в друга
- Теги HTML вкладываются: одна пара может находиться внутри другой.
- ⟨
<div>⟩ — это обычный контейнер, в который можно поместить другие элементы. - Сделайте отступ для внутренних тегов немного больше, чтобы вложенность было легко читать.
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
English
Common mistakes
- Tags must nest, not overlap:
<b><i>x</i></b>, never<b><i>x</b></i>. - A comment is
<!-- ... -->and is ignored by the browser.
Русский
Распространенные ошибки
- Теги должны быть вложенными, а не перекрывающимися: ⟨
<b><i>x</i></b>⟩, никогда не ⟨<b><i>x</b></i>⟩. - Комментарий выглядит как
<!-- ... -->и игнорируется браузером.
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
Русский
Теперь попробуйте сами
- Комментарии помогают вам поддерживать порядок; вложенность создает структуру.
- Оставьте комментарий, затем поместите абзац внутрь тега
<div>.
Explore · Исследовать
Neat nesting = the tree · Аккуратная вложенность = дерево
Indentation in your HTML mirrors the parent/child tree. · Отступы в вашем HTML отражают дерево родитель/потомок.
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · Оставьте заметку для себя. Добавьте комментарий, например, <!-- TODO: add a photo -->.
Put the paragraph inside a box. Wrap it in a <div> … </div>. · Поместите абзац внутрь блока. Оберните его в <div> … </div>.