HTML таг header
Пример
Кратък пример как се използва тагът <header>.
<header class="bg-light border-bottom mb-4">
<div class="container py-3 d-flex justify-content-between align-items-center">
<a href="/" class="navbar-brand fw-bold">Моят Сайт</a>
<nav class="d-flex gap-3">
<a href="#home" class="link-secondary">Начало</a>
<a href="#about" class="link-secondary">За нас</a>
<a href="#contact" class="link-secondary">Контакти</a>
</nav>
</div>
</header>
Опитай в редактора
Дефиниция и употреба
Елементът <header> представлява въвеждаща или навигационна секция за даден документ или секция от документ. Обикновено съдържа лого, заглавие, подзаглавие, навигационно меню, форма за търсене или други елементи, свързани с началната част на съдържанието.
<header> може да се използва както за цялата страница (глобален хедър), така и вътре в други семантични елементи като <article>, <section>, <aside> и др., за да обозначи техните собствени заглавни части. В една страница могат да съществуват множество <header> елементи, но не трябва да се поставя <header> вътре в <footer> или в друг <header>.
Елементът е семантичен и помага на търсачки, четци на екрана и други инструменти да разбират по-добре структурата на страницата. По подразбиране няма специално визуално оформление, затова често се комбинира с CSS и фреймуъркове като Bootstrap 5.3 за стилизиране и подредба (например чрез класове като .navbar, .container, .d-flex и др.).
Browser Support
| Browser | Поддръжка |
|---|---|
|
Chrome |
✔️ |
|
Firefox |
✔️ |
|
Edge |
✔️ |
|
Safari |
✔️ |
|
Opera |
✔️ |
Атрибути
Този елемент няма специфични атрибути.