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

我相信你所寻找的是正确使用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>

如果您有其他问题，请与我们联系。

嗨布埃诺！，在你给我一个你想要实现的目标的例子后，我可以缩小标签。在我看来，我将使用这个语义标签：

<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的网站{{3}}示例，请查看Diferenciais Adentro Cloud。

Answer 2

这就是你想要的吗？

＆＃13;

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

＆＃13;

或者你想要这个

＆＃13;

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

＆＃13;

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

Answer 3

如果你想给这些头衔赋予意义.. 首先，添加</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 个答案: