列表项标题的正确 HTML 元素应该是什么

Question

我有一个项目列表，其中每个项目都有一个标题和一个副标题，例如

<h2>Here's my section with some items
<ul>
  <li>
    <em>Item title</em>
    <p>Item subtitle</p>
  </li>
  <li>
    <em>Item title 2</em>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <em>Item title 3</em>
    <p>Item subtitle 3</p>
  </li>
</ul>

那么问题来了：什么 HTML 元素应该包含项目标题？

谢谢！

** 编辑 **：我试图找出哪个 HTML 元素是此函数的正确 HTML 元素（作为列表项标题）

Answer 1

这是你想要的吗？

<h1>Here's my section with some items</h1>
<ul>
  <li>
    <h2>Item title</h2>
    <p>Item subtitle</p>
  </li>
  <li>
    <h2>Item title 2</h2>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <h2>Item title 3</h2>
    <p>Item subtitle 3</p>
  </li>
</ul>

或者你想要这个

<h2>Here's my section with some items</h2>
<ul>
  <li>
    <em>Item title</em>
    <p>Item subtitle</p>
  </li>
  <li>
    <em>Item title 2</em>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <em>Item title 3</em>
    <p>Item subtitle 3</p>
  </li>
</ul>

无论哪种方式，您都忘记了 H2 的结束标记，它应该是

Answer 2

我相信您正在寻找的是 HTML 5 个语义元素的正确用法。您使用 ul、ol 和 li 的代码很好，它可以创建列表，但如果您想真正将其定义为标题和描述（我将其视为描述，因为您在段落标记中编写），您可以使用 dl、dt 和 dd w3school explaination。这是我的例子。

<h2>Here's my section with some items
<dl>
    <dt>Item title</dt>
    <dd>Item subtitle</dd>
    <dt>Item title 2</dt>
    <dd>Item subtitle 2</dd>
    <dt>Item title 3</dt>
    <dd>Item subtitle 3</dd>
</dl>

如果您还有其他问题，请告诉我。

你好 Bueno！，在你给我举例说明你现在想要实现的目标之后，我可以缩小标签的范围。在我看来，我将使用这个语义标签：

 <section>
        <header>
            <h2>Diferenciais Adentro Cloud</h2>
            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
        
            <ul>
                <li>
                    <figure>
                        <img/>
                        <figcaption>
                            <h3>Segurança</h3>
                            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img/>
                        <figcaption>
                            <h3>Data Center</h3>
                            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img/>
                        <figcaption>
                            <h3>Suporte</h3>
                            <p>Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura Conheça as vantagens de ser cliente Adentro Cloud, a qualidade e atendimento diferenciado que sua empresa procura</p>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </header>
    </section>

注意：Bueno 的示例网站 website example，寻找 Diferenciais Adentro Cloud。

Answer 3

如果你想赋予标题意义.. 首先，添加一个</h2>。然后使用 class 为您的元素命名或分组：

    <h2>Here's my section with some items</h2>
<ul>
  <li>
    <em class="itemTitle">Item title</em>
    <p>Item subtitle</p>
  </li>
  <li>
    <em class="itemTitle">Item title 2</em>
    <p>Item subtitle 2</p>
  </li>
  <li>
    <em class="itemTitle">Item title 3</em>
    <p>Item subtitle 3</p>
  </li>
</ul>

使用 class，您可以使用

添加 css

.itemTitle {
  /* some css code */
}

class 允许多个元素具有相同的分组，而 id 只允许唯一的名称（在某些情况下，这是您需要的）。

列表项标题的正确 HTML 元素应该是什么

What should be the proper HTML element for a list item title

html

semantics