从无序列表定义内容及技能列表点击显示描述的HTML5语义标签问询

Hey there! Let's break down exactly what you need for your skill list where clicking an item reveals its description, using proper HTML5 semantic tags.

1. Semantic Tags for Click-to-Reveal Descriptions #

If you want a native, no-JS-required way to show/hide descriptions when clicking a skill item, the <details> and <summary> tags are perfect for this. They’re purpose-built for collapsible content and carry clear semantic meaning:

• <summary>: This acts as the clickable header (your skill name, like "JavaScript").
• <details>: Wraps the summary and the hidden description content—when you click the summary, it toggles the visibility of everything inside <details> that’s not the summary.

Here’s a quick example using an unordered list:

<ul class="skills-list">
  <li>
    <details>
      <summary>JavaScript</summary>
      <p>High-level, often just-in-time compiled programming language that conforms to the ECMAScript standard. It’s dynamic, weakly typed, prototype-based, and multi-paradigm.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>HTML5</summary>
      <p>The latest version of Hypertext Markup Language, with built-in support for semantic structure, offline storage, and native multimedia.</p>
    </details>
  </li>
</ul>

This works out of the box in all modern browsers, and screen readers understand the collapsible behavior, making it accessible too.

2. HTML5 Tags for Defining List Item Content #

If you’re looking to semantically link skill names to their descriptions (without the built-in toggle), the definition list tags <dl>, <dt>, and <dd> are the way to go:

• <dl>: Stands for "definition list"—wraps the entire set of terms and descriptions.
• <dt>: "Definition term"—this is your skill name (the term being defined).
• <dd>: "Definition description"—the explanation of the skill.

Example:

<dl class="skills-definitions">
  <dt>JavaScript</dt>
  <dd>High-level, often just-in-time compiled programming language that conforms to the ECMAScript standard. It’s dynamic, weakly typed, prototype-based, and multi-paradigm.</dd>
  
  <dt>HTML5</dt>
  <dd>The latest version of Hypertext Markup Language, with built-in support for semantic structure, offline storage, and native multimedia.</dd>
</dl>

You can combine this with the <details>/<summary> tags if you want both semantic definition and collapsible behavior—just nest them appropriately, like putting a <details> inside a <dt> to make the term clickable.

Bonus: Combining Both for Best Results #

If you want the semantic clarity of a definition list plus the interactive toggle, here’s how you can mix them:

<dl class="interactive-skills">
  <dt>
    <details>
      <summary>CSS3</summary>
      <dd>The latest evolution of the Cascading Style Sheets language, adding new features like flexbox, grid, animations, and custom properties.</dd>
    </details>
  </dt>
</dl>

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