Html Question posted in
Some basic documentation can be found here.

Html – What semantic tag should I use to divide the header into three parts?

enter image description here
Eng:
I want to divide the header into three parts, which semantic tag is better to use for this?

I used to use <div>, but I need something more professional. There were ideas to use <nav>, and divide it into three <div>, but I can’t understand how this option will differ from the previous one.

Rus:
Хочу разделить header на три части, какой семантический тег лучше использовать для этого?

Раньше я использовала , но нужно что-то более профессиональное. Были идеи использовать , и его разделить на три , но не могу понять насколько этот вариант будет отличаться от предыдущего.

Tags:

2

Answers


  1. 0

    i think section tag will be helpful if want to divide the navbar but seo optimizations will not change you can also use non semantic tags like div or span and give them proper id and class for furthur styling.

    Login or Signup to reply.
  2. 0

    To meet your image requirements, you can use the following semantic HTML structure to divide your header into three distinct sections. This format will help you build a well-organized header and can be adjusted as needed.

    Note: For this type of layout, you can use <section> tags for different areas and <nav> if you have navigation elements. Adjust the structure according to your needs.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <section class="header-left">
      <a href="/" aria-label="Homepage">
        <img src="logo.png" alt="Company Logo" style="height: 40px;">
        <span class="company-name">Company Name</span>
      </a>
    </section>
    <section class="header-center">
      <form action="/search" method="get">
        <input type="text" name="q" placeholder="Search..." aria-label="Search">
        <button type="submit">Search</button>
      </form>
    </section>
    <section class="header-right">
      <a href="/profile" aria-label="Profile">
        <img src="profile-icon.png" alt="Profile" style="height: 30px;">
      </a>
      <a href="/wishlist" aria-label="Wishlist">
        <img src="wishlist-icon.png" alt="Wishlist" style="height: 30px;">
      </a>
      <a href="/orders" aria-label="Orders">
        <img src="orders-icon.png" alt="Orders" style="height: 30px;">
      </a>
    </section>
  </header>
</body>
</html>
        header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #f8f9fa;
    }
    .header-left, .header-center, .header-right {
      flex: 1;
    }
    .header-center {
      text-align: center;
    }
    .header-right {
      text-align: right;
    }
    .header-left a, .header-right a {
      margin-left: 10px;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search