Skip to content

Commit

Permalink
Переписування тексту за коментарями
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladyslav-varnava
vladyslav-varnava committed Apr 17, 2024
1 parent e152420 commit 2da4c32
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions files/uk/web/html/element/header/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,71 @@
---
title: "<header> – Заголовок"
title: "<header> – Шапка шапки"
slug: Web/HTML/Element/header
page-type: html-element
browser-compat: html.elements.header
---

{{HTMLSidebar}}

**`<header>`** [HTML](/en-US/docs/Web/HTML) елемент представляє вступний вміст, як правило, групу вступних або навігаційних засобів. Він може містити деякі елементи заголовків, а також логотип, форму пошуку, ім'я автора та інші елементи.
Елемент [HTML](/uk/docs/Web/HTML) **`<header>`** (шапка, верхній колонтитул) представляє вступний вміст, як правило це група вступних або навігаційних засобів. Він може містити деякі елементи заголовків, а також логотип, форму пошуку, ім'я автора та інші елементи.

{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}

## Примітки щодо використання

Значення елемента `<header>` ідентичне до глобальної ознаки [`banner`](/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) у разі відсутності її у контенті. Тоді елемент `<header>` не є ознакою.
Елемент `<header>` значить абсолютно те саме, що й роль-віха [`banner`](/uk/docs/Web/Accessibility/ARIA/Roles/banner_role), коли `<header>` не вкладено всередину розділового вмісту. Якщо вкладено, то елемент `<header>` не є віхою.

Елемент `<header>` може визначати глобальний заголовок сайту, який описується як `banner` в дереві доступності. Зазвичай він включає логотип, назву компанії, пошук і, можливо, глобальну навігацію або гасло. Зазвичай він знаходиться у верхній частині сторінки.
Елемент `<header>` може визначати глобальну шапку сайту, яка в дереві доступності описується як `banner`. Зазвичай шапка включає логотип, назву компанії, пошук і, можливо, глобальну навігацію або гасло. Зазвичай вона знаходиться у верхній частині сторінки.

У протилежному випадку, для цього використовується `section` в дереві доступності, і зазвичай містить заголовок навколишньої секції (елемент `h1` - `h6`) і можливий підзаголовок, але це не обов'язково.
У протилежному випадку, в дереві доступності цей елемент стає `section`, і зазвичай містить заголовок навколишнього розділу (елемент `h1` - `h6`) і необов'язковий підзаголовок, але це **не** вимагається.

### Історичне використання

Елемент `<header>` спочатку використовувався у самому початку HTML для заголовків. Продемонстровано у [Найперший веб-сайт](http://info.cern.ch/). В якись момент, заголовки стали [`<h1>` через `<h6>`](/en-US/docs/Web/HTML/Element/Heading_Elements), що доволило `<header>` вільно заповнівати різні ролі.
Елемент `<header>` у самому початку існував у HTML для заголовків. Це можна спостерігати в [найпершому вебсайті](http://info.cern.ch/). В якийсь момент, заголовки стали [`<h1>` – `<h6>`](/en-US/docs/Web/HTML/Element/Heading_Elements), що дозволило `<header>` зайняти іншу роль.

## Атрибути

Це елемент вкличає лише [глобальні атрибути](/en-US/docs/Web/HTML/Global_attributes).
Це елемент приймає лише [глобальні атрибути](/en-US/docs/Web/HTML/Global_attributes).

## Приклади

### Заголовок сторінки
### Шапка сторінки

```html
<header>
<h1>Назва головної сторінки</h1>
<img src="favicon144.png" alt="MDN logo" />
<img src="mdn-logo-sm.png" alt="Логотип MDN" />
</header>
```

#### Результат

{{EmbedLiveSample('Page Header')}}
{{EmbedLiveSample('shapka-storinky')}}

### Заголовок статті
### Шапка статті

```html
<article>
<header>
<h2>Планета Земля</h2>
<p>
Опубліковано в Середу, <time datetime="2017-10-04">4 жовтня 2017</time> Остап Мирний Миколайович
Опубліковано в Середу, <time datetime="2017-10-04">4 жовтня 2017</time> Остапом Мирним
</p>
</header>
<p>
Ми живемо на планеті, що зелена й блакитна, з багатьма речами, що ще невідомі.
Ми живемо на планеті, що зелена й блакитна, де так багато всього ще не бачило людське око.
</p>
<p><a href="https://example.com/the-planet-earth/">Продовжити читання…</a></p>
</article>
```

#### Результат

{{EmbedLiveSample('Article Header')}}
{{EmbedLiveSample('Shapka-statti')}}

## Зауваження до доступності
## Занепокоєння щодо доступності

Елемент `<header>` визначає ознаку [`banner`](/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role), коли її контекст {{HTMLElement('body')}}. HTML заголовок не завжди вважається ознакою баннера коли він є нащадком елементів {{HTMLElement('article')}}, {{HTMLElement('aside')}}, {{HTMLElement('main')}}, {{HTMLElement('nav')}}, чи {{HTMLElement('section')}}.
Елемент `<header>` визначає віху [`banner`](/uk/docs/Web/Accessibility/ARIA/Roles/banner_role), коли його контекстом є {{HTMLElement('body')}}. Елемент шапки HTML не вважається віхою банера, коли є нащадком елемента {{HTMLElement('article')}}, {{HTMLElement('aside')}}, {{HTMLElement('main')}}, {{HTMLElement('nav')}} чи {{HTMLElement('section')}}.

## Технічний підсумок

Expand All @@ -78,53 +78,53 @@ browser-compat: html.elements.header
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
<a href="/uk/docs/Web/HTML/Content_categories#potokovyi-vmist"
>Потоковий вміст</a
>,
<a href="/en-US/docs/Web/HTML/Content_categories#palpable_content"
>Дозволений вміст</a
<a href="/uk/docs/Web/HTML/Content_categories#vidchutnyi-vmist"
>відчутний вміст</a
>.
</td>
</tr>
<tr>
<th scope="row">Дозволений вміст</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
<a href="/uk/docs/Web/HTML/Content_categories#potokovyi-vmist"
>Потоковий вміст</a
>, але буз <code>&#x3C;header></code> чи нащадку
{{HTMLElement("footer")}}.
>, але без жодних <code>&#x3C;header></code> і
{{HTMLElement("footer")}} серед нащадків.
</td>
</tr>
<tr>
<th scope="row">Пропуск тегу</th>
<td>Жоден, обидва теги (початковий і закриваючий) обов'язкові.</td>
<th scope="row">Пропуск тега</th>
<td>Немає; і початковий, і кінцевий теги – обов'язкові.</td>
</tr>
<tr>
<th scope="row">Дозволені батьки</th>
<td>
Будь-який елемент, що приймає
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>вміст потоку</a
>. Зверніть увагу, що елемент <code>&#x3C;header></code> не повинет бути нащадком {{HTMLElement("address")}},
Усі елементи, що приймають,
<a href="/uk/docs/Web/HTML/Content_categories#potokovyi-vmist"
>потоковий вміст</a
>. Зверніть увагу, що елемент <code>&#x3C;header></code> не повинен бути нащадком {{HTMLElement("address")}},
{{HTMLElement("footer")}} або іншого елемента
{{HTMLElement("header")}}.
</td>
</tr>
<tr>
<th scope="row">Неявна роль ARIA</th>
<td>
<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role">баннер</a
<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role">Banner</a
>, чи
<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"
>загальний</a
>generic</a
>
якщо нащадок
якщо елемент є нащадком
<code><a href="/en-US/docs/Web/HTML/Element/article">article</a></code
>, <code><a href="/en-US/docs/Web/HTML/Element/aside">aside</a></code
>, <code><a href="/en-US/docs/Web/HTML/Element/main">main</a></code
>, <code><a href="/en-US/docs/Web/HTML/Element/nav">nav</a></code> або
<code><a href="/en-US/docs/Web/HTML/Element/section">section</a></code>
або елемент де
або має
<code
>role=<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/article_role"
>article</a
Expand Down Expand Up @@ -154,27 +154,27 @@ browser-compat: html.elements.header
</td>
</tr>
<tr>
<th scope="row">Дозаолені ролі ARIA</th>
<th scope="row">Дозволені ролі ARIA</th>
<td>
<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> або
<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> і
<a href="/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>
</td>
</tr>
<tr>
<th scope="row">Інтерфейс DOM'у</th>
<th scope="row">Інтерфейс DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>

## Спецефікації
## Специфікації

{{Specifications}}

## Сумісність з баузерами
## Сумісність зі баузерами

{{Compat}}

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

- Інші секційні елементи: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}}, {{HTMLElement("Heading_Elements", "h6")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.
- Інші елементи, що пов'язані з розділовістю: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}}, {{HTMLElement("Heading_Elements", "h6")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.

0 comments on commit 2da4c32

Please sign in to comment.