代码之家 › 专栏 › 技术社区 › Maxime

HTML5部分或文章

semantic-html semantic-markup html

Maxime · 技术社区 · 2 年前

假设我有我网站的这一部分(制作网店的项目):

<section id="GraphicsCards">
        <h2>Graphics Cards</h2>
        <section>
            <h3>Radeon GPUs</h3>
            <section>
                <h4>ASUS Dual Radeon RX 7800 XT OC</h4>
                <p>1x HDMI, 3x DisplayPort, RDNA 3</p>
                <img src="../media/GPUs/rx7800xt.png" alt="rx7800xt">
                <p class="price">Price: â¬ 549.00</p>
                <a href="./p_RX7800_details.html">More details</a>
            </section>
        </section>

        <section>
            <h3>Nvidia GPUs</h3>
            <section>
                <h4>GIGABYTE GeForce RTX 4060 EAGLE OC 8G</h4>
                <p>2x HDMI, 2x DisplayPort, DLSS 3</p>
                <img src="../media/GPUs/rtx4060.png" alt="rtx4060">
                <p class="price">Price: â¬ 349.00</p>
                <p>More details</p>
            </section>
        </section>
    </section>

在文章中更改它们有什么用吗?还是我应该保持原样?我还是有点困惑,不知道该用哪一个。

研究了一点,但仍然很困惑,我可以同时使用这两种方法,但我想确保它制作得当,这样当我继续研究它并使用CSS时,它就可以被正确设计。

2 回复 | 直到 2 年前

lchristmann 2 年前

从技术上讲,使用没有区别 <section> vs <article> 。两人的行为完全一样 <div> 标签。因此,对于使用CSS进行样式设计,它们中的哪一个(或其他 div-like elements )你使用。

但它们就是所谓的 semantic HTML elements ,所以它们传达了一种意义。哪个重要

ones代码的可读性(对开发人员)
可访问性(对于使用屏幕阅读器的视障人士)
SEO(搜索引擎爬虫可以更好地了解你的网站是关于什么的)

根据 W3C (谁开发HTML标准):

这个部分元素表示文档的一个部分,通常带有标题或标题~ Link

这个文章元素表示构成文档或网站的独立部分的内容部分;例如,杂志或报纸文章,或博客条目~ Link

在你的情况下,两个外层 <部分> 元素非常合理,但你可以把最里面的 <部分> s进入 <文章> s、因为作为产品,它们在某种程度上是独立的。

Sean 2 年前

之间的主要区别 <section> 和一个 <article> 是后者。。。

…表示文档、页面、应用程序或网站中的自包含组合,旨在独立分发或可重复使用(例如,在联合中)。示例包括:论坛帖子、杂志或报纸文章、博客条目、产品卡、用户提交的评论、交互式小工具或小工具,或任何其他独立内容。

MDN Web Docs: The Article Contents element

你现在拥有的一切都很好。

或者,如果您希望单独的规范是可独立分发或可重复使用的,您可以转换那些最内部的规范 <部分> 元素到 <文章> 元素。这两种方法都是有效的HTML,并且在语义上是合理的。在这种情况下,这在某种程度上是你作为作者的判断。

就我个人而言,由于这些规范块是自包含的,如果将它们从页面中裁剪出来单独使用,则可能完全有意义,因此我倾向于使用 <文章> 。但这取决于解释和作者的意图。

但不要把一篇只有一个部分的文章作为它的一个孩子,反之亦然。你可以把它们混合在一起,但不要为了两者都用而把东西包起来。