CODEWITHSUNDEEP
htmltags
justme
justme

Reputation: 517

Number of H1 in HTML5 era

This should be a quick one for you.. I know that in the HTML5 era multiple h1 tags are allowed as long as they are part of sections (always using the "article" or "section" and sometimes "nav").

My question is that is it allowed to have just one single H1 outside of a section respecting the one-h1-rule per page of the pre-html5-era .. and use the rest of h1 inside the sections?

So can these two H1 tags co-exist? 

<div id="logo">
<h1><a href="index.html">... </a></h1>
</div>

<div class="container">
    <article>
        <header>

            <h1 style="font-size: 2em;">Sometext</h1>

        </header>
    </article>
</div>

Upvotes: 1

Views: 374

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14964

It's perfectly acceptable to use H1s the way you suggested in your question.

For example, in Bootstrap you could use this:

<a class="navbar-brand" href="#">Navbar</a>

or this instead:

<h1 class="navbar-brand">Navbar</h1> in the nav bar.

Upvotes: 0

Quentin
Quentin

Reputation: 944559

The HTML 5.2 recommendation says:

There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure.

So, while you can do as your code example shows in theory, in practise you shouldn't.

Upvotes: 1

Related Questions