Member Avatar for lithium1976

Can I put a <h1,2,3 etc> tag inside a <ul></ul>?

Im trying to get rid of a few of my divs, and I have a menu area which currently has a div wrapper, but I want to replace it with <ul>. But I also want to allow the area to have some scematic meaning.

What other method could I use?

  • 4 Contributors
  • 3 Replies
  • 122 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer for : a heading element must not be a direct child of a ul. The HTML content model for lists expects li elements (plus script/template elements); any h1–h6 you want visually inside the list needs to live inside an li, or you should place the heading outside the ul as a sibling. and were on the right track about list structure; the key is where the heading sits in the DOM.

About the single-h1 point from : HTML5 allows h1 inside sectioning roots (so you can have multiple h1s in different sectioning contexts), but in practice most sites use one document-level h1 for clarity and SEO. For a menu label it’s usually better to use a lower-level heading or an ARIA label rather than promoting a menu item to the page’s primary heading.

A recommended pattern for a semantic, accessible menu is to wrap the list in a nav (or give it role="navigation") and use a heading or aria-label for the menu name. That keeps the ul valid and avoids extra wrapper divs. Example pattern:

<nav aria-label="Main navigation">
  <h2 class="visually-hidden">Main menu</h2>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Style the list with CSS (reset list-style, use flex/grid for layout) and preserve keyboard focus styles. Avoid adding ARIA roles like role="menu" unless building an application-style widget. Validate markup with the W3C validator and see the HTML reference for lists and headings on MDN for full rules: ul — MDN and Heading elements — MDN.

Recommended Answers

All 3 Replies

Member Avatar for zmariow

Can I put a <h1,2,3 etc> tag inside a <ul></ul>?

Yes you can... for example:

<ul>
<li><h1>1</h1></li>
<li><h1>2</h1></li>
</ul>

Member Avatar for autocrat

Technically ... zmariow ... is correct, (so long as the Lists are not of Menu or Dir types).

The example of more than a single <h1> tag is not correct...
(you should only have a single <h1> ;) ).

Member Avatar for MidiMagic

You can't put anything directly inside the ul or ol tags except list items. But you can put the h1 etc. tags inside the li tags or other list content tags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.