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
✔️

Атрибути

Този елемент няма специфични атрибути.