Home/ Questions/Q 6374465
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:29:30+00:00

I’m trying to implement correct sectioning with html5 sectioning elements and headlines while achieving

  • 0

I’m trying to implement correct sectioning with html5 sectioning elements and headlines while achieving the design/layout, my customer has requested (including certain restrictions).

The general layout will be something like this:

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

What I’m concerned with now is that if I use an html5 outliner, I get the breadcrumb nav and the main nav show up as untitled sections.
Following a hierarchical headline structure, I can’t give them headlines below h2 and naturally I wouldn’t “title” them at all and hiding a headline with css to “title” them feels wrong.

What’s the best way to stay semantically correct, confirm to seo standards and prevent those to appear as untitled sections?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Apparently, nav elements are untitled because they are sectioning elements.

    If you must have them as titled sections in your outline, you will need to add a heading inside them.

    In this instance, you could do the following…

    <nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

    Then hide the h2s with css.

    BTW, you should probably change div to section to be more semantic… here

    <section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>
    • 0