Header

Element <header> w HTML5 jest używany do określenia wstępu strony lub sekcji. Może zawierać tytuły, logo, informacje o autorze, wyszukiwarkę, linki nawigacyjne i inne elementy wprowadzające. Wprowadzony w HTML5, <header> jest częścią semantycznych elementów, które ułatwiają budowanie bardziej dostępnych i strukturalnych stron internetowych. W tej lekcji omówimy różne zastosowania <header>, a także pokażemy, jak można go wykorzystać do tworzenia bardziej zorganizowanych i semantycznie poprawnych stron internetowych.

Przykład użycia

Poniższy kod HTML przedstawia prosty przykład użycia elementu <header> w połączeniu z innymi elementami semantycznymi HTML5.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia elementu header w HTML5</title>
    <style>
        header {
            background-color: #f3f3f3;
            padding: 20px;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            padding: 10px;
        }
        nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>

<header>
    <h1>Moja Strona Internetowa</h1>
    <p>Witaj na mojej stronie internetowej!</p>
    <nav>
        <a href="#">Strona Główna</a>
        <a href="#">O nas</a>
        <a href="#">Kontakt</a>
    </nav>
</header>

<main>
    <section>
        <h2>O Stronie</h2>
        <p>To jest przykład strony internetowej używającej elementu 
           <code><header></code>.</p>
    </section>
</main>

</body>
</html>

W powyższym przykładzie, element <header> zawiera tytuł strony (<h1>), krótki opis (<p>) oraz nawigację (<nav> z linkami). Użycie tego elementu pozwala na lepszą organizację kodu i zwiększa dostępność strony.

Różne zastosowania elementu <header>

Element <header> może być używany nie tylko na początku strony, ale także jako wstęp do różnych sekcji na stronie, takich jak artykuły, posty na blogach czy sekcje nagłówkowe. Oto kilka przykładów, gdzie <header> może być przydatny:

  • Na początku artykułu, zawierając tytuł i autora artykułu.
  • W sekcjach strony, wyróżniając ich tytuły i wprowadzenia.
  • W blogach, jako część każdego posta, wskazując tytuł i datę publikacji.

Podsumowanie

Element <header> w HTML5 jest potężnym narzędziem semantycznym, które pomaga w strukturyzacji strony internetowej. Umożliwia tworzenie czytelnych i dostępnych stron, z wyraźnie zdefiniowanymi sekcjami i nawigacją. Poprawne użycie <header> wraz z innymi elementami semantycznymi HTML5 może znacznie poprawić jakość strony internetowej, zarówno pod względem SEO, jak i użytkowania przez osoby z różnymi potrzebami.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top