对于与内容分离和语义标签表示相关的问题，使用[rdfa]，[json]，[microdata]或[microformats]将结构化元数据嵌入到HTML标记中。最常见和最重要的语义元素有四类：文档结构，文本含义，媒体类型和相关标签。语义标记正在考虑选择标签，这些标签传达关于标签标记的信息。
我有这个[已删除]，我将使用 HTML5 和 CSS3 将其转换为 html。 内容区域中有所有这些段落，如何命名它们更好，我在哪里使用旁白，你会如何...
我可以在嵌套上下文中多次使用 aria-current 吗？
假设我有一个包含不同 的页面。某些 中可能包含其他 等等。现在，假设我想创建一个非主导航...... 假设我有一个包含不同 <section> 的页面。某些 <sections> 中可能包含其他 <sections> 等等。现在，假设我想创建一个非主导航，以允许轻松导航所有这些部分并且还突出显示用户正在滚动的当前部分（当然是通过JavaScript完成的）。 由于，通过阅读嵌套部分，您仍在阅读父部分，因此我最终遇到了一种情况，即父部分和“最多”一个（如果其直接子项可能都有）。我想知道这是否格式不正确或有问题。 这是所处理的层次结构类型的简单演示。最多一个链接到一个部分可能会以aria-current="true"每层嵌套结束。aria-current （在实际代码中，我已在 <nav> <ol> <li> <a href="#sec1" aria-current="true">Section 1</a> <nav> <ol> <li><a href="#sec1_1">Section 1.1</a></li> <li><a href="#sec1_2" aria-current="true">Section 1.2</a </li> </ol> </nav> </li> <!-- Other Sections (can be arbitrarily nested) --> </ol> </nav> 中添加了 aria 标签。为清楚起见，此处省略） 根据 nav 上的 MDN 文档： 仅使用 aria-current 将一组元素中的一个元素标记为当前元素。 然而，“一组元素”的措辞有点过于模糊，无法回答我的疑问。嵌套导航中的项目是否会被分类为足够独立的上下文，或者它们最终仍属于其父级的“元素集”（就好像它们在逻辑上被扁平化一样）？ 这最终就是我的问题所在：每个列表是否可以有自己的aria-current来突出显示自己的上下文中的当前项目？或者嵌套列表会共享其父列表的逻辑上下文，因此整个嵌套结构只能允许一个 aria-current ？更具体地说，aria-current和Section 1都可以是当前的吗？ 是的，“元素集”可能不明确，但在我看来，这里有一个目录，因此所有链接都是目录的元素。因此，我认为将每个嵌套链接列表视为一个单独的集合可能是可行的。 至于是否可以这样做，如果你查看ARIA 1.3文档，它说“作者应该仅使用Section 1.1将一组元素中的一个元素标记为当前元素。”这个“应该”很重要。这意味着它受到强烈鼓励并被认为是最佳实践，但它并不“非法”。因此从技术上讲，集合中允许有多个 aria-current 属性，因此您“可以”这样做，但是否应该这样做是另一个问题。大多数辅助功能专业人士会告诉您，真正确定最有效的方法的唯一方法是与用户进行测试。我的建议是从尽可能简单的开始，如果您通过反馈/测试发现需要做更多事情，则只会使其变得更加复杂。因此，我建议您一次只使用一个 aria-current，并将其放在当前查看的实际部分的链接上。
我的确切困惑如下 一方面，WAI-ARIA 提供了 5 条规则作为作者使用 WAI-ARIA 的实用指南（尽管该文档不是 W3C 推荐），而且
我需要显示视频的持续时间。我应该使用 还是应该仅将其用于像时钟一样显示时间？ 例子 这是正确的 HTML5 吗？ 持续时间：3：... 我需要显示视频的持续时间。我应该使用 <time> 还是应该仅将其用于像时钟一样显示时间？ 示例 这是正确的 HTML5 吗？ <p>Duration: <time>3:30 min</time>.</p> 或者应该只在这种情况下使用<time>？ <p>Good morning. The actual time is: <time>9:45</time></p>. 文档 MDN提出了以下定义： HTML 元素表示 24 小时制时间或公历中的精确日期（带有可选的时间和时区信息）。 该元素旨在用于以机器可读格式呈现日期和时间。这有助于用户代理为用户的日历提供任何事件安排。 但是，W3C中的定义有些不同，它指的是持续时间： 指定元素代表的日期或时间。 值：以下任何一项： （...） [HTML5] 规范中定义的有效持续时间字符串 示例： PT4H18M3S 4h 18m 3s 所以，我不确定在这种情况下是否应该使用<time>。有什么想法吗？ 是的，您可以使用 time 元素来表示持续时间。 但该值必须是有效的持续时间字符串，而“3:30 分钟”不是。 您可以使用 datetime 属性指定正确的值，并保留“3:30 min”作为元素内容，例如： <time datetime="3m 30s">3:30 min</time> 如果规范允许 time 元素具有持续时间作为值，则意味着可以以这种方式使用。我在规范中发现的唯一“限制”是，您无法指定持续时间的月份或年份 - 只能指定周、天、小时、分钟和秒。但对于视频的持续时间来说这应该不是问题）。 වෙරළුගෙඩියහරිඅටකටකපාගෙන කොටහක් නොකා දෙගුරුන්ටත් තබාගෙන උන් අපි එදා සත් කුළු පව් විලාසෙන පැල ඉනි වැටට ඇයි අද ඇණ කොටා ගෙන පොඩි උන් දොහේ මල් මතකය ඉරාගෙන හොඳ හිත ගිහින් උඩු හුලඟට ගසාගෙන // මහගෙයි බිමට තනි උරුමය කියාගෙන සතුරන්වෙලාඋනුනටදෙස්තියාගෙන වෙරළුගෙඩිය... තිරිසන්උනෝතින්කිසිහව්හරණනැති ලන්දක කකා ලන්දක කල් යල් හරිති // එක මිහි සයන කාටත් නිදි සුවය දෙති බිම් පංගුවට ලොල් වී මළගම් නොයති වෙරළුගෙඩිය..
首先，我意识到 HTML 中的样式应该由 CSS 处理，而且我不想改变这一点。 我只想要一个可用于下划线的实体标签，一个用于下划线文本的标签，或者...
我写了很多数学文章，想知道在文本中标记数字/公式的最佳方法是什么。 我主要使用 Latex，但我会尽量避免使用它并使用内联 HTML 元素......
使 <aside> 成为 <header>、<main> 和 <footer> 元素的同级元素是否会影响结构、SEO 或可访问性？
根据我迄今为止所学到的知识，网页最好有 、 和 元素作为 的唯一子元素。 我的网页仍然符合 根据我到目前为止所学到的知识，网页最好有 <header>、<main> 和 <footer> 元素作为 <body> 的唯一子元素。 如果我将 <aside> 元素放置为<header>、<main> 和 <footer> 元素的兄弟元素，即将 <header>、<main>、<aside> 和 <footer> 放在 <body> 元素内部？像这样：<!doctype html> <html> <head> <title>simple page</title> </head> <body> <header></header> <main></main> <aside></aside> <footer></footer> </body> </html> 您的网站将符合标准，如果您这样做，您将无需担心:) <aside> 不喜欢取消其他标签或其他内容，而您可能会搞乱辅助工具阅读网站的唯一方法就是如果您有类似 <main> 或 <footer> 元素两次或创建 aria 角色属性故意不准确。
我应该为详细信息标签指定 h2-h6 子标题以使详细信息成为一个不同的部分吗？
我有几个 标签用作页面的各个部分。我的理解是标签作为的标题，所以我没有添加任何 我有几个 <details> 标签用作页面的各个部分。我的理解是 <summary> 标签充当 <details> 的标题，所以我没有在 <h2> 之内或之前添加任何 <details> 标题。 但是，为了确保这些<details>确实是单独的部分，我不确定详细信息是否需要小标题。我当前的标记看起来像： <h1>Page title</h1> <details> <summary>1st Section</summary> <!--should I insert an h2 tag inside the summary to make it a distinct section?--> <p> ........... </p> </details> <details> <summary>2nd Section</summary> <p> ........... </p> </details> <details>元素是分区根，因此您无需有添加标题。话虽如此，请随意向其封闭的 <summary> 元素添加标题，因为 <summary> 元素可以接受短语内容，也可以接受一个标题元素，该标题元素将用作其封闭的 <details> 元素的标题。 details元素是分段根，因此它（或其summary元素）不能成为文档大纲的一部分，无论它是否包含标题元素。 details 之外的标题 如果用户可以从中受益 了解文档包含哪些 details 元素的概述，或 能够跳过或跳转到某些 details 元素， 在（组）details元素之前提供标题是有意义的。 这里的 details 没什么特别的，如果它是一个 form、一些 p 元素、一个 ul 等，你也会做同样的事情。 <body> <h1>Page title</h1> <section> <h2>foo</h2> <details><!-- details 1 --></details> <details><!-- details 2 --></details> </section> <section> <h2>bar</h2> <details><!-- details 3 --></details> </section> </body> details内的标题 由于 details 元素是切片根，因此它有自己的轮廓。如果 details 元素中的内容会受益于该结构（概述、跳过），请在其中提供标题元素。 <details> <summary><h1>History</h1></summary> <p>…</p> <section> <h2>1800s</h2> <p>…</p> </section> <section> <h2>1900s</h2> <p>…</p> </section> </details> 如果您使用标题，请注意，您不 have 将第一个标题放置在 summary 元素中，即，如果您想使用不同的标签来打开/关闭 details，而不是有意义的标签第一个标题（但在大多数情况下它们是相同的）。
是否应该将 视为重要的东西放入 中？喜欢在 中有很多带有 '文章' 的文章吗？如果不是那么如何一起使用它们？ 是否应该将<main>视为重要的东西放入<section>内？喜欢在 <main> 中有很多带有 <section>“文章”的文章吗？如果不是那么如何一起使用它们？ 来自 HTML5 规范 : 作者不得在一份文档中包含多个主要元素。 作者不得将主要元素包含为某个元素的后代 文章、旁白、页脚、页眉或导航元素。 main元素代表文档正文的主要内容 或申请。 因此，您应该使用 main 作为网站主要内容的分隔符，并使用 main 中的文章或部分作为上下文的分隔符，以下是如何处理 main 的示例： <main> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around</p> <article> <h2>Longboards</h2> <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p> <p>... </p> <p>... </p> </article> <article> <h2>Electric Skateboards</h2> <p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p> <p>... </p> <p>... </p> </article> </main> 注意：当联合元素内容有意义时，鼓励作者使用article元素而不是section元素。 再次引用HTML5 Spec： 建议作者在 main 上使用 ARIA role="main" 属性 元素，直到用户代理实现所需的角色映射。 HTML5 doctor 虽然有点过时，但确实提供了 main 元素的有用示例: <main id="content" class="group"> <!-- [...] --> </main> 简而言之，应尽可能使用 main 元素（但每页只能使用一次）。 或者，您可以在截面元素上使用 role="main"，在 WAI-ARIA 方面具有完全相同的结果。 在我的帖子中了解有关 WAI-ARIA 角色的更多信息。 例如： <div class="main-content-column"> <article role="main" id="content"> [...] </article> </div> 我不明白如何将 role="main" 分配给 section 元素可能是语义的，但可能有用例。 一般来说，您需要使用 article 标签来标识 main 内容。 上面的代码片段提供了与 <main> 完全相同的语义信息（请注意，现代屏幕阅读器和用户代理不需要在 role="main" 元素上声明 <main>）。 从语义角度来说，将这些部分放在主部分中而不是将主部分放在该部分下确实很有意义。 主标签应该用于页面的主要内容。
又一个在 HTML5 中被赋予新含义的标签， 显然仍然存在： http://www.w3.org/TR/html-markup/small.html#small 小元素代表所谓的“细则”...
最近我遇到了一种情况，我被困在 HTML 列表中使用 ，但我真正想要的是 。我绞尽脑汁试图设置一个变量以允许我更改它...... 最近我遇到了一种情况，我被困在 HTML 列表中使用 <ul>，但我真正想要的是 <ol>。我绞尽脑汁试图设置一个变量，以便我可以根据需要随时更改它。然后我突然意识到，我可以只使用 CSS ul.class {list-style-type: decimal;}。这会让我得到我正在寻找的东西。 但后来我想，为什么我们还会有<ol>？难道不应该被废弃吗？列表类型不是一个独特的样式选择，因此属于样式表吗？至少，这始终是您无法从 HTML 页面复制和粘贴列表项目符号的原因。然后我进一步想知道<dl>。是的，它稍微方便一些，但是您可以使用嵌套的 <div>、<p>、<ul> 或 <span> 轻松制作相同的效果。 在另一个问题中，似乎有人可以认为<ol>和<dl>具有语义质量。我可以购买它，尤其是对于<dl>，但它与不断被告知列表类型是风格而不是内容的情况背道而驰。还有更多我没有看到的原因吗？为什么它们还没有被弃用？ ul、ol 和 dl 之间的区别不仅仅在于这些元素渲染时的外观。语义上存在巨大差异。这就是为什么它们不能被弃用而代之以 ul。 我可以只使用CSS ul.class {list-style-type:decimal;}。这会 让我得到我正在寻找的东西。 看，这就是你的错误所在。你不会得到完全相同的结果。如果您仅因为它们的外观而使用 ol 或 dl，那么您就错了。 列表类型不是一种独特的风格选择吗 绝对不是。当你使用 html 标签时，你应该知道为什么要这样做。所有 3 种类型的列表都有其自己的含义和用途。 ul = 无序列表。 元素的顺序根本不重要。 一个基本的例子是购物清单。你不在乎先买什么，你只想买清单上的所有物品。 ol = 有序列表。 顺序非常具体，先到先得确实很重要。一个很好的例子是蛋糕的食谱。不能先烤了再添加配料。 dl = 描述列表。您通常使用它来包含键值对，因为它包含术语对及其定义的列表。 当然，当谈到这些列表的外观时，您可以将一个列表替换为另一个列表，然后只应用 CSS 规则。或者甚至使用几个 div/span 标签并从头开始创建它。 然而，当涉及到语义标记时，正如我所解释的那样，差异是巨大的。 HTML 中的标签不仅用于包装内容，而且还具有一定的含义。它们描述了我们正在处理的内容类型。例如，当您关心 SEO 时，这一点很重要。 样式表仅用于更改元素在浏览器中的外观，但在解释内容时它们毫无用处。例如，网络爬虫根本不关心 css。 它与不断被告知列表类型是样式而不是内容的说法背道而驰 谁说的？ HTML 标记是语义，它传达含义。始终想象您在没有样式表上下文的情况下解析 HTML；比如说因为你是一个搜索引擎或者因为你正在挖掘数据。那么 ol、ul 和 dl 之间的语义差异非常清晰且显着。 列表标记的类型不一定只是样式选择。作者可能希望使用“参见步骤 F.”来引用有序列表中的列表项。如果此列表标记样式 (upper-alpha) 仅在样式表中定义，则对于没有 CSS 支持的用户代理或使用自己的样式表的用户来说，它将失败。这就是为什么 ol 具有 type 属性¹。 但忽略这一点，ol和ul之间存在语义差异，而不仅仅是表象差异。如果您想传达列表是（未）排序的，您必须在 HTML 级别上执行此操作²。列表标记样式与此无关；您可以有一个带有要点的有序列表。 对于 dl：您无法使用 dt/dd/div/p 元素或任何其他 HTML 元素（ul 除外）来传达 span/table 组的语义，在某种程度上）。名称-值组可以有一个或多个名称 (dt) 和一个或多个值 (dd)，它们代表替代项 (!)。 1 注意：正在讨论 type 在 HTML 5.1/5.2 中会发生什么。 ² 它也可以是（虚构的）list元素（<list ordered>、<list unordered>）或其他任何元素的属性，只要它是 HTML 的一部分。因此，您只需将 (ul)/ol 替换为其他一些 HTML 元素/属性即可。 ³ 当然，可以重新定义其他现有的 HTML 元素来传达这个含义。但是，这又必须发生在 HTML 级别。因此，您只需将 dl 替换为其他一些 HTML 元素/属性即可。
在什么情况下我们应该选择而不是？ 对于屏幕阅读器用户 或 重要吗？屏幕阅读器软件是否通知用户内容位于 ... 在什么情况下我们应该选择<dl>而不是<ul>？ 对于屏幕阅读器用户 <ul> 或 <dl> 重要吗？屏幕阅读器软件是否通知用户内容位于 <ul> 或 <dl>？ A <dl> 是定义列表。它应该用在字典这样的情况下： 用例： <dl> <dt>Thesaurus</dt> <dd>A book for finding synonyms of other words, often alphabetical. Similar to a dictionary.</dd> </dl> 以上结果： 同义词库 一本用于查找其他单词同义词的书，通常按字母顺序排列。类似于字典。 这个想法是，要定义的术语保存在 <dt> 元素中，并且该术语的定义在 <dd>. 中给出 A <ul> 是一个无序列表。现在，<dl>并不意味着其内容有任何顺序，但它确实暗示了其子级之间的语义关系。然而，<ul> 可以包含任何未排序的内容。 当您使用一组定义而不仅仅是无序项目列表时。 对于像乔纳森答案评论中的示例这样的模棱两可的情况（人名然后描述，问题然后答案），为什么不安装一两个屏幕阅读器的试用版并找出最适合阅读的结构？ 这里有两个（来自这里）： 下巴 窗眼
我正在尝试对工作进行评估。 任务是将 div 标签转换为正确的 HTML5 语义标签。我不被允许修改/删除任何其他内容。 页脚的代码是这样的： 我正在尝试对工作进行评估。 任务是将 div 标签转换为正确的 HTML5 语义标签。我不被允许修改/删除任何其他内容。 页脚的代码是这样的： <div class="footer"> <div class="copyright-content"> <div class="copyright"> copyright 20xx -xx </div> <p> by xyz company </p> </div> </div> 每个 div 进行三项单独的检查。通过第一关很容易。 <footer class="footer"> <div class="copyright-content"> <div class="copyright"> copyright 20xx -xx </div> <p> by xyz company </p> </div> </footer> 但是我无法找出下一个 div 的正确标签（带有类 copyright-content）。 我尝试了 section、article、nav、blockquote 和其他几个标签，但这些都不起作用。 我无法再重新尝试测试，但有人知道可能的正确标签是什么吗？ 这可能就是他们正在寻找的： <footer class="footer"> <small class="copyright-content"> <span class="copyright"> copyright 20xx -xx </span> <span> by xyz company </span> </small> </footer> <small>元素用于— ...旁注和小字，例如版权和法律文本... 了解（正如 Rob 指出的那样）<small> 元素不能包含 <div> 或 <p> 元素也很重要。 <small>元素只能包含短语内容，因此其他两个元素需要更改为是短语内容。 A <span> 元素 可能最适合两者。除了 <small> 赋予的语义之外，版权方和公司都不需要额外的语义。 A <span> 是措辞内容且无语义，因此非常适合。 MDN Web 文档：HTML 元素参考指南是了解所有可用标签、它们携带的语义以及如何使用（和不可以）使用它们的绝佳资源。 我一分钟前刚刚完成测试。 我也不知道那里会发生什么。 我尝试了所有我知道的标签，我尝试了（并最终得到）给定的解决方案 <footer id="copyright-container"> <small id="copyright-content"> <span class="copyright">Copyright 1999-2020.</span> <span> by Codility ® All Rights Reserved.</span> </small> </footer> 但这并不是我们所期望的。 我什至尝试过这个解决方案，但并没有更成功。 我测试得很好，提交后，我发现这是我整个3小时测试中唯一失败的答案。 很遗憾我找不到解决方案，尤其是你的帖子已经过去近两年了：P 也许将来有人能够通过它并告诉我们所期望的是什么！
相对按钮包含带有按钮的模态，它会导致 validateDOMNesting(...): <button> 不能显示为 <button>
我有按钮，看起来像 3 个点，可以用另外 2 个按钮打开模式。 我应该把这个 3 点按钮变成一个 div 吗？使代码在语义上正确的最佳决定是什么？ jsx 文件： <
我知道这个问题有很多答案，但没有一个让我满意。 有没有官方的 HTML5 方法来处理没有 href 的可点击元素？ ...
我想渲染一个配置文件用户容器，其中包含标签列表及其关联值。 以下是我想显示的信息和布局的摘录： 名字......我的名字 银...
我想知道我的一些 Web 开发人员/设计师同事认为什么是用于模态对话框（如 lightbox、superbox、thickbox 或任何您最喜欢的风格）的最佳 HTML 5 元素...
我的客户想要一个结构如下的数据表： 这个想法是表头将粘在整个表上，而帐户标题将粘在表的正下方
在 HTML 中标记标题和标语的正确方法是什么？ [已关闭]
在本节中，我有两个标题“为什么选择我们”和“加密货币的最佳选择”。 从语义和可访问性上标记这两行文本的正确方法是什么...
我应该使用什么 HTML 语义来使自定义计算器的输出易于访问？
我正在开发一个简单的计算器工具。现在，我使用带有 readonly 属性的 元素来设置计算结果的样式。然而，虽然我认为这会产生