Search code examples
htmlseosemantic-markupoutlineheading

HTML5 slogan as heading in eshop

How do I make a document outline like this using HTML5 semantic tags, when I need the first two headings in one block?

-MySite
--Books for children
---Book1
---Book2

When I use

<body>
 <header class="INeedThisInOneBox">
  <h1>MySite</h1>
   <h2 class="slogan">Books for children</h2>
 </header>
  <article>
   <h1>Book1</h1>
  </article>
  <article>
   <h1>Book2</h1>
  </article>
</body>

the outline goes:

-MySite
--Books for children
--Book1
--Book2

I would like to use semantic tags, but need to have SEO importance granted for the slogan.

Solution

  • You can only get this outline if you stop using sectioning content elements (example A) or if you start using sectioning content elements everytime when it’s appropriate (example B).

    Example A: no sectioning content elements

    <body>

  <header>
    <h1>MySite</h1>
    <h2>Books for children</h2>
  </header>

  <div>
    <h3>Book1</h3>
  </div>

  <div>
    <h3>Book2</h3>
  </div>

</body>

    Example B: sectioning content elements everywhere

    <body>

  <header>
    <h1>MySite</h1>
  </header>

  <section>

    <h2>Books for children</h2>

    <article>
     <h3>Book1</h3>
    </article>

    <article>
     <h3>Book2</h3>
    </article>

  </section>

</body>

    I wouldn’t advise to use example A. Example B is the correct way to mark this up (and I’d challenge your assumption that you would need to do this differently for SEO, but discussing SEO is off-topic on Stack Overflow).