语义标签选型及语义标签内嵌非语义标签的代码规范咨询

一、适配的语义标签推荐 #

• 图片区块：
  • 若图片是核心内容且带说明（比如文章配图、产品展示图），用<figure>包裹，内部用<img>放置图片，搭配<figcaption>编写图注，语义最贴合场景；
  • 若只是纯装饰图或无图注的独立图片区块，用<section>也没问题，内部直接放<img>即可。
• 文本区块：
  • 如果文本是独立完整的内容单元（比如一篇文章、产品介绍正文），用<article>包裹，语义更清晰；
  • 若只是页面的一个内容分段，用<section>也可行；
  • H1作为页面主标题直接放在文本区块内，<p>用于段落内容，<span>仅用于行内样式或局部标记（比如关键词高亮），避免滥用。
• 主容器：你用<main>包裹核心内容的写法完全正确，一个页面只能有一个<main>，专门承载页面核心内容区域。

二、语义标签内使用非语义标签的规范 #

完全符合规范，但禁止无意义嵌套。比如<section><div></div></section>这种写法：

• 如果<div>是为了布局需求（比如统一控制内边距、背景，或者实现flex/grid布局），属于合理且必要的用法；
• 如果没有任何布局或样式需求，纯粹冗余嵌套空<div>，就是不符合整洁代码规范的写法，完全没必要。
  核心原则：非语义标签（<div>、<span>）仅用来解决语义标签无法实现的布局、样式问题，不能替代语义标签的语义表达作用。

三、对你写法的优化建议 #

你写的<main><section></section><section></section></main>是可行的，但可以更精准：

• 把图片区块的<section>换成<figure>（如果带图注），语义会更明确；
• 文本区块如果是完整独立内容，换成<article>比<section>更合适；
• 确保H1放在文本区块内，作为页面的主标题。

优化后的示例代码：

<main>
  <!-- 图片区块 -->
  <figure>
    <img src="your-image.jpg" alt="图片的描述文字">
    <figcaption>这是图片的说明文本</figcaption>
  </figure>
  <!-- 文本区块 -->
  <article>
    <h1>页面主标题</h1>
    <p>第一段文本内容，<span class="key-word">这里是需要高亮的关键词</span>。</p>
    <p>第二段文本内容。</p>
  </article>
</main>

内容的提问来源于stack exchange，提问作者amw