HTML5 +部分或分区

发布于 2024-12-10 14:07:58 字数 3887 浏览 1 评论 0原文

我有一个非常具体的问题,希望在这里提问时没问题。

以下哪项是正确的用法:

1)

<div id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</div><!-- #more END -->

2)

<section id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</section><!-- #more END -->

3)

<section id="more">
    <section class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
</section><!-- #more END -->

注意:代码片段位于网站底部,包含指向合作伙伴网站的链接、指向其他页面的链接以及链接到另一个类别/页面的站内链接。

如果您认为上述示例都不正确,您可以在这里发布您认为最好的解决方案吗?

如果情况 3) 是最好的:我还应该将 h4 更改为 h1 并将它们放入 header 中吗?

I have a very specific question and I hope thats okay when asking it here.

What of the following is the correct usage:

1)

<div id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</div><!-- #more END -->

2)

<section id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</section><!-- #more END -->

3)

<section id="more">
    <section class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
</section><!-- #more END -->

Note: the code snippet is placed at the bottom of the site and contains links to partner sites, links to other pages and also insite links linking to another category/page.

If you think none of the above examples is correct, could you maybe post what you think is the best solution here?

And in case 3) is best: Than i should also change h4 to h1 and put them into header ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不甘平庸 2024-12-17 14:07:58

以上都不是。

节的定义是:“对于文档中的节。例如章节、页眉、页脚或文档的任何其他节”。许多 HTML5 元素(例如部分)不提供新功能,而是提供文档语义(如您标记的:)。 Section 和 div 可能看起来很相似; section实际上是一个div,它本身包含元信息。

部分有 3 个一般经验法则:

- 不要将其仅仅用作样式或脚本编写的挂钩;那是一个 div

-如果文章、aside 或 nav 更合适,请不要使用

它 -除非该部分的开头自然有一个标题,否则不要使用它

所以这实际上取决于文档的结构。在 HTML 中,“更多”包含一段超链接。您应该选择 2) 并将部分元素更改为导航元素。

http://www.whatwg .org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

None of the above.

Section is defined: "For a section in a document. Such as chapters, headers, footers, or any other sections of the document". Many HTML5 elements, such as section, do not offer new functionality, but instead document semantics (as you have tagged:). Section and div may seem a like; section is actually a div, which in itself contains meta information.

There are 3 general rules of thumb for section:

-Don’t use it just as hook for styling or scripting; that’s a div

-Don’t use it if article, aside or nav is more appropriate

-Don’t use it unless there is naturally a heading at the start of the section

So it really depends on your document's structure. In the HTML, "more" contains a section of hyperlinks. You should pick 2) and change the section-element to nav-element.

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

凹づ凸ル 2024-12-17 14:07:58

我认为 3 可能是您列出的最好的版本,尽管您可能想给出 规范一遍,看看所描述的用法与您正在做的事情是否匹配。我要补充的一件事是,除非它是更大的内容分组的一部分,否则您可能需要考虑使用

至于

的问题,我不是 100% 确定,但可能不会有什么坏处。 W3C 建议分层使用标签,所以我也就是说,除非您将链接部分放在使用

的另一个部分中,否则它应该是正确的做法。

I think that 3 is probably the best of the things versions you've listed, though you might want to give the specification a once over, and see how the described usage matches up with what you're doing. One thing I will add is that, unless it's part of a larger grouping of content, you might want to consider using an <aside> tag for wrapping the links, as it's content set aside from the rest of the page. If it's part of a sidebar or footer, however, I'd think the <section> tag would work fine.

As for the issue of <h4> vs <h1>, I'm not 100% sure, but it probably wouldn't hurt. The W3C suggests using tags hierarchically, so I'd say that, unless you've got the link section inside another section that's using an <h1>, then it should be the right thing to do.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文