对于与内容分离和语义标签表示相关的问题，使用[rdfa]，[json]，[microdata]或[microformats]将结构化元数据嵌入到HTML标记中。最常见和最重要的语义元素有四类：文档结构，文本含义，媒体类型和相关标签。语义标记正在考虑选择标签，这些标签传达关于标签标记的信息。
我需要显示视频的持续时间。我应该使用 还是应该仅将其用于像时钟一样显示时间？ 例子 这是正确的 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 属性的 元素来设置计算结果的样式。然而，虽然我认为这会产生
我正在尝试使用 HTML 和 CSS 制作一个设置页面。单个设置在左侧有一个标签，在右侧有一个交互元素/多个交互元素。 我不知道什么...
我正在使用 XML 安全的 HTML5，并且想知道记录额外提示/警告/错误框的语义方式（就像技术手册中常见的那样）： 我正在使用 XML 安全的 HTML5，并且想了解记录额外提示/警告/错误框的语义方式（如技术手册中常见的内容）： <div class="info-tip" role="contentinfo"> <p><strong>Tip:</strong> Holding the control key when doing this will make life easier.</p> </div> 除非可能的话我想使用更合适的元素。我什至不确定 contentinfo 是否是一个合适的选择。 添加：我正在寻找 DITA 中 <note> 元素的 HTML5 替代品。 一些背景信息：我将使用样式表（XSLT2 和 CSS）来重新格式化内容以实现多个输出。 在developer.mozilla.org上他们只使用常规的div。 <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This is the content.</p> </div> 他们页面上的示例：<dialog>元素 语义上最接近的似乎是 <details> 元素 - usage
我想知道我应该在句子或段落（比方说块）中使用哪个 html 元素来表示借用词或外语中的词，引用有效的语义。这里有一些例子... 我想知道我应该在句子或段落中使用哪个html元素（比方说<p>块）对于借用词或外语中的词，指的是有效的语义。这里有几个例子： 英语 今晚，我和一个可爱的女孩有一个约会。 （使用法语单词） 他说话的声音不大，但也没有更小声，确实mezzo voce（使用意大利语单词） 法语 Java n'est pas popriétaire，a contrario de .Net 在法语中，至少，这种外语的使用需要斜体格式。 所以我想将语义和表示结合起来。 关于语义 HTML 的维基百科文章给了我一个提示，但到目前为止我还不相信。此外，我可能无法控制 CSS，例如在文档（wiki）或描述文件（pom）中 哪个元素最适合我的要求： <i>（当然不是:)） <em>（也许不是:)） <cite> <span lang="latin"> <span class="borrowed"> 以上的组合 另一个标签 W3C说 i元素代表以替代语气或语气的一段文本，或者以其他方式偏离正常散文，以指示不同质量的文本，例如分类名称、技术术语、来自的惯用短语另一种语言、音译、思想或西方文本中的船名。 我的重点 他们的例子 <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p> 具有一个或多个类的span通常是最佳选择。 <span class="foreign-lang">bonjour</span> 使用CSS： span.foreign-lang{ font-style:italic; }