Jak zorganizować strukturę dla nagłówka?

CSS

/* Style dla kontenera nagłówka */
header {
  display: flex; /* Użycie flexbox do wyrównania elementów */
  justify-content: space-between; /* Rozkład przestrzeni między elementami */
  align-items: center; /* Wyrównanie elementów w pionie */
  padding: 10px 20px; /* Wewnętrzne odstępy */
  background-color: #f0f0f0; /* Kolor tła */
}

/* Style dla logo */
.logo {
  flex-shrink: 0; /* Zapobiega kurczeniu się logo */
}

.logo img {
  height: 40px; /* Wysokość obrazu logo */
}

/* Style dla nawigacji */
nav ul {
  list-style: none; /* Usuwa znaczniki listy */
  margin: 0;
  padding: 0;
  display: flex; /* Użycie flexbox do poziomego rozmieszczenia */
}

nav li {
  margin-left: 20px; /* Odstęp między elementami menu */
}

nav a {
  text-decoration: none; /* Usuwa podkreślenie linków */
  color: #333; /* Kolor tekstu linków */
}

/* Style dla przycisków lub innych elementów sterujących */
.controls {
  display: flex; /* Użycie flexbox */
  align-items: center; /* Wyrównanie pionowe */
}

.controls button {
  margin-left: 10px; /* Odstęp między przyciskami */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Logo firmy">
  </div>
  <nav>
    <ul>
      <li><a href="/">Strona główna</a></li>
      <li><a href="/about">O nas</a></li>
      <li><a href="/services">Usługi</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Zaloguj się</button>
    <button>Zarejestruj się</button>
  </div>
</header>

Podstawowe zasady:

• Semantyka: Używać tagu <header>.
• Elastyczny design: Stosować Flexbox lub Grid do łatwego wyrównania i responsywności.
• Oddzielenie komponentów: Wydzielić logo, nawigację, przyciski w oddzielne bloki.
• Dostępność: Używać semantycznych tagów (<nav>, <ul>, <li>, <a>) i atrybutów alt dla obrazów.
• Modularność: Stylować oddzielne bloki (.logo, nav, .controls) dla łatwej konserwacji.
• Responsywny design: Dodać media queries do dostosowania nagłówka do różnych rozmiarów ekranów.

Struktura może się różnić w zależności od złożoności i zawartości nagłówka (np. dodanie paska wyszukiwania, menu rozwijanego itp.).