Search code examples
htmlsemantic-markup

HTML5 - are <p> and <h1> considered valid content for <nav>?

I have a sidebar with latest news and random blog posts etc

<nav id="sidebar">
  <section id="latest_news">
    <h1>
      Latest News 
    </h1>
    <h2>
      <a href="/path/to/article">News Item 1</a>
    </h2> 
    <p>
      Truncated text from the news item in question
    </p>
    <a href="/news" title="View all news items" class="index">View all news items</a>
  </section>

  <section id="random_blog_post">
    <h1>
      Random Blog Post 
    </h1>
    <h2>
      <a href="/path/to/blog/post">Blog Post 1</a>
    </h2>
    <p>
      Truncated text from the random blog post in question
    </p>
    <a href="/blog" title="View all blog posts" class="index">View all blog posts</a>
  </section>
</nav>

As you can see, I've got sections, h1's and paragraphs inside my nav.

I'm just wondering if this allowed or considered good practice. Is there a better more semantic (or less) approach to marking-up and structuring such sidebar content?

Solution

  • Yes, this appears to be pretty valid html5. w3org have an example of navigation with h1 tags in it.