对于我的html中的重复卡片（多个相同的树结构），是否建议将它们放在列表大纲结构中？

Question

每当我的 html 代码中有重复的树结构时，我一直在思考是否使用列表结构（使用

ul

/

ol

和

li

元素）来概述它们，或者只是使用随意的

div

.

这是重复树结构的图示，我的意思是：

对于列表结构我的意思是这样的：

<ul class="features-card-container">
    <li class="feature-card-list-item">
        <h2>Quick Search Easily</h2>
        <p
            >search your snippets by content, category, web address,
            application, and more.</p
        >
    </li>
    <li class="feature-card-list-item">
        <h2>iCloud Sync</h2>
        <p>Instantly saves and syncs snippets across all your devices.</p>
    </li>
    <li class="feature-card-list-item">
        <h2>Complete History</h2>
        <p
            >Retrieve any snippets from the first moment you started using the
            app.</p
        >
    </li>
</ul>

对于随意的

div

结构，我的意思是：

<div class="features-card-container">
    <div class="feature-card-divst-item">
        <h2>Quick Search Easily</h2>
        <p
            >search your snippets by content, category, web address,
            appdivcation, and more.</p
        >
    </div>
    <div class="feature-card-divst-item">
        <h2>iCloud Sync</h2>
        <p>Instantly saves and syncs snippets across all your devices.</p>
    </div>
    <div class="feature-card-divst-item">
        <h2>Complete History</h2>
        <p
            >Retrieve any snippets from the first moment you started using the
            app.</p
        >
    </div>
</div>

我想知道推荐这两者中的哪一个，或者更好的结构方式。

Answer 1

在这种情况下，是的，使用无序列表结构在语义上是正确的——它是有意义的，因为它是相关项目的列表（即显然提供的功能列表）。如果您可以合理地将其称为列表，那么使用

<ul>

可能是个好主意。最终，这并不重要，因为使用简单的

<div>

也可以正常工作，但似乎您是在问什么在语义上更合适，这确实有更多客观的答案。