CODEWITHSUNDEEP
htmlcss
noclist
noclist

Reputation: 1819

Semantic way to construct markup for text and subtext

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.

Upvotes: 3

Views: 297

Answers (5)

NBTX
NBTX

Reputation: 606

Custom elements: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements

The key enabler of v1 custom elements is the CustomElementRegistry.define() method, which can be used to define a new custom element. The new element will then use the supplied class for any instances, instead of the default HTMLUnknownElement. Custom elements can also be based on a native element like <button>, by using the syntax <button is="my-button">; these are called customized built-in elements.

With custom elements, your markup could look like this:

<staff-card>
    <staff-name>John Smith</staff-name>
    <staff-description>Employee - 03/01/1980</staff-description>
</staff-card>

Upvotes: 1

b2ok
b2ok

Reputation: 536

The best semantic is:

<div class="grid_1 title">Name</div><div class="grid_1 title">Employee</div>
<div class="grid_1">Name_1</div><div class="grid_1">Employee_1</div>
<div class="grid_1">Name_2</div><div class="grid_1">Employee_2</div>
<div class="grid_1">Name_3</div><div class="grid_1">Employee_3</div>
<div class="grid_1">Name_4</div><div class="grid_1">Employee_4</div>

css:

.grid_1 {float: left}

responsive web design

When we have only one profile on the page, HTML structure is one field under other, order vertical. When we have lot of person on one page, our brain look for rows like in table. Our eyes look horizontal for more data about person. It is usually like that and it is the best semantic and our brain like that layout. If you want something add, you only add one "column" on the position where you want. People search with eyes over column, for example, for name, it is good practice sort by name ascending etc. Lot of semantic reason for "table" look.

Grid (div) is better then table because of better reading on mobile, tablet, etc. = responsive web design.

Upvotes: 1

Stickers
Stickers

Reputation: 78796

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>

Upvotes: 3

Zoltan Toth
Zoltan Toth

Reputation: 47687

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>

Upvotes: 2

Serge In&#225;cio
Serge In&#225;cio

Reputation: 1382

If you want to do it with lists you can do it the following way:

ul {
  padding-left: 0px;
}
  
li {
  list-style-type: none;
}

.name {
  background: #AAAAFA;
  height: 35px;
  width: 200px;
  font-size: 14px;
  font-weight: bold;
}

.role {
  background: #AAFAAA;
  height: 25px;
  width: 200px;
  font-size: 12px;
  margin-bottom: 10px;
}
<div>
  <ul>
    <li class="name">John Smith</li>
    <li class="role">Employee - 03/01/1980</li>
  </ul>
</div>

<div>
  <ul>
    <li class="name">Betty Smith</li>
    <li class="role">Spouse- 04/19/1981</li>
  </ul>
</div>

<div>
  <ul>
    <li class="name">Robert Smith</li>
    <li class="role">Child- 06/04/2002</li>
  </ul>
</div>

Hope it helped, Regards

Upvotes: 1

Related Questions