假设我的网站有这一部分(做一个网上store 的项目):

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

在文章中更改它们中的任何一个有什么用处吗?或者我应该只是保持它们的原样?我还是有点困惑,不知道该用哪一种.

我研究了一下,但仍然相当困惑,我可以使用这两个,但我想确保它被正确地制作,以便当我继续工作和使用它时,它可以被正确地设计.

推荐答案

从技术上讲,使用<section>和使用<article>没有区别.两者的行为都与<div>个标签完全相同.因此,对于使用CSS的样式,您使用其中的哪一个(或其他div-like elements个)并不重要.

但它们是所谓的semantic HTML elements,所以它们传达了一种意义.这一点很重要

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

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

section元素表示文档的一节,通常带有标题或标题.~Link

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

在您的例子中,外部的两个<section>元素非常有意义,但您可以将最里面的<section>变成<article>,因为作为产品,它们在某种程度上是独立的和独立的.

Html相关问答推荐

Font Awesome 6插入符号未显示

Tumblr博客:如何修复提交页面和询问页面框列计数问题?

防止SVG边框半径zoom

CURL邮箱中的图像不能调整其大小

带有MathJax SVG的HTML代码在XHTML中不起作用

在NzMessageService中传递动态TemplateRef- Angular 15

如何保持嵌套进度条的背景色?

如何使用CSS在<;表格中<;SVG&>?

为什么我得不到有错误的字段?迈克尔·哈特尔教程.7.3.3

从html文件中提取元素的Python BeautifulSoup

水平行中按钮的垂直偏移

动画的停止和启动并不顺利

如何使用 HTML 将对象数组发送到 Nodejs Express

如何使用 Tailwind CSS 分隔导航栏中的元素?

Angular中如何向单选按钮添加验证

Angular:从服务器下载 HTML 并打印

如何在 css 和 html 中创建花状 struct

如何截断一些文本并用双引号引起来?

如何使用 CSS 使粘性元素固定在视口顶部

如何在单击按钮时切换 Blazor 中的类?