CODEWITHSUNDEEP
html
Yami Odymel
Yami Odymel

Reputation: 1898

<small> in <h2> in <header> OR <small> next to <h2> in <header>?

I'm trying to create a description by using <small> tag,

and I also have a large title with <h2> tag, and they are all inside a <header> tag,

this is what it looks like now:

<header>
    <h2>User settings</h2>
    <small>Yep, here's the settings for you.</small>
</header>

But I'm not sure if the following usage would be better to make those tags meaningful?

<header>
    <h2>
        User settings
        <small>Yep, here's the settings for you.</small>
    </h2>
</header>

Should I put <small> in <h2> instead of putting <small> in <header>?

Upvotes: 1

Views: 1453

Answers (3)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

These options are not semantically equivalent. Putting small inside h2 means that the whole content of h2, including small content, is the heading that identifies the current section (or the whole page). For example, screen readers may read this whole long text as a document navigation option. With small outside h2, the section (or page) is identified with the short text that is the content of h2 element only.

Also, I doubt that the small element is the right choice for such sub-description. Wouldn't just p element (as suggested in W3C HTML spec for sub-headings) be more appropriate here?

Upvotes: 2

pwolaq
pwolaq

Reputation: 6381

well, it depends

if you put your <small> tag inside <h2> it will be more important (note that using <small> also affects importance)

on the other hand, some tools like html outliners will also list <small> content, which might not be desired behaviour

Upvotes: 2

hakki
hakki

Reputation: 6521

Mozilla says: https://developer.mozilla.org/tr/docs/Web/HTML/Element/header

<header>
<hx></hx>
</header>

prefer <small> in <hx>

twitter bootstrap docs prefer small in hx http://getbootstrap.com/css/#type-headings

Upvotes: 1

Related Questions