Урок 10 · HTML

Блочные и строчные элементы

Одни теги занимают всю строку, другие стоят внутри неё. От этого зависит, куда встанет следующий кусок страницы.

Почему это следующий шаг

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

Как сделать

Блочные элементы — p, h1, div, ul, section — начинаются с новой строки и тянутся на доступную ширину. Строчные — a, strong, span, em — занимают место по тексту. В блочный элемент можно вложить и блок, и строку. В строчный блок класть нельзя: браузер всё равно разломает такую вложенность.

<p>Читаю <a href="/html/spiski/">следующий урок</a> и выделяю <strong>главное</strong>.</p>
<ul>
  <li>Пункт списка — это уже блок</li>
</ul>

Что проверить

• Абзац стоит на своей строке, ссылка внутри него.
• Список не оказался внутри слова.
• Между двумя div нет лишнего абзаца, который ты не писал.