Poznaj zastosowania headera w HTML-u

Ewa Klimowicz

10 sierpnia, 2023

6 min

• Praca w IT
• Artykuły

Ostatnia aktualizacja 20 marca, 2024

Element header w HTML-u to semantyczny kontener, który zwykle zawiera wprowadzenie do sekcji lub całej strony. Mogą składać się na niego tytuły, logo, nawigacja i inne elementy, które są charakterystyczne dla nagłówka strony lub sekcji.

Sprawdź: Stwórz tabelę w HTML-u. Przykłady kodu

HTML header – podstawowa budowa znaczników

Nagłówek strony głównej

Podstawowa struktura znaczników HTML-a w headerze wygląda następująco:

<header>
  <h1>Tytuł strony</h1>
  <nav>
    <a href="strona1.html">Strona 1</a>
    <a href="strona2.html">Strona 2</a>
  </nav>
</header>

Ten kod HTML definiuje nagłówek strony, który składa się z kilku elementów:

• <header>: Otwierający i zamykający tag header definiuje kontener dla nagłówka strony. Wszystko, co znajduje się między tymi tagami, jest częścią nagłówka.
• <h1>: Wewnątrz nagłówka znajduje się tytuł strony, oznaczony tagiem <h1>. Jest to najważniejszy nagłówek na stronie i zwykle jest wykorzystywany do przedstawienia głównego tytułu strony. W tym przypadku tekst tytułu to “Tytuł strony”.
• <nav>: Tag <nav> definiuje sekcję nawigacji wewnątrz nagłówka. Jest to semantyczny element, który informuje przeglądarki i technologie wspomagające, że linki wewnątrz tego elementu są częścią głównej nawigacji strony.
• <a href="strona1.html">Strona 1</a> i <a href="strona2.html">Strona 2</a>: Wewnątrz elementu nawigacji znajdują się dwa linki, które prowadzą do innych stron (“strona1.html” i “strona2.html”). Te linki są oznaczone tagiem <a> z atrybutem href, który określa docelowy adres URL.

HTML – header sekcji

Poniższy kod tworzy sekcję na stronie z wyraźnie zdefiniowanym nagłówkiem, który zawiera tytuł i podtytuł oraz z główną treścią sekcji:

<section>
  <header>
    <h2>Nagłówek sekcji</h2>
    <p>Podtytuł sekcji</p>
  </header>
  <p>Treść sekcji...</p>
</section>

• <section>: Tag <section> definiuje kontener dla ogólnej sekcji strony. Jest to semantyczny element, który pomaga w organizacji zawartości i może być używany do grupowania powiązanych elementów.
• <header>: Wewnątrz sekcji znajduje się element <header>, który definiuje nagłówek tej konkretnej sekcji. Może zawierać różne elementy, takie jak tytuły, podtytuły, daty, autorów itp.
• <h2>: Wewnątrz nagłówka znajduje się tytuł sekcji oznaczony tagiem <h2>. Jest to drugi poziom ważności w hierarchii nagłówków HTML i w tym przypadku zawiera tekst “Nagłówek sekcji”.
• <p>: Również wewnątrz nagłówka znajduje się akapit z tekstem “Podtytuł sekcji”. Może to być dodatkowy opis, podtytuł lub inna informacja związana z nagłówkiem sekcji.
• <p> poza <header>: Poza nagłówkiem, ale wciąż wewnątrz sekcji, znajduje się kolejny akapit z tekstem “Treść sekcji…”. Reprezentuje on główną treść tej sekcji strony.

Jest to przykład dobrze zorganizowanej i semantycznie poprawnej struktury, która jest łatwa do zrozumienia przez przeglądarki, roboty wyszukiwarek i technologie wspomagające.

Dalsza część tekstu znajduje się pod materiałem wideo:

Inne przykłady wykorzystania headera w HTML-u

Nagłówek z logo i listą nawigacyjną

Poniższy kod tworzy nagłówek strony z logo i trzema linkami nawigacyjnymi zorganizowanymi w formie listy. Jest to typowa struktura nagłówka, która można spotkać na wielu stronach internetowych:

<header>
  <img src="logo.png" alt="Logo firmy">
  <nav>
    <ul>
      <li><a href="home.html">Strona główna</a></li>
      <li><a href="about.html">O nas</a></li>
      <li><a href="contact.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

• <header>: Tag <header> definiuje kontener dla nagłówka strony. Wszystko, co znajduje się między tymi tagami, jest częścią nagłówka.
• <img src="logo.png" alt="Logo firmy">: Wewnątrz nagłówka znajduje się obraz, który jest logo firmy. Atrybut src wskazuje ścieżkę do pliku obrazu (“logo.png”), a atrybut alt dostarcza alternatywny tekst, który opisuje obraz. Tekst alternatywny wyświetla się, gdy obraz nie może zostać załadowany i jest używany przez technologie wspomagające (czytniki ekranu).
• <nav>: Tag <nav> definiuje sekcję nawigacji wewnątrz nagłówka. Jest to semantyczny element, który informuje przeglądarki i technologie wspomagające, że linki wewnątrz tego elementu są częścią głównej nawigacji strony.
• <ul>: Wewnątrz elementu nawigacji znajduje się nieuporządkowana lista (<ul>), która zawiera elementy nawigacyjne. Jest to standardowy sposób organizacji nawigacji w formie listy.
• <li><a href="home.html">Strona główna</a></li> itd.: Każdy element listy (<li>) zawiera link (<a>), który prowadzi do innej strony na witrynie. W tym przypadku są tu trzy linki: “Strona główna”, “O nas” i “Kontakt”, a każdy z nich prowadzi do odpowiedniej strony.

Nagłówek z formularzem wyszukiwania

Poniższy kod tworzy nagłówek strony z tytułem i formularzem wyszukiwania. Użytkownik może wprowadzić zapytanie wyszukiwania w polu tekstowym i kliknąć przycisk “Szukaj”, aby wysłać zapytanie do serwera. Jest to typowa struktura, której można używać na stronach oferujących funkcję wyszukiwania:

<header>
  <h1>Nazwa strony</h1>
  <form action="/search" method="get">
    <input type="text" name="query" placeholder="Wyszukaj...">
    <button type="submit">Szukaj</button>
  </form>
</header>

• <header>: Tag <header> definiuje kontener dla nagłówka strony. Wszystko, co znajduje się między tymi tagami, jest częścią nagłówka.
• <h1>: Wewnątrz nagłówka znajduje się główny tytuł strony, oznaczony tagiem <h1>. Jest to najważniejszy nagłówek na stronie i w tym przypadku zawiera tekst “Nazwa strony”.
• <form action="/search" method="get">: Wewnątrz nagłówka znajduje się również formularz, który jest przeznaczony do wyszukiwania. Atrybut action określa adres URL, do którego zostaną wysłane dane formularza (w tym przypadku “/search”), a atrybut method określa metodę HTTP używaną do przesyłania danych (tutaj “get”).
• <input type="text" name="query" placeholder="Wyszukaj...">: Wewnątrz formularza znajduje się pole tekstowe, które pozwala użytkownikowi wprowadzić zapytanie wyszukiwania. Atrybut name nadaje nazwę temu polu (tutaj “query”), a atrybut placeholder dostarcza tekst wyświetlany w polu, zanim użytkownik coś wpisze (tutaj “Wyszukaj…”).
• <button type="submit">Szukaj</button>: Również wewnątrz formularza znajduje się przycisk, który służy do wysłania formularza. Atrybut type z wartością “submit” oznacza, że kliknięcie tego przycisku spowoduje wysłanie danych formularza do serwera.

Meta tagi

Meta tagi w headerze dostarczają metadanych dotyczących strony internetowej. Jednym z najważniejszych jest tag określający kodowanie znaków (charset), np. UTF-8, które jest standardem w branży zapewniającym prawidłowe wyświetlanie znaków z różnych języków i systemów pisma.

Tag viewport jest niezbędny dla stron responsywnych, umożliwiając kontrolę nad tym, jak zawartość jest skalowana i wyświetlana na urządzeniach mobilnych, co ma kluczowe znaczenie dla użyteczności i dostępności.

Meta tag description zawiera krótki opis zawartości strony, który jest wykorzystywany przez wyszukiwarki w snippetch wyników wyszukiwania, wpływając na klikalność.

Chociaż meta tag keywords (słowa kluczowe) kiedyś odgrywał dużą rolę w SEO, obecnie jego znaczenie zostało zminimalizowane z powodu nadużyć. Niemniej jednak, może on nadal służyć jako sposób na zorganizowanie i określenie tematyki strony.

Tag author (autor) dostarcza informacji o twórcy strony, co może być cenne dla czytelników szukających autorytetu i wiarygodności w prezentowanych treściach.

Wspólnie wspomniane meta tagi przyczyniają się do lepszego rozumienia strony przez przeglądarki i użytkowników, a także pomagają w optymalizacji wyszukiwania i dostępności strony.

Oto przykład kodu HTML wykorzystującego wcześniej omówione meta tagi w sekcji header:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="To jest przykładowa strona internetowa używająca różnych meta tagów w celu poprawy SEO i dostępności.">
    <meta name="keywords" content="przykład, HTML, meta tagi, SEO, dostępność">
    <meta name="author" content="Jan Kowalski">
    <title>Przykładowa Strona z Meta Tagami</title>
</head>
<body>

<h1>Witaj na mojej przykładowej stronie!</h1>
<p>To jest strona demonstrująca użycie różnych meta tagów w sekcji nagłówka.</p>

</body>
</html>

W powyższym kodzie:

• Deklaracja <!DOCTYPE html> określa, że dokument jest HTML5.
• <meta charset="UTF-8"> określa, że dokument używa kodowania znaków UTF-8, który wspiera większość znaków używanych w językach całego świata.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> umożliwia przeglądarkom mobilnym wyświetlanie strony w odpowiednim rozmiarze i skali.
• <meta name="description" content="..."> zawiera krótki opis strony, który może być wyświetlany w wynikach wyszukiwania.
• <meta name="keywords" content="..."> zawiera słowa kluczowe związane z zawartością strony, choć ich znaczenie dla SEO jest obecnie ograniczone.
• <meta name="author" content="Jan Kowalski"> informuje o autorze dokumentu.

Zawartość w <title> to tytuł strony, który jest wyświetlany na karcie przeglądarki i używany przez wyszukiwarki w wynikach wyszukiwania.

Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.

Czytaj także:

Formularz w HTML-u krok po kroku

Landing page – kluczowe elementy i przykłady projektów