这些 HTML 标签在语义上是否正确？ [关闭]答案

【问题标题】：Are these HTML tags semantically correct? [closed]这些 HTML 标签在语义上是否正确？ [关闭]
【发布时间】：2022-01-02 23:56:04
【问题描述】：

我刚开始做web开发，想把一页的内容分成2列，但是我不确定下面的HTML语义是否正确。

<body>
<div class="left">
<section>
<h2>One</h2>
<img ...>
</section>
<section>
<h2>Two</h2>
<img...>
</section>
</div>
<div class="right">
<section>
<h2>Image related to those of the other div</h2>
<img...>
</section>
</div>
</body>

【问题讨论】：

针对任何事情寻求“最佳方式”的问题在很大程度上是基于意见的，并且根据help center 明确超出了 Stack Overflow 的范围。
元素的语义实际上取决于内容。您打算在这两列中添加什么内容？
只是图片和一些描述每张图片的文字

标签： html semantics

【解决方案1】：

无论如何，您的页面都缺少h1 标签，这对于语义、搜索引擎优化和可访问性至关重要！

其余部分，出于描述的展示一些图像的目的，似乎还可以。不过，您不一定必须使用section 标签——h2 标签足以将它们组织为带有相关标题的图像。但是，如果页面的这些部分在主题上确实不同，那么部分是强调这一点的好方法。

【讨论】：

【解决方案2】：

欢迎来到开发社区！完成这样的事情需要一些 CSS 来显示您所设想的列。尝试查看CSS flexbox。它允许您根据查看您网站的设备创建您喜欢的任何类型的列和行。

有了 HTML 部分，您就走在了正确的轨道上！我们只需要将图像和它的描述（或标题）包装在一个图形元素中，以使其在语法上是正确的。此方法还将提高使用屏幕阅读器的人的可访问性。

我们使用<figure> 元素，其中包含<img> 和<figcaption> 元素。 <figcaption> 元素实际上是对您正在显示的图形的捕获。这是一个简单的例子：

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

【讨论】：

CSS 与 OP 询问的内容无关......