Semantically, Which Is More Correct: a in H2, or H2 in A

Semantically, which is more correct: a in h2, or h2 in a?

You can only place <h2> elements within <a> elements if you're working with HTML5, which allows any other elements within <a> elements. Previous specifications (or current ones however you want to look at them) never allowed this.

The usual way of doing this is to place <a> within <h2>. This works, has always worked, and has been the only valid way to do it before HTML5, for heading links, as the link refers to the text in that heading. You rarely need to place <h2> within <a> unless that <h2> is part of some more complex structure which functions as a hyperlink as a whole.

Is it semantically incorrect to place h2 tags between li tags?

Is there a particular reason to put "Contact" inside a li? It seems like it's a header to the list rather than a part of the list, so I'd do:

<h2>Contact</h2>
<ul>
 <li>my email</li>
 <li>my phone</li>
</ul>

Is it semantically correct to use h2 tag inside summary tag?

The semantics would depend on the specific content you had and the context it appears in.

From a validity point of view, the spec says:

Content model:

Phrasing content, optionally intermixed with heading content.

So, it is valid.

Is it semantically correct to have multiple h2 tags in one HTML document?

Yes semantically that is correct.

Edit
It does not look like the w3 has any restriction on the max occurrences of header entities.

http://www.w3.org/TR/html40/struct/global.html#edef-H1

http://www.w3.org/TR/html40/sgml/dtd.html#heading

Both code are perfectly valid , but which is semantically correct?

That depends on if the text is a paragraph or not. It probably is, but it is hard to tell from the placeholder content.

(This assumes that having the content as an ordered list item is semantically correct in the first place.)

Is nesting a h2 tag inside another header with h1 tag semantically wrong?

“Semantically wrong” is largely a matter of opinion (“semantics” means “relating to meaning”, but what would be the meaning here?), but the construct isn’t even syntactically (formally) correct. According to all HTML specifications and drafts, an h1 element must not contain an h2 element.

As regards to markup for a “subheading”, or a secondary part of a heading, there have been heavy debates on it, especially as regards to the proposed hgroup element (which would let you use h1 followed by h2 as if it were a single heading). The practical approach has been, and still is, to use markup like

<h1 class="fixed">
Primary heading text<br>
<small class="absolute">
Secondary heading text
</small>
</h1>

I have preserved your class names here, but they suggest that perhaps you should not be using heading elements at all. The h1 element is supposed to be the overall heading for the page, and an h2 element is supposed to be a heading at the next lower level, for a top-level section of the page.

What HTML5 tags should a three section footer contain use

You may want to add the address-tag around your contact information:

<footer>
    <section>
        <h1>Contact</h1>
        <address>
            <ul>
                <li><a href="snip">Email</a></li>
                <li><a href="snip">Tweet</a></li>
            </ul>
        </address>
    </section>
    <section>
        <h1>Explore</h1>
        <ul>
            <li><a href="snip">Stack Overflow</a></li>
            <li><a href="snip">LinkedIn</a></li>
            <li><a href="snip">Flickr</a></li>
            <li><a href="snip">Google+</a></li>
        </ul>
    </section>
    <section>
        <h1>About</h1>
        <p>
           snip
        </p>
    </section>
</footer>

this would be semantically correct but watch out for older browsers which are having problems with the implementation of <address>. In Firefox 3.6.12 were no block-elements allowed to be placed inside <address> like discussed here.

EDIT:
Also change the <h2> to <h1>:

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

What's the most semantically correct way to do subheadings?

HTML5 solves this by way of the hgroup tag. Use that.

If you feel you're not yet ready to migrate, then I'd say you should still go with proper heading tags whenever you're marking up a heading. If you feel uncomfortable marking up two headings as siblings, perhaps you can adjust your copy to reduce the number of headings to just one.

Edit:

Since the time of writing, the future of hgroup has been endangered: http://dev.w3.org/html5/status/issue-status.html#ISSUE-164

Edit 2:

As of April 2nd 2013 hgroup is removed from the spec:
http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

(Source: https://twitter.com/iandevlin/status/318961224836587521)

---

Related Topics