html - 三段式页脚应使用哪些 HTML5 标签

标签 html 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 标签的部分和使用。我认为 section 在语义上比 aside 或 article 更正确,因为页脚的每个部分都是一个部分。 h2 也是我关心的问题。我想使用 H1,因为它是该部分的第一个标题,但我担心如果我使用 h1 而不是 h2,谷歌蜘蛛会避开我并阻止我交网络 friend 。

非常感谢从事语义工作的人的想法。

最佳答案

您可能想要添加 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 中不允许将 block 元素放置在 <address> 中。 like discussed here .

编辑: 同时更改 <h2><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.

关于html - 三段式页脚应使用哪些 HTML5 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8287856/

相关文章:

jquery - 如何停止这种恼人的 css 行为

javascript - jQuery如何将一个元素的所有内容替换为另一个元素?

html - 带有 flex bootstrap 的中心元素

semantic-web - <wbr> 元素是语义 HTML 吗?在微数据环境中呢?

semantic-web - 大规模查询 JSON-LD

html - 为什么 HTML5 header 元素需要 h 标签?

html - 到父文件夹的相对链接不起作用

html - 图形 : When to use footer, 中的 block 引用何时使用 figcaption?

html - 用于 UI 元素的语义 HTML5

javascript - 弧形菜单响应可能吗?