🗂️ Data Representation Best Practices

Data as a Meal

Presenting data on the web is a choice, not a default. The same underlying facts can be served many ways, and the structure you pick is itself information — it tells browsers, search engines, and assistive technology what the data is.

💡 A useful analogy: The same ingredients can be a formal plated dinner (a table), a help-yourself buffet (a list), or a tray of labelled samples (definition list). The food is identical; the presentation changes how it's experienced — and how easy it is to find what you want.

Choosing the Right Structure

Before writing any markup, ask what shape the data has. This single question routes you to the correct element:

Tables, Used Well

Reach for a table only when values genuinely relate across both rows and columns — a comparison, a schedule, a statistical grid. Here a table is exactly right, because each cell answers a "which feature × which model" question:

<table>
  <caption>Smartphone Model Comparison — July 2026</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Model X</th>
      <th scope="col">Model Y</th>
      <th scope="col">Model Z</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Display Size</th>
      <td>6.1"</td>
      <td>6.7"</td>
      <td>6.9"</td>
    </tr>
    <tr>
      <th scope="row">Battery Life</th>
      <td>12 hours</td>
      <td>18 hours</td>
      <td>24 hours</td>
    </tr>
    <tr>
      <th scope="row">Price</th>
      <td>$699</td>
      <td>$899</td>
      <td>$1,099</td>
    </tr>
  </tbody>
</table>

<div class="table-wrap">
  <table> ... </table>
</div>

.table-wrap { width: 100%; overflow-x: auto; }

Lists & Definition Lists

A huge share of "table-shaped" content is really one-dimensional. Forcing it into a table adds noise and hurts accessibility. Lists are cleaner.

Definition list for key-value pairs

When you're describing one thing as a set of name → value pairs (a spec sheet, a glossary, metadata), the definition list is the semantically correct element — not a two-column table.

<dl>
  <dt>CPU</dt>
  <dd>8-core, 5.0 GHz</dd>

  <dt>RAM</dt>
  <dd>64 GB DDR5-6000</dd>

  <dt>Storage</dt>
  <dd>2 TB NVMe SSD</dd>
</dl>

Ordered vs. unordered lists

The choice is about whether sequence carries meaning.

<h3>Top 3 languages to learn in 2026</h3>
<ol>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Rust</li>
</ol>

Semantic Data Elements

HTML ships several elements built specifically to represent data meaningfully. Using them gives you accessibility and native browser behaviour for free.

<figure> + <figcaption>

Wrap a self-contained chunk — a table, chart, or code sample — with its caption so the two travel together:

<figure>
  <table> ... </table>
  <figcaption>First-quarter savings by month</figcaption>
</figure>

<details> + <summary>

Progressive disclosure with zero JavaScript — perfect for secondary data the user can expand on demand:

<details>
  <summary>User activity (Q1 2026)</summary>
  <p>New users: 2,345</p>
  <p>Active users: 15,678</p>
</details>

<meter> and <progress>

Two often-forgotten elements. <meter> shows a value within a known range (a gauge); <progress> shows completion toward a goal.

<!-- A measurement inside a range -->
<label>Disk used:
  <meter value="0.72" min="0" max="1">72%</meter>
</label>

<!-- Progress toward completion -->
<label>Upload:
  <progress value="45" max="100">45%</progress>
</label>

Worked Example: A Weather Dashboard

A single UI often mixes data shapes. A weather panel is a great illustration: current conditions are key-value pairs (a definition list), while the 5-day forecast is genuinely tabular (a table). Matching each to its structure keeps both clear and accessible.

<section aria-labelledby="current">
  <h2 id="current">Current Conditions</h2>
  <dl>
    <dt>Temperature</dt><dd>22°C</dd>
    <dt>Humidity</dt><dd>45%</dd>
    <dt>Wind</dt><dd>8 mph NW</dd>
  </dl>
</section>

<section aria-labelledby="forecast">
  <h2 id="forecast">5-Day Forecast</h2>
  <div class="table-wrap">
    <table>
      <caption>Forecast for Henderson, NV</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Conditions</th>
          <th scope="col">High</th>
          <th scope="col">Low</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Thursday</th>
          <td>Sunny</td>
          <td>26°C</td>
          <td>18°C</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Hands-on Exercise

<article>
  <h1>NovaBook Pro 14</h1>

  <section>
    <h2>Specifications</h2>
    <dl>
      <dt>CPU</dt><dd>10-core, 3.8 GHz</dd>
      <dt>RAM</dt><dd>32 GB</dd>
      <dt>Weight</dt><dd>1.4 kg</dd>
    </dl>
  </section>

  <section>
    <h2>How it compares</h2>
    <div class="table-wrap">
      <table>
        <caption>14-inch laptop comparison</caption>
        <thead>
          <tr>
            <th scope="col">Feature</th>
            <th scope="col">NovaBook</th>
            <th scope="col">Rival A</th>
            <th scope="col">Rival B</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Price</th>
            <td>$1,299</td><td>$1,399</td><td>$1,199</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <section>
    <h2>Highlights</h2>
    <ul>
      <li>All-day battery</li>
      <li>Fanless, silent design</li>
    </ul>
    <p>Battery health:
      <meter value="0.92" min="0" max="1">92%</meter>
    </p>
  </section>
</article>

Best Practices

💡 Accessibility is universal design. A wheelchair ramp helps parents with strollers and travellers with luggage too. Data structured for a screen reader is also clearer for search engines, easier to style, and simpler to maintain — everyone wins.

Summary & Quiz

📚 Further Reading

• MDN — The Description List element
• MDN — The meter element
• W3C WAI — Tables Tutorial

🚀 What's Next?

You've mastered how to structure data. Next, Semantic HTML5 Elements zooms out to the whole page — <header>, <nav>, <main>, <article>, and friends — so your entire document reads as clearly as your data does.