对于与内容分离和语义标签表示相关的问题，使用[rdfa]，[json]，[microdata]或[microformats]将结构化元数据嵌入到HTML标记中。最常见和最重要的语义元素有四类：文档结构，文本含义，媒体类型和相关标签。语义标记正在考虑选择标签，这些标签传达关于标签标记的信息。
有时，语义包含在设计中。我的问题是，当标题层次结构的某些级别因为隐式而被跳过时，如何将此语义转换为 HTML。 例如...
所以我有一个 React 组件，其目的是：用户在输入中写入一个单词，然后按 Enter 或单击链接转到该单词的定义页面。 '使用客户端'； 导入 { FontAwesom...
我可以在 HTML5 的 img 标签中使用 href 和 rel 属性吗？
在这篇文章https://alistapart.com/article/introduction-to-rdfa/#section9中，作者说我可以直接在img标签内使用href和rel属性。我从来不知道我们可以用 html5 做到这一点......
input type="submit" 与按钮标签可以互换吗？ [重复]
input type="submit" 和按钮标签可以互换吗？或者如果有什么区别那么何时使用 input type="submit" 和何时使用按钮？ 如果没有区别那为什么我们有 2 t...
在没有 href 属性的情况下使用 <a>（锚标记）是否有效？ [重复]
我一直在使用 Twitter Bootstrap 来构建一个网站，它的很多功能都依赖于将内容包装在 中，即使它们只是要执行 Javascript。我遇到了问题
在价格细目或结账时的商品列表中使用 <dl>、<dt>、<dd> 进行语义化使用
使用 、、 标签是正确的（在语义 HTML 意义上）： 在结账页面显示价格明细？就像显示小计、税金和总计的那些。 为了... 使用 <dl>、<dt>、<dd> 标签是否正确（在语义 HTML 意义上）： 在结账页面显示价格明细？就像显示小计、税金和总计的那些。 显示订单的商品列表，当商品有对其所含内容或组成的简短说明时。例如，在汉堡结帐页面中，如果客户自定义了他/她的订单以添加一些额外的成分或类似的东西。 我在思考如何标记这个设计时遇到了这个。 通过阅读spec，在我看来它就像在建议中一样，但是，也许我在这里扭曲了一些语义？ 我想听听您对这方面规范的理解。 使用描述列表<dl>来标记小计、税额和总价是正确的。但是，由于前两项加起来等于总价格，因此该内容本质上更加表格化，而不仅仅是一组相关术语和描述。因此，我认为 <table> 更合适。 您还可以使用 <tfoot> 将最后一行封装为总计： 这通常是列的摘要，例如，列中给定数字的总和。 th { text-align: left; } td { text-align: right; } tbody th { font-weight: normal; } tfoot td { font-weight: bold; } <table> <tbody> <tr> <th scope="row">Subtotal</th> <td>$200.00</td> </tr> <tr> <th scope="row">Taxes</th> <td>$40.00</td> </tr> </tbody> <tfoot> <tr> <th scope="row">Total</th> <td>$240.00</td> </tr> </tfoot> </table>
所以这似乎是一个非常简单的问题，但我无法理解它。我有以下 HTML： 单词 1 - 单词 2 我知道这不是
假设我的网站有这一部分（创建网上商店的项目）： 显卡 &l... 假设我的网站有这一部分（创建网上商店的项目）： <section id="GraphicsCards"> <h2>Graphics Cards</h2> <section> <h3>Radeon GPUs</h3> <section> <h4>ASUS Dual Radeon RX 7800 XT OC</h4> <p>1x HDMI, 3x DisplayPort, RDNA 3</p> <img src="../media/GPUs/rx7800xt.png" alt="rx7800xt"> <p class="price">Price: € 549.00</p> <a href="./p_RX7800_details.html">More details</a> </section> </section> <section> <h3>Nvidia GPUs</h3> <section> <h4>GIGABYTE GeForce RTX 4060 EAGLE OC 8G</h4> <p>2x HDMI, 2x DisplayPort, DLSS 3</p> <img src="../media/GPUs/rtx4060.png" alt="rtx4060"> <p class="price">Price: € 349.00</p> <p>More details</p> </section> </section> </section> 更改文章中的任何内容是否有任何用处，还是我应该保持原样？我仍然有点困惑我应该使用哪一个。 研究了一些，但仍然很困惑，我可以同时使用两者，但我想确保它是正确制作的，以便当我继续研究它并使用 CSS 时，它可以正确设计。 <section>和<article>之间的主要区别在于后者... ...表示文档、页面、应用程序或站点中的独立组合，旨在可独立分发或可重用（例如，在联合组织中）。示例包括：论坛帖子、杂志或报纸文章、博客条目、产品卡、用户提交的评论、交互式小部件或小工具或任何其他独立的内容项。 — MDN Web 文档：文章内容元素 你现在所拥有的就已经很棒了。 或者，如果您希望单个规范可独立分发或可重用，您可以将那些最里面的 <section> 元素转换为 <article> 元素。两种方法都是有效的 HTML 并且语义上合理。在这种情况下，这在某种程度上是您作为作者的判断。 就我个人而言，由于这些规范块是独立的，并且如果将它们从页面中剪出以独立存在，则可以完全有意义，因此我倾向于使用<article>。但这取决于解释和作者的意图。
我想利用 html5 改进的语义。我正在创建一个搜索区域，搜索区域应该有背景并包含与搜索相关的内容，例如自动完成和搜索
想象一个导航元素，它不是网站上的主要导航，而是将您导航到网站上某个区域的多个页面。这些页面按类别分组。 每...
<sections>应该有<articles>还是<articles>应该有<sections>？
我正在阅读 Mark Pilgrim 的“Dive into HTML5”，在语义部分，它讨论了 HTML5 如何引入 和 元素。上面是这么说的 我正在阅读 Mark Pilgrim 的“深入了解 HTML5”，在语义部分，它讨论了 HTML5 如何引入 <article> 和 <section> 元素。它表示 <section> 代表通用文档或部分，而 <article> 代表独立的组合。无论哪种方式，我都看不到逻辑语义上的父子关系。 我尝试通过 HTML5 Outliner 运行以下代码，它似乎表明文档大纲的结果是相同的，无论它们如何嵌套。 所以我的问题是：<section>是否应该嵌套在<article>内，<article>是否应该嵌套在<secion>内，还是从语义角度来看这并不重要？ <section><h1>section article?</h1> <article><h1>art 1</h1></article> <article><h1>art 2</h1></article> <article><h1>art 3</h1></article> </section> <article><h1>article section?</h1> <section><h1>sec 1</h1></section> <section><h1>sec 2</h1></section> <section><h1>sec 3</h1></section> </article> 无论哪种方式嵌套它们都是完全可以接受的。虽然文档大纲没有区分 <section> 和 <article>，但从语义的角度来看它们是两个不同的东西。这就是将它们作为两个不同的语义元素引入的全部意义。 如果您的页面包含多篇文章，请使用第一个片段。 当您的文章足够全面以包含多个部分时，请使用第二个片段。 如果两者都适合您的内容，您甚至可以将它们组合起来，这样您的标记如下所示： <section><h1>section article?</h1> <article><h1>art 1</h1> <section><h1>sec 1.1</h1></section> <section><h1>sec 1.2</h1></section> <section><h1>sec 1.3</h1></section> </article> <article><h1>art 2</h1> <section><h1>sec 2.1</h1></section> <section><h1>sec 2.2</h1></section> <section><h1>sec 2.3</h1></section> </article> <article><h1>art 3</h1> <section><h1>sec 3.1</h1></section> <section><h1>sec 3.2</h1></section> <section><h1>sec 3.3</h1></section> </article> </section> HTML 文档往往仅在文章中使用部分。这似乎表明您应该始终使用 <article> 并将每个 <section> 用于该文章的一部分。他们给出的例子涉及苹果： <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article> 我没有看到很多例子，其中<section>不包含在<article>中，但是<article>可以在其中包含另一个<article>，这样博客将由一篇文章表示，然后是一个对该博客的评论将由父文章中的另一篇文章表示。所以，这看起来是你应该前进的方向。 因此，继续苹果的示例：如果您希望允许用户对每种类型的苹果发表评论，那么在这种情况下，您将在一个部分中包含一篇文章，该部分仍然位于一篇文章中。 经过更多研究和思考后，这是我得出的概括： 使用文章应保留用于“帖子”，例如博客、主题（及其后续帖子）、评论等。任何可以有 author 的内容都应使用 <article> 元素。 使用部分应保留用于分隔网站的各个部分，例如介绍（您的网站可能涉及的内容）、一些新闻文章或文章中用于评论的区域。任何属于某物“部分”的东西（实际上没有作者）。 两者在语义上都是有效的 这完全取决于您希望如何解释页面。 如果您正在撰写博客文章，则每篇文章都将是一个 <article>，并且在一篇特别长的博客文章中，您可以将其分成逻辑 <section> 以及自己的 <h1> 以及它需要的任何其他内容。 如果您正在编写研究页面，您可以使用 <sections> 来分隔目录、摘要、主体和附录。在主体（和附录）中，您可能有一个真正是 <article> 的特定部分。 如果您要布局页面，我强烈推荐以下格式： <body> <div id="page"> <div id="page-inner"> <header id="header"> <div id="header-inner"> <!-- logo, site name, search, etc --> </div> </header> <nav id="nav"> <div id="nav-inner"> <ul> <li><a href="">Primary Nav</a></li> ... </ul> </div> </nav> <div id="wrapper"> <div id="wrapper-inner"> <div id="content"> <div id="content-inner"> <article> <header> <h1>Title</h1> <span class="author"></span> <time class="timestamp"></time> ... </header> <div class="content"> </div> <footer> ... </footer> </article> ... </div> </div><!-- end #content --> <div id="sidebar"> <div id="sidebar-inner"> <div class="module"></div> <!-- more sidebar widgets, modules, blocks, what-have-you --> </div> </div><!-- end #sidebar --> <!-- more columns if necessary --> </div> </div> <footer id="footer"> <div id="footer-inner"> <!-- copyright notice, footer menu, contact form, etc --> </div> </footer> </div> </div> </body> 尽管如果您不需要那么多<div>，请保持简单： <body> <header></header> <nav></nav> <div id="wrapper"> <div id="content"> <article></article> ... </div> <div id="sidebar"> <div class="module"></div> ... </div> </div> <footer></footer> </body>
我正在开发一个实现 Disqus 评论的博客，并且我正在努力尽可能多地使用 HTML5 语义标记。 这是一个示例 （本身位于 我正在开发一个实现 Disqus 评论的博客，并且我正在努力尽可能多地使用 HTML5 语义标记。 这是一个示例<article />（本身位于<section />内），相当简单： <article class="post"> <header> <h2>Title</h2> <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p> </header> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> <!-- blog comments --> </article> 通过上述结构，我在语义上不确定在哪里整合文章的评论。 A <footer /> 显然不合适（“页脚元素不是对内容进行分段；它不会引入新的部分。”） Disqus 使用异步 JavaScript 创建一个 <iframe /> 来包含评论小部件，因此 <p /> 似乎也不合适。 我是否过度考虑了语义标记的事情：最好将其粘贴到 <div /> 中而不用担心它？ HTML5 规范中有一个示例，用于包含评论的博客文章。在我看来，这是有道理的。 您的示例可能如下所示： <article class="post"> <header> <h1>Title</h1> <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p> </header> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> <section> <h1>Comments</h1> <article><!-- comment 1--></article> <article><!-- comment 2--></article> <article><!-- comment 3--></article> <section> </article> 旁注：我认为你的“posted-on”更适合footer而不是header。因此您的 header 可以省略，因为它只包含标题。所以你的例子可能看起来像： <article class="post"> <h1>Title</h1> <footer class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</footer> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> <section> <h1>Comments</h1> <article><!-- comment 1--></article> <article><!-- comment 2--></article> <article><!-- comment 3--></article> <section> </article> 您可以将其粘贴在您的容器 <section> 中自己的 <div>（而不是 <section>）中，作为您的 <article> 的兄弟。但如果您使用 Disqus，我想您使用哪个元素并不重要。但我认为它不属于文章内容。也许可以用 <aside> 代替？ 请记住，当涉及到语义时，没有任何硬性规定。只要您的文档以有意义的方式构建和概述，那就很重要。 我的偏好： <body> <main> <article> "tweet" or "article" or "blog post" or "forum post" content goes here... <section class="comments"> <h1>Comments</h1> <ol> <li> <div class="comment"> comment goes here... </div> </li> <li> <div class="comment"> comment goes here </div> </li> ....... more comments </ol> </section> </article> </main> </body> 我认为评论是文章的一部分，因为它们与具体文章密切相关。因此，我在article元素内和section元素内留下了评论以对它们进行分组。如果我将每个评论包含在文章元素中，则意味着每个评论都可以独立分发并且仍然是独立的，这是不可能的，因为每个评论都与文章的主题相关。所以我决定将每个评论包含在 div 中。 因此，给定的 HTML 结构根据语义意义进行最佳对齐。
我正在为一个网站制作一个组件，我需要根据不同的 W3C 指南制作一个清单。我目前使用表单作为父元素，其中包含一篇文章和不同的详细信息/摘要元素...
使用 <cite> 标签时，包含剧集/章节和源作品在语义上是否有效？
这本身并不是一个问题，但我很好奇，而且我在网上找不到任何人谈论它。 当谈到使用引用标签时，我知道它仅适用于......
是否应该使用 <dialog> 元素或 role="dialog" 来表示可切换的侧边菜单？
以下代码片段显示了电子商务网站的常见设计模式，其中有一个显示购物车内容的侧面菜单。 因为这个侧面菜单的功能与...
<strong>中<em>或<em>中<strong>重要吗？
这重要吗在 一些文字 还是 中的 ？ 一些... 这重要吗<strong>在<em> <p><strong><em>Some text</em></strong></p> 或 <em> 中的 <strong>？ <p><em><strong>Some text</strong></em></p> 哪个在语义上是正确的并且更容易理解？ 更新： 屏幕阅读器在这两种情况下会如何表现？ 语法正确，但语义不正确。可以说，<strong> 是 <em> 的“高阶”形式。如果您正在寻找 <b> 和 <i> 的效果，请使用 CSS。请记住，不要因为元素的外观而选择元素，而是因为它们的含义。 只要您不混淆结束标签的顺序，您列出的两种方式在标记方面都是完全正确的。这是不正确的： <p><em><strong>Some text</em></strong></p> 如果您关心语义，则应避免在元素上同时使用 em 和 strong。 Strong：渲染为强调强 文字 （通过） 如果您关心有效的 HTML，这两种解决方案都很好且有效。 根据w3strong是强烈强调。这意味着 em 和 strong 不应在语义上一起使用，因为 strong 已经是 em。 如果您认为强强调应该是粗体斜体，我认为您应该添加一个 css 声明，在其中将强强调设置为粗体斜体。 从视觉效果角度来看，这并不重要。 在语义上，这很重要，因为您在同一元素（某些文本）中使用强调和强烈强调。这与在某些地方使用 h1 是一样的，只是因为您想要大文本，而不是因为它们是标题。 EM：表示强调。 STRONG：表示更强的强调。 来源 短语元素的呈现 取决于用户代理。一般来说， 可视化用户代理呈现 EM 文本 斜体和粗体文本。 **语音合成器用户代理可能 改变合成参数，例如 相应的音量、音调和速率。 所以要小心。使用 CSS 来完成视觉效果，而不是标记。 在 (X)HTML5 中，定义/含义是： em：表示其内容的重音强调（改变句子的含义）； strong：代表其内容的强烈重要性（不会改变句子的含义）。 所以这些元素原则上可以一起使用。 要获得想法，请考虑大声朗读文本（不过取决于语言）：em可能会改变语调（重音），strong可能会增加响度。 我认为从语义上来说，使用 <strong><em>foo</em></strong> 或 <em><strong>foo</strong></em> 没有什么区别；至少我在规范中找不到任何相关内容。
最近我开始使用，它让我意识到它可以用来代替无状态开关中的组件，而无需准备... 最近我开始使用 <details>，它让我意识到它可以用来代替无状态开关中的 <button type="button"> 组件，而不需要提供 onClick() 回调（因此不需要对 JavaScript 的依赖）。此外，因为我使用 reactjs 我必须在某个地方引入状态来控制所述按钮的开/关状态，如果在同一上下文中有多个按钮，这有点烦人。如果需要从状态中导出，那么我可以从中导出HTMLDetailsElement.open的值。 但在我开始使用 <details> 制作派生组件之前，其样式与我的项目中的通用按钮相同，从语义角度来看，这是正确的做法吗？ 对我来说，<summary>和可切换组件被视为不同的实体，但<summary>对其非<details>子组件非常宽容（事实上，它与<summary>具有相同的权限）。没有帮助，这是我所知道的唯一允许内置开关而不破坏文档整体语义的方法，不像 <div> hack . 是的，有道德，但效率不高。
为什么<main>没有定义<header>和<footer>的范围？
在浏览 HTML 标准对分段内容的定义时，它说这些元素定义了 和 的范围，并且它们只能是 ... 在浏览HTML标准对分段内容的定义时，它说这些元素定义了<header>和<footer>的范围，并且它们只能是<article>、<aside>、<nav> 和 <section>。 现在，这意味着如果我们将 <header> 和/或 <footer> 放入 <main> 内，它们的作用域将不会局限于该 <main> 元素。 我的问题是：为什么会这样？ 为什么<main>不能也被视为分段内容元素？ 将 <header> 和 <footer> 放入 <main> 元素内是否有意义？ <main>元素状态的使用说明： <main> 不会对文档的大纲做出贡献；也就是说，与 <body> 等元素、h2 等标题不同，<main> 不会影响 DOM 的 页面结构概念。这是严格的信息。 <main> 元素并非旨在形成结构，并且不会对文档大纲做出贡献。它仅严格地用于划分文档中的主要内容。所以它不充当分段内容是有道理的。
每行写一个句子，并且希望行与行之间有空格但有一个语义段落，我应该使用 <br> 还是 <p>？
我正在销售页面上以这种风格编写长文案（为了简洁而缩短）： 我们懂了… 找到一个理解 X 的 X 是很困难的。 看起来他们都是X。 那么，你怎么样...