CODEWITHSUNDEEP
htmlcss
user1052448
user1052448

Reputation: 433

Should the title be part of the nav element

Should I put the title of my page within the nav element if it will be on the same line? Or should the title be placed above the <nav> ?

TITLE OF PAGE               HOME BLOG PAGE1 PAGE2

code

<nav>

  <h1>TITLE OF PAGE</h1>

  <ul>
    <li>Home</li>
  </ul>

</nav>

Upvotes: 2

Views: 6144

Answers (6)

Sida
Sida

Reputation: 160

As you can see in W3C desciption, nav is not designed for this purpose but it may contain the navbar title NOT the page title. For example, consider this example from that link:

<nav>
    <h1>Navigation</h1>
    <ul>
        <li><a href="articles.html">Index of all articles</a></li>
        <li><a href="today.html">Things sheeple need to wake up for today</a></li>
        <li><a href="successes.html">Sheeple we have managed to wake</a></li>
    </ul>
</nav>

Upvotes: 3

Jarom&#237;r Šetek
Jarom&#237;r Šetek

Reputation: 478

As long as it makes sense, you can put the heading inside the nav element. That means if the heading introduces the navigation (also the whole page can be a large navigation so it can be even an h1), it is ok to put the heading inside.

However, if the heading is something general - for example the name of the article below or the name of the whole site, it shouldn't be inside the nav element and I recommend to use something like this:

<header>
    <h1>Page title</h1>
    <nav>
        <ul>
            <li><a href="something">FOO</a></li>
        </ul>
    </nav> 
</header>

For more information, see: https://www.w3.org/wiki/HTML/Elements/nav

Upvotes: 0

pourmesomecode
pourmesomecode

Reputation: 4318

What BurningLights said above is correct, if it isn't part of the nav then it shouldn't be in.

I put together (quickly so may not be the best) a jsfiddle of the navigation bar. I want my logo to be selectable and to navigate the user back to the home screen, therefore, having the logo within my nav works for me.

https://jsfiddle.net/cbq5my61/

Upvotes: 1

BCDeWitt
BCDeWitt

Reputation: 4773

You could optionally have your title contained in nav as the home link. Otherwise, it should be kept outside of the nav tag as it is not considered a nav link. This is for both SEO and better semantics. This doesn't mean that the navigation links can't flow to the right of the title, though.

Upvotes: 0

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

There are many ways you can do this, but when building a website you must also look from an SEO point of view. Your website must be semantically correct too.

It helps the crawlers and indexing site and building sitemap becomes more meaningful.

nav is used to contain navigtaion menus

You should use header tag for

  • Site Title
  • Site Logo
  • Site headers

Upvotes: 0

BurningLights
BurningLights

Reputation: 2397

The title should be outside of the nav tag. Nav tags are meant to contain navigation links. Since your title isn't a navigation link, it really shouldn't be in there. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav for a description of the nav tag.

Upvotes: 7

Related Questions