Correct way of creating nav with header logo inside?

HTML & CSS
,
1

I’m trying to create a horizontal navbar with the logo and website title on the left side and links on the right side(using Flex display). Which of these is correct and should I also wrap the .company-title inside an h1 element for semantic reasons? Thank you in advance for the reply.

<nav role="navigation">
    <header role="banner">
        <a href="#"><img src="logo.png" alt="Logo" width="50"></a>
        <a href="#" class="company-title">Company</a>
    </header>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Items</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

or should it be:

<header role="banner">
    <nav role="navigation">
        <ul>
            <li><a href="#"><img src="logo.png" alt="Logo" width="50"></a></li>
            <li><a href="#" class="company-title">Company</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

or

<header role="banner">
    <a href="#"><img src="logo.png" alt="Logo" width="50"></a>
    <a href="#" class="company-title">Company</a>
</header>
<nav role="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Items</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
2

Three choices of HTML and no css. Can you improve that by adding the respective CSS?.. and also inlude the height of the images by using the height=“” attribute in the HTML img element?

It would be helpful if you make screenshots and show us the view that goes with the HTML. In other words, show us more of what you have done and also tell us what you wish to see.

Do you know what a “working page” is? It’s mentioned in our new user posting guidelines. That would be ideal.

Do you expect the page to be responsive and work on mobile devices, too?

Have you searched our site for threads about header layouts?

3

I had that same question a while back, some discussion on it in the first 3 posts of this thread.

Paul
For company sites I feel the the company name should really be the h1 on each page but its one of those things that can be argued every which way.

That’s how I chose to handle the company name, in an h1 in the header.
Titles for sub pages then become h2 for me. I don’t go for multiple h1 tags in a page even if html5 allows it.

In regards to your 2nd example. I would not put my logo in the list of links. It could limit the way you style your list and I feel it should be independent of the links. I’ve done them as background images on another anchor in the header before. That way it gives you a home page link from the logo. At the same time you can have a “home” link in your list.

EDIT:
Looking at your html examples again, I would definitely stay away from the 1st one. You would not want to nest your header in your nav. That would break the semantics of both of them. Then if your h1 was in the header it would wind up being a child of the nav. That would be confusing.

The 3rd example comes closest to what I’d do. I would place the company title in an h1, whether it has a link or not is up to you. I think a link in the logo is enough, people have come to expect a link in the logo.

In this markup below, the logo div can float left/right and then your h1 would slide up beside it

<header role="banner">
    <div class="logo"><a href="#"></a></div>
    <h1>Company Name</h1>
</header>
<nav role="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Items</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.