How to organize the structure for a header?

CSS

/* Styles for the header container */
header {
  display: flex; /* Using flexbox for element alignment */
  justify-content: space-between; /* Distributing space between elements */
  align-items: center; /* Vertical alignment of elements */
  padding: 10px 20px; /* Inner spacing */
  background-color: #f0f0f0; /* Background color */
}

/* Styles for the logo */
.logo {
  flex-shrink: 0; /* Preventing logo from shrinking */
}

.logo img {
  height: 40px; /* Logo image height */
}

/* Styles for navigation */
nav ul {
  list-style: none; /* Removing list markers */
  margin: 0;
  padding: 0;
  display: flex; /* Using flexbox for horizontal menu items */
}

nav li {
  margin-left: 20px; /* Spacing between menu items */
}

nav a {
  text-decoration: none; /* Removing link underline */
  color: #333; /* Link text color */
}

/* Styles for buttons or other control elements */
.controls {
  display: flex; /* Using flexbox */
  align-items: center; /* Vertical alignment */
}

.controls button {
  margin-left: 10px; /* Spacing between buttons */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Company Logo">
  </div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Login</button>
    <button>Register</button>
  </div>
</header>

Main principles:

• Semantics: Use the <header> tag.
• Flexible design: Apply Flexbox or Grid for easy alignment and responsiveness.
• Component separation: Isolate logo, navigation, and buttons into separate blocks.
• Accessibility: Use semantic tags (<nav>, <ul>, <li>, <a>), alt attributes for images.
• Modularity: Style individual blocks (.logo, nav, .controls) for easy maintenance.
• Responsive design: Add media queries to adapt the header for different screen sizes.

The structure may vary depending on the complexity and content of the header (e.g., adding a search bar, dropdown menus, etc.).