时间戳

首页 > 解决方案 > HTML：如何正确设置嵌套标题

html - HTML：如何正确设置嵌套标题

问题描述

我正在创建一个代表产品卡的 React 组件。每个产品卡都有一个标题和一个子产品卡列表，等等。这种嵌套结构可以不定式。

在这个阶段，我的重点是拥有正确的结构、大纲和利用语义 HTML。

根据 MDN，<article>是表示这一点的正确元素。所以我想出了这个结构：

<h1> Products </h1>
<article>
    <header>
        <h2> Title: Product A </h2>
    </header>
    <div>
        <span>Sub-products:</span>
        <ul>
            <li>
                <article>
                    <header>
                        <h2> Title: Product A-1 </h2>
                    </header>
                    <div>
                        <span>Sub-products:</span>
                        <ul>
                            <li>
                                <article>
                                    <header>
                                        <h2> Title: Product A-1-1 </h2>
                                    </header>
                                </article>
                            </li>
                        </ul>
                    </div>
                </article>
            </li>
            <li>
                <article>
                    <header>
                        <h2> Title: Product A-2 </h2>
                    </header>
                </article>
            </li>
        </ul>
    </div>
</article>

现在，我想知道是否使用h2正确。我正在考虑使用h3-h6但实际上阻止我的是，在 6 层嵌套之后，我没有合适的标签可以使用。

那么，将标题作为文章标题的正确方法是什么？

标签： htmlaccessibilitysemantic-ui

解决方案

如果您使用 嵌套内容<article>，<h1>则用于每篇文章的标题： 对 -<h1>一个 HTML 页面的代码中的多个。

Bruce Lawson 写了一篇关于这个主题的综合文章： https ://www.smashingmagazine.com/2020/01/html5-article-section/

<h1> Products </h1>
<article>
    <header>
        <h1> Title: Product A </h1>
    </header>
    <div>
        <span>Sub-products:</span>
        <ul>
            <li>
                <article>
                    <header>
                        <h1> Title: Product A-1 </h1>
                    </header>
                    <div>
                        <span>Sub-products:</span>
                        <ul>
                            <li>
                                <article>
                                    <header>
                                        <h1> Title: Product A-1-1 </h1>
                                    </header>
                                </article>
                            </li>
                        </ul>
                    </div>
                </article>
            </li>
            <li>
                <article>
                    <header>
                        <h1> Title: Product A-2 </h1>
                    </header>
                </article>
            </li>
        </ul>
    </div>
</article>

也就是说，我更喜欢的方法实际上是aria-labelledBy用来连接那些<h1>s 作为每个段的标题，即：

 <h1> Products </h1>
    <article aria-labelledBy="title001">
        <header>
            <h1 id="title001"> Title: Product A </h1>
        </header>
        <div>
            <span>Sub-products:</span>
            <ul>
                <li>
                    <article aria-labelledBy="title002">
                        <header>
                            <h1 id="title002"> Title: Product A-1 </h1>
                        </header>
                        <div>
                            <span>Sub-products:</span>
                            <ul>
                                <li>
                                    <article aria-labelledBy="title003">
                                        <header>
                                            <h1 id="title003"> Title: Product A-1-1 </h1>
                                        </header>
                                    </article>
                                </li>
                            </ul>
                        </div>
                    </article>
                </li>
                <li>
                    <article  aria-labelledBy="title004">
                        <header>
                            <h1 id="title004"> Title: Product A-2 </h1>
                        </header>
                    </article>
                </li>
            </ul>
        </div>
    </article>

可以说它有点详尽，但是当使用可访问的技术访问时，每个内容与其标题之间会创建明确无误的链接——即使该片段是通过标签导航进入而没有机会阅读其<h1>元素的。

推荐阅读