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

HTML состоит из различных элементов, которые формируют блоки веб-страниц. Эти элементы делятся на «блочные» и «строчные».

Свойство CSS display позволяет преобразовывать элемент из блочного в строчный и наоборот.

Блочные элементы

Блочный элемент — это элемент HTML, который начинается с новой строки и занимает всю доступную ширину горизонтального пространства своего родительского элемента. Такие элементы создают блоки контента (абзацы, разделы страницы). Большинство элементов 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>

Try it Yourself »

Блочные элементы:
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Строчные элементы

В отличие от блочных элементов, строчные элементы не начинаются с новой строки. Они располагаются внутри строки и занимают ровно столько ширины, сколько необходимо. Строчные элементы включаются непосредственно в основной текст.

Строчные элементы обычно содержат другие строчные элементы, либо могут быть пустыми.

Пример строчного элемента:

html

<!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>

Try it Yourself »

Строчные элементы:
`<a>`
`<bdo>`
`<cite>`
`<i>`
`<label>`
`<q>`
`<small>`
`<sup>`
`<var>`

Практика

Какие из следующих утверждений о блочных и строчных элементах HTML являются верными?

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

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

Блочные элементы ​

Пример блочного элемента: ​

Строчные элементы ​