diff --git a/files/uk/web/html/element/heading_elements/index.md b/files/uk/web/html/element/heading_elements/index.md new file mode 100644 index 0000000000..a9237e8caa --- /dev/null +++ b/files/uk/web/html/element/heading_elements/index.md @@ -0,0 +1,243 @@ +--- +title: "

–

: Елементи заголовків розділів HTML" +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +browser-compat: html.elements.h1 +--- + +{{HTMLRef}} + +Елементи [HTML](/uk/docs/Web/HTML) від **`

`** до **`

`** представляють шість рівнів заголовків розділів. `

` – для розділу найвищого рівня, а `

` – для найнижчого. + +{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Категорії вмісту + + Потоковий вміст, заголовковий вміст, дотиковий вміст. +
Дозволений вміст + Оповідальний вміст. +
Упускання тегів{{no_tag_omission}}
Дозволені батьківські елементи + Будь-який елемент, що приймає + потоковий вміст. +
Неявна роль ARIA + heading +
Дозволені ролі ARIA + {{ARIARole("tab")}}, {{ARIARole("presentation")}} і + {{ARIARole("none")}} +
Інтерфейс DOM{{domxref("HTMLHeadingElement")}}
+ +## Атрибути + +Ці елементи приймають лише [глобальні атрибути](/uk/docs/Web/HTML/Global_attributes). + +> **Примітка:** Атрибут `align` є застарілим; не слід його використовувати. + +## Примітки щодо застосування + +- Заголовкова інформація може використовуватися користувацькими агентами для автоматичного конструювання змісту документа. +- Слід уникати використання заголовкових елементів для змін розміру тексту. Натомість слід використовувати властивість {{glossary("CSS")}} {{cssxref("font-size")}}. +- Слід уникати пропускання рівнів заголовків: починайте з `

`, далі використовуйте `

`, і так далі. +- Слід використовувати лише один `

` на сторінку чи представлення. Він повинен стисло описувати загальне призначення вмісту. + +### Не слід використовувати декілька елементів `

` на одній сторінці + +Використання на одній сторінці більш ніж одного `

` було дозволено в старших версіях специфікації HTML, що включала концепцію _алгоритму плану_. Проте це ніколи не вважалося найкращим підходом. Більше про це – в [Не існує алгоритму плану документа (англ.)](https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html). + +Слід використовувати лише один `

` на сторінку і [вкладати заголовки одне в одного][#vkladenist], не перестрибуючи рівні. + +## Приклади + +### Всі заголовки + +Наступний код показує застосування заголовків усіх рівнів. + +```html +

Заголовок рівня 1

+

Заголовок рівня 2

+

Заголовок рівня 3

+

Заголовок рівня 4

+
Заголовок рівня 5
+
Заголовок рівня 6
+``` + +Ось результат цього коду: + +{{ EmbedLiveSample('vsi-zaholovky', '280', '300', '') }} + +### Сторінка-приклад + +Наступний код демонструє кілька заголовків з певним вмістом під ними. + +```html +

Елементи заголовків

+

Підсумок

+

Певний текст отут…

+ +

Приклади

+

Приклад 1

+

Певний текст отут…

+ +

Приклад 2

+

Певний текст отут…

+ +

Дивіться також

+

Певний текст отут…

+``` + +Ось результат цього коду: + +{{ EmbedLiveSample('storinka-pryklad', '280', '480', '') }} + +## Занепокоєння щодо доступності + +### Орієнтування + +Поширений підхід до орієнтування користувачів ПЗ читачів з екрана – перехід від заголовка, щоб швидко з'ясувати вміст сторінки. У зв'язку з цим важливо не пропускати одного чи більше рівнів заголовків. Це створило б плутанину, оскільки особа, що так орієнтується, може загубитися, не розуміючи, де подівся пропущений заголовок. + +#### Так робити не слід + +```html example-bad +

Заголовок рівня 1

+

Заголовок рівня 3

+

Заголовок рівня 4

+``` + +#### А так робити варто + +```html example-good +

Заголовок рівня 1

+

Заголовок рівня 2

+

Заголовок рівня 3

+``` + +#### Вкладеність + +Заголовки можуть бути вкладеними, як підрозділи, щоб відбити організацію вмісту сторінки. Більшість читачів з екрана також можуть утворити впорядкований список всіх заголовків на сторінці, що може допомогти особі швидко з'ясувати ієрархію вмісту: + +1. `h1` Жуки + + 1. `h2` Етимологія + 2. `h2` Поширення та різноманітність + 3. `h2` Еволюція + + 1. `h3` Пізній палеозой + 2. `h3` Юрський період + 3. `h3` Крейдяний період + 4. `h3` Кайнозойська ера + + 4. `h2` Зовнішня морфологія + + 1. `h3` Голова + + 1. `h4` Ротовий апарат + + 2. `h3` Торакс + + 1. `h4` Передньогруди + 2. `h4` Середньогруди + + 3. `h3` Ноги + 4. `h3` Крила + 5. `h3` Черево + +Коли заголовки вкладені, то рівні заголовків можуть бути "пропущені" при завершенні підрозділу. + +- [Заголовки • Структура сторінки • Підручники з вебдоступності WAI (англ.)](https://www.w3.org/WAI/tutorials/page-structure/headings/) +- [MDN розуміння WCAG, пояснення Настанов 1.3](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable#nastanovy-1.3-stvoriuite-vmist-shcho-mozhe-buty-predstavlenyi-v-riznyi-sposib) +- [Розуміння критерію успіху 1.3.1 | W3C розуміння WCAG 2.0 (англ.)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) +- [MDN розуміння WCAG, пояснення Настанов 2.4](/uk/docs/Web/Accessibility/Understanding_WCAG/Operable#nastanovy-2.4-orientovnist-nadavaite-korystuvacham-zmohu-znaity-vmist-i-zrozumity-de-vony-znakhodiatsia) +- [Розуміння критерію успіху 2.4.1 | W3C розуміння WCAG 2.0 (англ.)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html) +- [Розуміння критерію успіху 2.4.6 | W3C розуміння WCAG 2.0 (англ.)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html) +- [Розуміння критерію успіху 2.4.10 | W3C розуміння WCAG 2.0 (англ.)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html) + +### Позначення вмісту розділу + +Інший поширений підхід до орієнтування користувачів ПЗ читачів з екрана – утворити список [розділення вмісту](/uk/docs/Web/HTML/Element#rozdilennia-vmistu) і використовувати його для з'ясування компонування сторінки. + +Розділений вміст можна розмітити за допомогою комбінації атрибутів [`aria-labelledby`](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) та {{htmlattrxref("id")}}, які повинні стисло описувати призначення розділу. Такий підхід корисний в тих ситуаціях, коли на одній сторінці більш ніж один розділовий елемент. + +#### Приклад + +```html +
+ +
+ + + + +``` + +В цьому прикладі технологія читача з екрана оголосить, що є два розділи {{HTMLElement("nav")}}, один з яких називається "Первинна навігація", а другий – "Нижня навігація". Якби підписи не були надані, то особа, що використовує ПЗ читача з екрана була б змушена досліджувати вміст кожного елемента `nav`, аби з'ясувати його призначення. + +- [Застосування атрибута aria-labelledby](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) +- [Підписування областей • Структура сторінки • Підручники з вебдоступності W3C WAI (англ.)](https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby) + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{HTMLElement("p")}} +- {{HTMLElement("div")}} +- {{HTMLElement("section")}} diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index 872a3c3bf1..a3fab5aaac 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -68,6 +68,7 @@ непромісними непромісні непромісом +нерекомендовано нерядкове нерядкових нерядкові @@ -85,6 +86,7 @@ панорамовано парсинг парсингу +передньогруди перелічуваність перелічуваністю підваріанти @@ -119,6 +121,7 @@ рядки-об'єкти рядки-примітиви самодокументованим +середньогруди сетер сетери сетерів