标签: semantic-markup

标题是在<p>之内还是之外?

我有一个div元素,在div中,我们在p元素之间有文本.

我想添加一个标题.它应该进入内部还是外部?

哪个更好:

<p>This is text
    <h3>This is my h3</h3>
    More text
</p>
<p>another text<p>
Run Code Online (Sandbox Code Playgroud)

要么

<p>This is text<p>
<h3>This is my h3</h3>
<p>another text<p>
Run Code Online (Sandbox Code Playgroud)

html semantic-markup

23
推荐指数
2
解决办法
1万
查看次数

用CSS划分Child Divs之间的元素宽度

我有不同数量的内联块div,我想集体占用他们父母的100%.可以在没有JavaScript的情况下完成吗?我能想到的唯一方法是使用表格,但使用表格仅用于布局目的当然是不好的做法.

|----------------------|
|{  div 1  }{  div 2  }|
           or
|{div 1}{div  2}{div 3}|
|----------------------|
Run Code Online (Sandbox Code Playgroud)

我也试过,{ display:block; float:left; }但它似乎没有什么区别.

css layout semantic-markup

22
推荐指数
3
解决办法
1万
查看次数

正确使用<small>标签,或如何标记"不太重要"的文本

另一个在HTML5中具有新含义的标签<small>显然存在于:

http://www.w3.org/TR/html-markup/small.html#small

小元素代表所谓的"精细打印"或"小字体",例如法律免责声明和警告.

这个非官方的参考似乎更进一步:

http://html5doctor.com/small-hr-element/

<small>现在是侧面注释,它是内联等效的 <aside>- 内容,它不是页面的主要焦点.一个常见的例子是内联法律术语,例如页脚中的版权声明,免责声明或许可信息.它也可以用于归属.

我有一个我想要显示的人员列表,其中包括他们的真实姓名和昵称.这个昵称有点像"旁白",我想用较轻的文字来设置它:

<li>Laurence Tureaud <small>(Mr.T)</small></li>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我需要在网站的几个部分(人员,产品,地点)做类似的事情,所以我正在努力制定合理的标准.我知道我可以使用<span class="quiet">或类似的东西,但我试图避免任意类名称并使用正确的HTML元素(如果有的话).

是否<small>适合这个,或者是有其他元素或标记结构,这将是合适的?

html html5 semantic-markup

22
推荐指数
1
解决办法
2万
查看次数

如何对与其父表头部对齐(和关联)的HTML嵌套表进行语义编码

编辑:所选答案包含一个指向工作小提琴的链接,我可以在不使用嵌套表的情况下编写.

我想用HTML语义编写一个表格,其布局如下图所示.不幸的是,我无法在网络上找到任何类似的东西.

在此输入图像描述

我已经能够通过手动设置单元格宽度强制外观,但我想确保我生成的代码有意义,我不认为是这种情况,因为没有手动设置宽度,标准渲染看起来更多如下图.

在此输入图像描述

到目前为止,我提出的有问题的代码看起来像这样:

<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

html html-table semantic-markup

22
推荐指数
1
解决办法
3万
查看次数

邮政地址的标记

我们应该将哪个HTML5标记用于邮政地址?我们可以使用哪些词汇来实现机器可读性?

例如,W3C总部的地址:

W3C/MIT
32 Vassar Street
Room 32-G515
Cambridge,MA 02139 USA

html5 vocabulary semantic-markup street-address

22
推荐指数
1
解决办法
9926
查看次数

什么时候我们应该使用<dl> over <ul>?

在什么情况下,我们应该去<dl><ul>

屏幕阅读器用户<ul><dl>?没有有关内容是读屏软件用户通知<ul><dl>

css xhtml w3c semantic-markup screen-readers

21
推荐指数
1
解决办法
9913
查看次数

正确使用HTML5` figure`和`aside`

我有一个页面块,在语义上看起来像这样:

标题A.

与标题A.
Blah blah blah blah blah blah blah 相关的文字信息.

[与标题A相关的图像库]

我可以想出几种方法来标记它:

方法1:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>
Run Code Online (Sandbox Code Playgroud)

方法2:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
    <figure>
    </figure>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>
Run Code Online (Sandbox Code Playgroud)

方法3:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br /> …
Run Code Online (Sandbox Code Playgroud)

html5 semantic-markup semantics

21
推荐指数
2
解决办法
9700
查看次数

什么是最常被滥用的html标签?

html中哪些未弃用的标签通常被滥用?它们应该如何使用/它们应该被替换?如果我们有一些帮助人们学习HTML的指南,那将是非常棒的.

答案应包括:

  • 突出文本中的html标记
  • 它是如何被滥用的
  • 我们如何避免滥用它

每个问题只能使用一个标签.如果您已在帖子中看到自己的标记,请不要双重发布,而是将其他误用评论编辑到该答案中.

html tags semantic-markup

21
推荐指数
7
解决办法
2091
查看次数

什么时候使用hr元素在语义上是正确的?

HTML5基准说,

hr元素表示段落级别的主题中断,例如故事中的场景变化,或者到参考书的一部分内的另一个主题的过渡.

这种描述对我来说还不够描述.我使用hrHTML文档中的元素作为分隔内容的方法.它是否正确?

任何人都可以举几个例子来说明何时使用它(除了显示的例子)以及何时使用CSS样式代替?

html css html5 semantic-markup

21
推荐指数
2
解决办法
8362
查看次数

语义,标准和标记中的源代码使用"lang"属性

我无法找到以下的授权解释,微格式或指南,所以我把它打开了.如果我错过了什么,请说出来!

假设您有一个HTML页面,其中包含<pre>元素中某些编程源代码的示例:

<pre>
    # code...
</pre>
Run Code Online (Sandbox Code Playgroud)

(更新:正如Pekka在下面指出的那样,<code>可能会比<pre>以下示例/讨论更好.但正如Brian Campbell指出这两个元素当然应该用于预先格式化的代码)

现在:你如何-在一个语义正确,规范兼容的方式-声明编程语言<pre>块的内容是什么?

这将是以语义一致的方式包含在标记中的有用信息.

从语义的角度来看,明显的选择是使用lang属性:

<pre lang="ruby">
Run Code Online (Sandbox Code Playgroud)

根据HTML 4规范,第8.1.1节:

lang属性的值是标识自然语言的语言代码[...]计算机语言明确地从语言代码中排除.

(强调我的)

此外,"ruby"无论如何都不是标准的语言代码.

该规范允许使用x主标记添加"实验"或"私人使用"代码.规范的例子是lang="x-klingon".

从理论上讲,你可以使用x-ruby,x-java等等来声明<pre>块中包含的lang编程语言- 除了看起来一般情况下使用该属性编程语言的规范.

关于该主题HTML 5规范并没有更清楚.规范本身没有明确提到"自然"与"编程"语言.相反,它将读者引用到BCP 47,它再次声明:

语言标签用于帮助识别语言[...],但不包括主要用于人类交流的语言,例如编程语言.

但是,它继续提及(在第4.1节,第56页)zxx主要语言子标签,其中:

标识语言分类不适合或不适用的内容.一些示例可能包括乐器或电子音乐或编程源代码.

(强调我的)

同样,规范似乎与自身相矛盾,但它开辟了使用zxx-x-ruby(或类似)作为一种完全符合规范的方式的可能性,既宣称要用语言编写的东西(只是不是人类语言)声明特定的(涉及非人类语言.

那么,有没有一个标准/微格式/ …

html standards web-standards semantic-markup

19
推荐指数
1
解决办法
5125
查看次数