Semantic way to construct markup for text and subtext

Question

I'm constructing a list of Employees and their dependents on a website and need some help with the appropriate semantic way to do this.

Example information on my page:

<div>
John Smith
Employee - 03/01/1980
</div>

<div>
Betty Smith
Spouse- 04/19/1981
</div>

<div>
Robert Smith
Child- 06/04/2002
</div>

The persons name will have a different style than their role/birthdate beneath. Should I use span, ul, p, something else? Thank you.

Answer 1

I suggest to use definition lists <dl>, <dt> and <dd>.

The HTML <dl> element encloses a list of groups of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

dt, dd {
  margin: 0;
}
dt {
  color: green;
}
dd {
  color: gray;
  margin-bottom: 10px;
}

<dl>
  <dt>John Smith</dt>
  <dd>Employee - 03/01/1980</dd>
  <dt>Betty Smith</dt>
  <dd>Spouse- 04/19/1981</dd>
  <dt>Robert Smith</dt>
  <dd>Child- 06/04/2002</dd>
</dl>

Answer 2

Since it's a list of employees with all the associated dependents (which looks like tabular data) you can use the next:

body {
  font-family: sans-serif;
}

table {
  margin: 1em 0;
  width: 100%;
}

table th, td {
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  padding: 4px;
}

table caption {
  font-size: 14px;
  background: #ccc;
  padding: 4px;
}

  <ul>
    <li>
      John Smith - 03/01/1980
      <table cellspacing="4">
        <caption>
          Dependents
        </caption
        <thead>
          <tr>
            <th>Name</th>
            <th>Relation</th>
            <th>Date of Birth</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Betty Smith</td>
            <td>Spouse</td>
            <td>04/19/1981</td>
          </tr>
          <tr>
            <td>Robert Smith</td>
            <td>Child</td>
            <td>06/04/2002</td>
          </tr>
          <tr>
            <td>Sarah Smith</td>
            <td>Child</td>
            <td>04/04/2004</td>
          </tr>
        </tbody>
      </table>
    </li>
  </ul>