Hoe organiseer je de structuur voor de header?

CSS

/* Stijl voor de header-container */
header {
  display: flex; /* Gebruik van flexbox voor uitlijning van elementen */
  justify-content: space-between; /* Verdeling van de ruimte tussen elementen */
  align-items: center; /* Verticale uitlijning van elementen */
  padding: 10px 20px; /* Binnenmarges */
  background-color: #f0f0f0; /* Achtergrondkleur */
}

/* Stijlen voor het logo */
.logo {
  flex-shrink: 0; /* Voorkomt dat het logo krimpt */
}

.logo img {
  height: 40px; /* Hoogte van de logo-afbeelding */
}

/* Stijlen voor de navigatie */
nav ul {
  list-style: none; /* Verwijdert lijstmarkeringen */
  margin: 0;
  padding: 0;
  display: flex; /* Gebruik van flexbox voor horizontale plaatsing */
}

nav li {
  margin-left: 20px; /* Spatie tussen menu-items */
}

nav a {
  text-decoration: none; /* Verwijdert onderstreping van links */
  color: #333; /* Kleur van de tekst van links */
}

/* Stijlen voor knoppen of andere besturingselementen */
.controls {
  display: flex; /* Gebruik van flexbox */
  align-items: center; /* Verticale uitlijning */
}

.controls button {
  margin-left: 10px; /* Spatie tussen knoppen */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Bedrijfslogo">
  </div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">Over ons</a></li>
      <li><a href="/services">Diensten</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Inloggen</button>
    <button>Registreren</button>
  </div>
</header>

Basisprincipes:

• Semantiek: Gebruik de <header>-tag.
• Flexibel ontwerp: Gebruik Flexbox of Grid voor eenvoudige uitlijning en responsiviteit.
• Componentdeling: Markeer logo, navigatie en knoppen als aparte blokken.
• Toegankelijkheid: Gebruik semantische tags (<nav>, <ul>, <li>, <a>) en alt-attributen voor afbeeldingen.
• Modulariteit: Style de afzonderlijke blokken (.logo, nav, .controls) voor gemakkelijk onderhoud.
• Responsief ontwerp: Voeg media queries toe om de header aan te passen aan verschillende schermformaten.

Structuur kan variëren afhankelijk van de complexiteit en inhoud van de header (bijvoorbeeld het toevoegen van een zoekbalk, dropdown-menu's, enz.).