CODEWITHSUNDEEP
htmlnavsemantic-markup
S. Goody
S. Goody

Reputation: 398

Semantic HTML markup for links to sections of current page in headers

I've written markup for a header with links to different pages and also sections of the current pages and I wanted to know the following:

Are the tag names I used semantically appropriate? Is the structure/hierarchy correct? Does my markup need to be optimized/changed for easy CSS styling?

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Setting</a></li>
            <li><a href="#">Progress</a></li>
            <li><a href="#">Learn</a></li>
        </ul>
    </nav>
    <ul>
        <li><a href="#">Section 1</a></li>
        <li><a href="#">Section 2</a></li>
        <li><a href="#">Section 3</a></li>
        <li><a href="#">Section 4</a></li>
        <li><a href="#">Section 5</a></li>
    </ul>
</header>

I want this markup to be as standardized as possible and also being ready to be styled in any possible way without the need to go back to the markup and change it.

Upvotes: 1

Views: 1221

Answers (2)

unor
unor

Reputation: 96607

The nav element represents the navigation for the section it’s in:

  • For the site-wide navigation, the nav should be in the body sectioning root element (because this represents the whole page).

  • For a table of contents (like in an Wikipedia article), the nav should be in the section/article sectioning content element which represents the content the ToC is for.

(Example 9 in the nav spec shows exactly this case.)

So, you would ideally use something like this (assuming it’s some kind of article):

<body>

<h1>Site title</h1>

<nav>
  <!-- the nav for the site-wide navigation -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Setting</a></li>
    <li><a href="#">Progress</a></li>
    <li><a href="#">Learn</a></li>
  </ul>
</nav>

<article>
  <h2>Article title</h2>

  <nav>
    <!-- the nav for the article -->
    <ul>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2</a></li>
      <li><a href="#">Section 3</a></li>
      <li><a href="#">Section 4</a></li>
      <li><a href="#">Section 5</a></li>
    </ul>
  </nav>

</article>

</body>

(Each section can have its own header, so you could place the first nav in the body-header and the second nav in the article-header, if you want.)

Upvotes: 1

Joe Lorthemier Rauzes
Joe Lorthemier Rauzes

Reputation: 83

i would say SEO related... Meta Tags we called it.

The logo image it should be - alt tag is important. Example your website is "Basketball forum" related.. you can put inside that alt="" like this alt="Basketball forum Logo" then try to all images in your website, you have to write an alt tag keywords related page/topic.

then the Element - you have to write a title on it, so people or Search engine can see where the link is heading.

Example:

<a href="/basketball_player_names" title="Basketball Player Names">link</a>

SEO is really really huge. More info folow the link below.. its from google https://developers.google.com/search/

Upvotes: 1

Related Questions