html - 在 CSS 中处理这个简单示例的好方法是什么？

Question

假设我在某些页面上有以下布局:

               Title: Some Title   
              Author: Some Author   
Author Date of Birth: Date of birth

注意事项:

• 左侧文本右对齐且为粗体。
• 在几个不同的页面上使用。
• 右侧有时可以包含输入控件。

在这种情况下最合适的方法是什么？我可以想到几个选项(假设在外部样式表中应用 CSS):

表格

简单、容易，但我不确定这会被认为是对表格的良好使用。

<table>
 <tr>
  <td>Title</td>
  <td>Some Title</td>
 </tr>
</table>

分区 + 类

我觉得这是一例合并了分叶炎和类炎的病例。

<div class="information">
 <div class="title">Title</div><div class="value">Some Title</div>
</div>

容器分区

这感觉更像是正确的道路，但我不确定。

<div class="information">
 <strong>Title</strong> <span>Some Title</span>
</div>

建议？

Answer 1

我认为这里的一个很好的语义选择是 dl(描述列表)元素。

http://developers.whatwg.org/grouping-content.html#the-dl-element

<dl>
    <dt>Title</dt>
    <dd>Some Title</dd>

    <dt>Author</dt>
    <dd>Some Author</dd>

    <dt>Author Date of Birth</dt>
    <dd>Date of birth</dd>
</dl>