Semantic HTML: List of Users

Question

How should I mark up a list of users?

Each user has a name, picture, and job title.

How's this?

<h1>Venmo</h1>

<h2>Employees</h2>

<ul>
  <li>
    <article>
      <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
      <h3>Matt Di Pasquale</h3>
      <p>Software Engineer</p>
    </article>
  </li>
  <!-- ... -->
</ul>

Should I remove the article elements? Should I remove the ul & li elements?

Have you considered using `
` and `
`? Also, using microfomats might be a valid option. http://microformats.org/wiki/h-card — connexo, Aug 31 '15 at 00:03
No, I hadn't. I guess they could work too. hCards sound cool. Thanks! :-) — ma11hew28, Aug 31 '15 at 17:34
Related question: https://stackoverflow.com/q/4331975/242933 — ma11hew28, Sep 01 '20 at 19:00

score 1 · Accepted Answer · answered Aug 31 '15 at 10:32

This isn't so much a list of users as a table of data about the users. Each user has an image, a name and a job title. That gives you rows and columns.

table {
    display: block;
}
tr {
    display: block;
    overflow: auto;
    clear: left;
    margin-bottom: 10px;
}
td {
    display: block;
    width: 200px;
}
td:first-child {
    float: left;
    width: auto;
}
td:nth-child(2) {
    margin-left: 60px;
    padding-bottom: 6px;
    border-top: solid grey 2px;
}
td:nth-child(3) {
    margin-left: 60px;
    padding-top: 6px;
    border-bottom: solid grey 2px;
}

<table>
    <tr>
        <td>
            <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
        </td>
        <td>Jane Smith</td>
        <td>Software Engineer</td>
    </tr>
    <tr>
        <td>
            <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
        </td>
        <td>Jane Smith</td>
        <td>Software Engineer</td>
    </tr>
    <tr>
        <td>
            <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png" alt="" width="50" />
        </td>
        <td>Jane Smith</td>
        <td>Software Engineer</td>
    </tr>
</table>

Genius! Because: (1) I'm getting the data from a table (the users table), (2) the data is 2-dimensional, and (3) I'd use a table view in an iOS app. — ma11hew28, Aug 31 '15 at 19:13

Semantic HTML: List of Users

1 Answers1

Linked