带有标题和字幕的语义导航链接答案

【问题标题】：Semantic navigation links with titles and subtitles带有标题和字幕的语义导航链接
【发布时间】：2017-09-06 17:09:15
【问题描述】：

我正在尝试使用我可以管理的语义上最正确的 HTML 来编写一个网站，我的客户想要一个导航栏，其中每个链接在可点击区域内都有一个标题和一个描述/副标题。实现这一目标的最佳方法是什么？

这是我的代码现在的样子：

<nav role="navigation">
    <a href="dashboard.html">
        <!-- There's an icon here but don't worry about that -->
        <h4>My Dashboard</h4>
        <p>Get an overview of your cases.</p>
    </a>
    <a href="new.html">
        <h4>Submit Case</h4>
        <p>Get help from the Service Center.</p>
    </a>
</nav>

作为参考，下面是它的样式：

我遵循的可访问性指南指定标题标签应按降序使用（如<h3> 只能出现在<h2> 标签之后等）。 this question 的答案似乎表明在导航中使用标题并不是一个好主意。

我可以在标题和描述中使用<p> 标签，但我希望屏幕阅读器能够分辨出标题更重要。

我倾向于使用描述列表，但我找不到以这种方式使用它们的示例。

【问题讨论】：

你也可以使用
或

标签代替
并使用 CSS 设置样式。
@Pushpender 但是屏幕阅读器能分辨出一个是标题还是内容？如果可能的话，我想要语义化

并使用 CSS 设置样式。