用于定义无序列表的HTML5标记

Question

我想创建一个我的技能列表，当我点击其中一个时，它会从列表中显示一些描述。什么是来自其中一个列表＆＃39;的某些描述的语义标记。在HTML5中？

Answer 1

这听起来像是一个链接。

h2 {
  margin-top: 100vh;
  padding-top: 1rem;
}

<h1>Skills</h1>

<ul>
  <li><a href="#examplea">Example A</a></li>
  <li><a href="#exampleb">Example B</a></li>
  <li><a href="#examplec">Example C</a></li>
  <li><a href="#exampled">Example D</a></li>
</ul>

<h2 id="examplea">Example A</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum consectetur nibh, vel volutpat nulla varius a. Fusce auctor est id egestas imperdiet.</p>


<h2 id="exampleb">Example B</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum consectetur nibh, vel volutpat nulla varius a. Fusce auctor est id egestas imperdiet.</p>


<h2 id="examplec">Example C</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum consectetur nibh, vel volutpat nulla varius a. Fusce auctor est id egestas imperdiet.</p>


<h2 id="exampled">Example D</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum consectetur nibh, vel volutpat nulla varius a. Fusce auctor est id egestas imperdiet.</p>

Answer 2

我认为就是这样。

<dl>
    <dt>Heading</dt>
    <dd>
        <ul>
            <li><a href="#">listItem</a></li>
            <li><a href="#">listItem</a></li>
        </ul>
    </dd>
</dl>