这些 HTML 标签在语义上是否正确？

Question

我刚开始从事 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>

Answer 1

欢迎来到开发社区！完成这样的事情需要一些 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>

Answer 2

在任何情况下，您的页面都缺少 h1 标记，这对于语义、SEO 和可访问性至关重要！

其余的，为了呈现一些图像的描述目的，似乎还可以。不过，您不一定必须使用 section 标签 - h2 标签足以将它们组织为具有相关 headers 的图像。但是，如果页面的这些部分在主题上真的不同，部分是强调这一点的好方法。

这些 HTML 标签在语义上是否正确？

Are these HTML tags semantically correct?

html

semantics