搜索结果组件语义标注咨询：子项标签（h4/strong/dt）选型疑问

Great question—semantic markup for search result components is key for accessibility, SEO, and maintainable code. Let’s break down your questions one by one:

1. Markup for "Date & Time", "Fees", "Credit", "Location" #

Your three options each have distinct use cases; here’s how to choose:

- Definition List (<dl>, <dt>, <dd>) #

This is the most semantically accurate choice for these elements. These are classic key-value pairs (metadata about the search result), and definition lists are explicitly designed to represent sets of terms (<dt> = the label like "Date & Time") and their corresponding descriptions (<dd> = the actual date/time value). This tells screen readers and search engines exactly what these pairs represent, which is far more meaningful than generic heading or emphasis tags.

Example implementation:

<div class="search-result-item">
  <h3>Search Result Title 2018</h3>
  <dl class="result-metadata">
    <dt>Date &amp; Time</dt>
    <dd>Jan 1, 2018 10:00 AM</dd>
    <dt>Fees</dt>
    <dd>$25</dd>
    <dt>Credit</dt>
    <dd>3.0</dd>
    <dt>Location</dt>
    <dd>Conference Room A</dd>
  </dl>
</div>

- Heading Tag (<h4>) #

Use <h4> only if these labels represent actual sub-sections of the search result (e.g., if the "Date & Time" section had multiple paragraphs of details). In most cases, these are just metadata labels, not structural headings, so using an <h4> would overstate their semantic importance and could disrupt the page’s heading hierarchy (which should flow logically: h1 > h2 > h3 > h4 without jumps).

- <strong> Tag #

<strong> adds semantic emphasis (not just visual bolding), but it doesn’t convey the key-value relationship. If you only need to highlight the labels for readability without defining a structural or metadata relationship, this works—but it’s less meaningful for assistive tech than a definition list.

2. "All", "Events", "News" as <ul> List Items #

This is completely semantically valid. These are a set of filter/navigation options with no inherent sequential order (selecting "All" vs "Events" doesn’t depend on order), so an unordered list (<ul>) is the right choice. Using <li> for each option makes it clear they’re related, interactive elements—this is standard practice for navigation/filter menus.

Example for the filter list: #

<ul class="search-filters">
  <li>All</li>
  <li>Events</li>
  <li>News</li>
</ul>

Final Recommendation #

Stick with <dl>, <dt>, <dd> for the metadata labels/values—it’s the most precise semantic choice. Keep using <ul> for your filter options, as that’s perfectly aligned with their purpose.

内容的提问来源于stack exchange，提问作者Rebelion