Ako zorganizovať štruktúru pre hlavičku?

CSS

/* Štýly pre kontajner hlavičky */
header {
  display: flex; /* Použitie flexboxu na zarovnávanie prvkov */
  justify-content: space-between; /* Rozloženie priestoru medzi prvkami */
  align-items: center; /* Zarovnanie prvkov vertikálne */
  padding: 10px 20px; /* Vnútorné odsadenia */
  background-color: #f0f0f0; /* Farba pozadia */
}

/* Štýly pre logo */
.logo {
  flex-shrink: 0; /* Zabraňuje stlačeniu loga */
}

.logo img {
  height: 40px; /* Výška obrázka loga */
}

/* Štýly pre navigáciu */
nav ul {
  list-style: none; /* Odstránenie odrážok zo zoznamu */
  margin: 0;
  padding: 0;
  display: flex; /* Použitie flexboxu na horizontálne rozloženie položiek menu */
}

nav li {
  margin-left: 20px; /* Odsadenie medzi položkami menu */
}

nav a {
  text-decoration: none; /* Odstránenie podčiarknutia odkazov */
  color: #333; /* Farba textu odkazov */
}

/* Štýly pre tlačidlá alebo iné ovládacie prvky */
.controls {
  display: flex; /* Použitie flexboxu */
  align-items: center; /* Zarovnanie vertikálne */
}

.controls button {
  margin-left: 10px; /* Odsadenie medzi tlačidlami */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Logo spoločnosti">
  </div>
  <nav>
    <ul>
      <li><a href="/">Domov</a></li>
      <li><a href="/about">O nás</a></li>
      <li><a href="/services">Služby</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Prihlásiť sa</button>
    <button>Registrácia</button>
  </div>
</header>

Hlavné princípy:

• Sémantika: Používať tag <header>.
• Flexibilný dizajn: Používať Flexbox alebo Grid na jednoduché zarovnanie a responzívnosť.
• Oddelenie komponentov: Vyčleniť logo, navigáciu, tlačidlá do samostatných blokov.
• Prístupnosť: Používať sémantické tagy (<nav>, <ul>, <li>, <a>), alt atribúty pre obrázky.
• Modularita: Štýlovať samostatné bloky (.logo, nav, .controls) pre ľahkú údržbu.
• Responzívny dizajn: Pridať media queries pre prispôsobenie hlavičky rôznym veľkostiam obrazoviek.

Struktúra sa môže líšiť v závislosti od zložitosti a obsahu hlavičky (napríklad pridanie vyhľadávacieho riadku, rozbaľovacích ponúk atď.).