三段脚注应包含哪些HTML5标记

时间:2011-11-27 18:21:26

标签: html5 semantic-markup

我发现使用新的HTML 5标签制作HTML的语义越多,就越容易设计和使用文档。我是HTML 5的新手,只是一个HTML新手,但我想让我的HTML 5在语义上尽可能正确。目前我的HTML 5页脚是这样划分的。

    <footer>
        <section>
            <h2>Contact</h2>
            <ul>
                <li><a href="snip">Email</a></li>
                <li><a href="snip">Tweet</a></li>
            </ul>
        </section>
        <section>
            <h2>Explore</h2>
            <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>
            <h2>About</h2>
            <p>
               snip
            </p>
        </section>
    </footer>

我正在查询的特定标签是h2标签的部分和用法。我认为部分在语义上更正确,除了页面的每个部分之外或者文章是一个部分。 h2也是我关注的问题。我想使用H1,因为它是该部分的第一个标题,但我担心谷歌蜘蛛会避开我,如果我使用h1超过h2,我就不会成为网友。

非常感谢那些使用过语义学的人的想法。

1 个答案:

答案 0 :(得分:3)

您可能需要在联系信息周围添加address - 标记:

<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>

这在语义上是正确的,但请注意那些在<address>的实现方面遇到问题的旧浏览器。在Firefox 3.6.12中,不允许将块元素放在<address> like discussed here内。

修改 同时将<h2>更改为<h1>

  

注意部分的使用意味着作者可以在整个过程中使用h1元素,而不必担心特定部分是在顶级,第二级,第三级等等。