HTML Блочные и строчные элементы
All the HTML elements are categorized into two groups: block-level elements and inline elements. See the full list of block-level and inline elements.
HTML состоит из различных элементов, которые формируют блоки веб-страниц. Эти элементы делятся на «блочные» и «строчные».
Свойство CSS display позволяет преобразовывать элемент из блочного в строчный и наоборот.
Блочные элементы
Блочный элемент — это элемент HTML, который начинается с новой строки и занимает всю доступную ширину горизонтального пространства своего родительского элемента. Такие элементы создают блоки контента (абзацы, разделы страницы). Большинство элементов HTML являются блочными.
Блочные элементы используются внутри тела HTML-документа и могут содержать строчные элементы или другие блочные элементы.
Пример блочного элемента:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>This is a block-level element. It starts on a new line and takes up the full width.</div>
<p>This is another block-level element. It also starts on a new line.</p>
</body>
</html>| Блочные элементы: |
|---|
| <address> |
| <canvas> |
| <dt> |
| <footer> |
| <hr> |
| <noscript> |
| <pre> |
| <ul> |
Строчные элементы
В отличие от блочных элементов, строчные элементы не начинаются с новой строки. Они располагаются внутри строки и занимают ровно столько ширины, сколько необходимо. Строчные элементы включаются непосредственно в основной текст.
Строчные элементы обычно содержат другие строчные элементы, либо могут быть пустыми.
Пример строчного элемента:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
</body>
</html>| Строчные элементы: |
|---|
| <a> |
| <bdo> |
| <cite> |
| <i> |
| <label> |
| <q> |
| <small> |
| <sup> |
| <var> |
Практика
Какие из следующих утверждений о блочных и строчных элементах HTML являются верными?