标签: semantic-markup

就像它说的那样.

我理解<div>从标签转向的目标是<table>有意义的,因为它更具语义性.但是,如果您仍需要清除块来使基于列的布局工作,我不明白所获得的好处.例如:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

外部<br>标记用于严格描述样式,并且需要使布局工作.这是否会破坏从删除表中获得的所有好处？

不要紧,<strong>在<em>

<p><strong><em>Some text</em></strong></p>

还是<em>在<strong>？

<p><em><strong>Some text</strong></em></p>

哪个语义正确且更易于访问？

更新:

屏幕阅读器在这两种情况下的表现如何？

例如:

还行吧

<div>
<p>some <strong>long</strong> text</p>
<strong>- end -</strong>
<p>some long text</p>
</div>

或者这在语义上更正确？

<div>
<p>some <strong>long</strong> text</p>
<p><strong>- end -</strong></p>
<p>some long text</p>
</div>

我要求建议应该使用什么样的标记来标记HTML中的内容类型的内容作为转录的访谈,以最清洁和语义最明智的方式？

最好是我想要一些有效的HTML5,但这不是一个硬性要求.

(我最初的冲动是使用<dl>,<dt>和<dd>标签,但似乎不适合某些原因)

Ps - 我只是在通常代表HTML中的会话类型内容的良好清洁方式的前景.

有人发布了使用<dialog>标签的建议,但WHATWG禁止使用标签,他们的官方替换建议是使用一系列<p>标签:似乎该<dialog>标签已被禁止使用HTML5,并且没有提出合理的替代品.规范本身表示应该将对话标记为一系列p标记:https://html.spec.whatwg.org/multipage/scripting.html#conversations

给定以下语义标记:

<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

我想显示与段落内联的标题,如下所示:

工作范围.Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

选项1:浮动标题.

只要标题适合一行,这就可以工作.当它没有时,浮点形成一个宽块,所以段落从块的右边开始,或者在下面而不是继续内联:

| …

当在Facebook上发布指向网站的链接时(也包括其余的数据),您可以获得缩略图或缩略图选择.这些是来自HTML的标签.

我一直认为使用CSS将我的徽标作为h1标签内的背景图像是一种很好的做法.我将h1标签设置为返回主页的链接,并使用{text-indent:-9999px}之类的内容隐藏标题文本,留下一个可爱的语义HTML标题.如果你想看一下,这里是我网站的链接:http://tempertemper.net

这个问题是因为它是一个背景图像,它被忽略了.

为此目的在HTML顶部发布自定义是不是一个好主意,并将其隐藏在页面的旁边？我不知道,似乎有点凌乱.我可以把标签放在h1里面,但是标志不是正确的形状,因为它是为特定目的而设计的.

也许有一个用于此目的的元标记,或者是否有一种技术可以强制FB拉出未正常加载的特定图像？有没有人对此有任何想法或重要提示？

我无法用以下代码弄清楚上下文中的valign与text-align之间的区别:

    <table width="500" border="0">
  <tr>
        <td colspan="2" style="background-color:#FFA500;">
   <h1>Main Title of Web Page</h1>
   </td>
      </tr>

  <tr valign="top">
      <td style="background-color:#FFD700;width:100px;text-align:top;">
      <b>Menu</b><br />
    HTML<br />
      CSS<br />
  JavaScript
     </td>
   <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
      Content goes here</td>
    </tr>

   <tr>
     <td colspan="2" style="background-color:#FFA500;text-align:center;">
     Copyright © 2012</td>
   </tr>
   </table>

我正在使用Chrome outliner扩展来检查我的页面的语义.在文档主标题标记中的h1之前有任何结构元素似乎是一个问题.我认为顺序无关紧要,但显然它确实如此:

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer

是这样的大纲:

Untitled Body
  Main Navigation
  MyPage
  etc...

但是当h1是我标题中的第一个元素时:

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer

它的轮廓如下:

MyPage
  Main Navigation
  etc...

这是为什么？是大纲车,还是我理解HTML5语义中的错误？W3C规范似乎没有提到它:http://dev.w3.org/html5/spec/Overview.html#the-header-element

<figure>元素的语义是否只包含一个<figcaption>？它确实验证了 ......

<figure>
  <img src="example.jpg">
  <figcaption>Image and caption</figcaption>
</figure>

<figure>
  <figcaption>Caption only</figcaption>
</figure>

在这种情况下,它会对CSS样式产生影响:

figure figcaption { color: red; }