标签: semantic-markup

我做了一些研究，但没有找到合适的答案。我\xe2\x80\x99m 想知道\xe2\x80\x99 是否最好继续使用 li 元素作为评论列表，或者切换到 Article 元素？

示例1：

<ol class="comment-list">\n  <li class="comment">\n    <figure class="avatar">\n      <img ... >\n    </figure>\n    <span class="author">Linus Torvalds</span>\n    <p class="comment-text">\n      Linux is awesome!\n    </p>\n  </li>\n  ...\n</ol>\n

示例2：

<div class="comment-list">\n  <article class="comment">\n    <header>\n      <figure class="avatar">\n        <img ... >\n      </figure>\n    </header>\n    <span class="author">Linus Torvalds</span>\n    <p class="comment-text">\n      Linux is awesome!\n    </p>\n  </article>\n  ...\n</div>\n

最好的解决方案是什么？

更新1

示例 3（更好的示例）：

<main>\n  <article>\n\n    <header>\n      <h1>Text title</h1>\n    </header>\n\n    <p>The text...</p>\n\n    <section class="comment-list">\n      <article class="comment">\n        <header>\n          <figure class="avatar">\n …

这里有十个无数的线程。如何禁用浏览器自动完成行为，例如如何禁用网络表单字段/输入标记上的浏览器自动完成行为？。我不想设置我autocomplete="off"的表单字段。正如关于如何执行此操作的MDN 文档所述：

\n

重要的是要知道，如果您关闭自动完成功能，您就违反了 [WCAG 规则 1.3.5]

\n

因此，作为禁用自动完成功能的替代方案，我想了解作为开发人员，我是否可以帮助浏览器为我的表单字段提供更相关的建议。

事实上，我可以理解为什么许多开发人员（或他们的老板/客户）最终希望完全摆脱该功能。例如，当我将一个<input name="title">完全不相关的网站添加到我在本地开发的网站时，我的浏览器突然开始向我提供我多年来在多个 StackExchange 网站上提出/编辑的问题的随机样本：

我如何帮助浏览器改善这里的用户体验？浏览器在选择建议文本时会考虑哪些因素？

\n
• 显然，没有考虑域，除非我的测试通过localhost触发比正常情况更混杂的自动完成？
\n
• 显然，至少有一个浏览器认为该字段的name属性具有通用语义含义，因为 Chrome 正在建议我在其他网站中输入的内容，而这些网站碰巧也使用name="title"其表单中使用。
\n
• 表单本身的任何元数据是否会影响建议？例如，如果我将此输入包装在<form id="my-particular-form-has-nothing-to-do-with-qa-sites-btw">某些浏览器中，可能会将其自动完成范围限制为仅建议以前的name="title"条目进入my-particular-form\xe2\x80\xa6？
\n

再说一遍，我并不是在寻找告诉我如何禁用自动完成功能的答案，也不是在抱怨这是询问如何做到这一点的问题的重复。我很高兴让浏览器帮助用户填写我的表单字段，但我希望帮助该帮助变得更加\xe2\x80\xa6有用。

（或者，我是否误解了开始的目的autocomplete？它是否仅用于登录凭据、送货地址、信用卡号等用例，而我应该用于autocomplete="off"其他所有用途？）

它是有用的,以增加整个代码#container,#Wrapper在每一个CSS布局？没有这个额外的我们不能进行布局div吗？使用这个额外的利弊是div什么？

这是好习惯吗？它对任何类型的设计/布局都有用吗？它在语义上是否正确？

我正在尝试编写高质量的语义HTML5.

以下两个选项中的哪一个在语义上更好:

选项1:

通过使用ID选择跨度来定义样式:

%body
  %header#global-header
    %h1
      My Startup Name
    %h2
      Home of the best offers in the Motor City

  %section#offers
    %h1
      Today's Offers
    %h2
      Here are the current offers for your city:

    %article.offer
      %header.offer-header
        %span.restaurant-name 
          Some Burger Joint
        %span.offer-title 
          80% off a burger
        %section.price-details
          %ul
            %li.original-price
              %p
                Original Price
              %p
                $30
            %li.offer-price
              %p
                Price
              %p
                $10
        %section.offer-description
          %p
            Some burger joint is the most popular burger joint in the Motor City. Buy a big burger or a bunch of …

我正在为我的网站制作一个图片标题翻转效果,它已经完成了.我正在使用CSS和jQuery的组合.

它看起来像这样......

它运作良好.鼠标悬停在图像上时,标题会出现在图像的左侧.

但是,我在Visual Studio中收到警告,h2根据XHTML 1.0 Transitional ,标签不能放在标签内.

这是我正在使用的标记......

<ul>
    <li>
        <a href="/controls/27/saturation-rollover-effect">
            <label class="info">
                <h2>Saturation Rollover Effect</h2>
                <p>Product description here...</p>
            </label>
            <img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
        </a>
    </li>
</ul>

我也试过span代替了label,我得到了同样的信息.我也试过了div,但div不应该在a标签里面.

我宁愿将所有这些保留在链接内部,就像我拥有它来从文本中获得SEO的好处.但我也希望XHTML Transitional兼容,并且同时具有语义/意义.有任何想法吗？

我在某处读到了在页面上正确使用h1 h2 h3有助于搜索引擎优化.那个怎么样？有人可以告诉我正确使用这些或其他标签或指向我可以了解它的一些资源.

我是RDF的新手,或许,我的问题太愚蠢了.

我有以下工作流程,我试图将其表示为RDF.我理解RDF背后的理论及其用途,但我仍然坚持如何开始为这个图创建一个RDF.我将不胜感激任何帮助.

提前致谢.

〜Codera

有些人认为HTML <table>和display:table应该只用于表格数据.

我认为display:table它没有任何隐含的语义含义,它可以用于布局/表示目的,以及显示表格数据.

display:table用于布局目的有什么问题吗？如果是这样,你能提供更多细节吗？

欢迎参考规格等.

有人可以帮我做出这个决定吗？到目前为止,我知道你把你​​的主要导航放在导航中,但出于某种原因,我看到每个人都把它们的导航放在一边,如果它位于他们网站的左侧.(cms的事情或它应该怎么做？)我在标题中签到,签出并"立即预订".网站导航我在左侧的nav元素中.(见下图)

什么是正确的方法？

旨在满足屏幕阅读器和语义正确,这是在HTML表单中显示斜体"必需"或"可选"标签的正确方法吗？

1. <i>*required</i>
2. <em>*required</em>
3. <span class="italic">*required</span>

*<span class="italic">等同font-style="italic"于CSS