1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: Блокові елементи
slug: Web/HTML/Block-level_elements
tags:
- HTML
- HTML5
translation_of: Web/HTML/Block-level_elements
---
<p><span class="seoSummary">В HTML (<strong>Hypertext Markup Language </strong>— мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або <a href="/en-US/docs/HTML/Inline_elements">рядкові</a>. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює. </span></p>
<p>Браузери зазвичай відображають кожний блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або один під одним. </p>
<div class="note">
<p>Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).</p>
</div>
<p>Приклади нижче показують, як працюють блокові елементи: </p>
<h2 id="Block-level_Example" name="Block-level_Example">Блокові елементи</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Цей параграф є блоковим елементом; колір його бекграунду змінений, щоб показати батьківський елемент параграфа.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p { background-color: #8ABB55; }
</pre>
<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
<h2 id="Застосування">Застосування</h2>
<ul>
<li>Блокові елементи можуть існувати тільки всередині елементу {{ HTMLElement("body") }}.</li>
</ul>
<h2 id="Блокові_проти_рядкових">Блокові проти рядкових</h2>
<p>Є кілька ключових відмінностей між блоковими і рядковими елементами:</p>
<dl>
<dt>Форматування</dt>
<dd>Типово, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку. </dd>
<dt>Модель контенту</dt>
<dd>Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.</dd>
</dl>
<p>Розрізнення "блокові елементи vs. рядкові елементи" вживається в специфікаціях HTML до версії 4.01. В HTML5 це протиставлення заміщене більш складними поняттями <a href="/en-US/docs/HTML/Content_categories">категорій контенту</a>. Блокові елементи здебільшого відповідають категорії <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> (розміщення контенту) в HTML5, тоді як рядкові — категорії <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> (текст і його розмітка), з декількома додатковими категоріями.</p>
<h2 id="Елементи">Елементи</h2>
<p>Нижче подається повний перелік усіх блокових елементів HTML (технічно, у нових елементів, представлених у HTML5, "блоковість" вже не визначається). </p>
<div class="threecolumns">
<dl>
<dt>{{ HTMLElement("address") }}</dt>
<dd>Контактна інформація.</dd>
<dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Вміст статті.</dd>
<dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Бічний контент.</dd>
<dt>{{ HTMLElement("blockquote") }}</dt>
<dd>Довга блок-цитата.</dd>
<dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Канва для малюнків.</dd>
<dt>{{ HTMLElement("dd") }}</dt>
<dd>Описує термін в переліку визначень.</dd>
<dt>{{ HTMLElement("div") }}</dt>
<dd>Поділ документа.</dd>
<dt>{{ HTMLElement("dl") }}</dt>
<dd>Перелік визначень.</dd>
<dt>{{ HTMLElement("dt") }}</dt>
<dd>Термін в переліку визначень.</dd>
<dt>{{ HTMLElement("fieldset") }}</dt>
<dd>Лейбл (назва) для набору полів.</dd>
</dl>
<dl>
<dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Підпис зображення.</dd>
<dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Групує медіаконтент з підписом (див. {{ HTMLElement("figcaption") }}).</dd>
<dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Секція або футер сторінки. </dd>
<dt>{{ HTMLElement("form") }}</dt>
<dd>Форма введення.</dd>
<dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
<dd>Заголовки рівнів 1-6.</dd>
<dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Секція або хедер сторінки.</dd>
<dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Групує контент хедера.</dd>
<dt>{{ HTMLElement("hr") }}</dt>
<dd>Горизонтальна роздільна лінія.</dd>
<dt>{{ HTMLElement("li") }}</dt>
<dd>Пункт переліку.</dd>
<dt>{{ HTMLElement("main") }}</dt>
<dd>Містить основний контент, унікальний для цього документу.</dd>
<dt>{{ HTMLElement("nav") }}</dt>
<dd>Містить навігацію посилань. </dd>
</dl>
<dl>
<dt>{{ HTMLElement("noscript") }}</dt>
<dd>Контент, який буде відображатися, якщо скрипт не підтримується або вимкнений. </dd>
<dt>{{ HTMLElement("ol") }}</dt>
<dd>Нумерований список (перелік).</dd>
<dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Вихідні дані форми.</dd>
<dt>{{ HTMLElement("p") }}</dt>
<dd>Параграф.</dd>
<dt>{{ HTMLElement("pre") }}</dt>
<dd>Попередньо відформатований текст.</dd>
<dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Секція веб-сторінки.</dd>
<dt>{{ HTMLElement("table") }}</dt>
<dd>Таблиця.</dd>
<dt>{{ HTMLElement("tfoot") }}</dt>
<dd>Футер таблиці.</dd>
<dt>{{ HTMLElement("ul") }}</dt>
<dd>Ненумерований список (перелік).</dd>
<dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Відеоплеєр.</dd>
</dl>
</div>
<h3 id="See_also" name="See_also"><br>
Також дивися:</h3>
<ul>
<li><a href="/en-US/docs/Web/HTML/Inline_elements">Рядкові елементи</a></li>
</ul>
|
