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

【问题标题】：What should be the proper HTML element for a list item title列表项标题的正确 HTML 元素应该是什么
【发布时间】：2018-07-05 09:04:10
【问题描述】：

我有一个项目列表，其中每个项目都有一个标题和一个副标题，类似于

<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 元素（作为列表项标题）

【问题讨论】：

什么意思？你的布局很好，如果这是你想要的样子。我不明白这个问题。
没有上下文，没有办法知道。即使那样，意见也太大了。
这里有一个例子：一个部分，有一个副标题和一个项目列表，每个项目都有自己的“副标题”......这就是问题：这个副标题应该是一个h3？应该是em吧？
问题，@RohanShetty 是我试图为
标题赋予正确的语义含义

【解决方案1】：

我相信您正在寻找的是正确使用 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。

【讨论】：

我不认为这就是我想要实现的目标。我的意思是，<dt> tag defines a term/name in a description list，根据 W3C... 我不是要定义一个术语/名称，但是，例如...我有一个产品列表...我不知道，水果。 ..我有一个“香蕉
是一种很好的黄色水果。
。你认为dt标签适用于这种情况吗？
@GabrielBueno 是导航还是列表？还是什么？如果您可以详细说明，我想我可以根据您的目的和布局缩小标签范围。
你可以检查这个website，然后对“Diferenciais Adentro Cloud”进行命令/CTRL + F...他们有一个我正在瞄准的具有精确结构的列表。
@GabrielBueno 哦，这就是你想要实现的目标？，我已经打开了网站。让我更新我的答案。
嘿@Bhimbim！好的！我认为我们的想法几乎相同，这很好。不幸的是，我们没有对此进行太多讨论，但我会接受你的回答！感谢您分享您的知识。

【解决方案2】：

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

    <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>

有了这个类，你就可以添加css了

.itemTitle {
  /* some css code */
}

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

【讨论】：

我很确定我没有说清楚...我的意思是关于 HTML 语义...我知道如何设置元素的样式，但是谢谢。

【解决方案3】：

这就是你想要的吗？

<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 的结束标签，它应该是

【讨论】：

我忘记了。
其实我有一个 html 语义问题，而不是语法问题。对不起。