HTML验证报错：此上下文内<a>元素不能包含<div>元素，求排查

你贴的这段图片组件代码本身没有问题，错误的根源是这段代码被包裹在了<a>标签内部。

HTML规范中，<a>属于行内元素（即使HTML5放宽了限制，允许<a>包含块级元素，但多数验证工具仍会严格校验，且这种写法并非最佳实践），不能直接包含<div>这类块级元素，所以当你把整个图片组件的输出（外层的<div class="image">）放到<a>里面时，就触发了验证错误。

两种解决方案： #

1. 把链接整合到组件内部（推荐）

修改组件代码，将<a>放在<div>内部，用绝对定位覆盖整个图片区域，既符合规范又能实现点击跳转效果。示例修改后的代码：

{%- liquid
  assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
  assign height = image.height | times: 1.0 | default: 1.0
  assign width = image.width | times: 1.0 | default: 1.0

  assign padding_top = height | divided_by: width | times: 100 | append: "%"

  if id == blank
    assign id = image.id
  endif
-%}

<div class="image js-enabled {% unless disable_style %}image--{{ id }} {% endunless %}{{ wrapper_class }}">
  {% if link %}
    <a href="{{ link }}" class="image__link">
  {% endif %}
    <img
      class="image__img lazyload{% if preload %} lazypreload{% endif %} {{ image_class }}"
      src="{{ image | img_url: '300x300' }}"
      data-src="{{ img_url }}"
      data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
      data-aspectratio="{{ image.aspect_ratio }}"
      data-sizes="auto"
      alt="{{ image.alt | escape }}"
    >
  {% if link %}
    </a>
  {% endif %}
</div>

{%- unless disable_style -%}
  <style>
    .image--{{ id }} {
      padding-top: {{ padding_top }};
      position: relative; /* 为绝对定位的链接提供参考 */
    }
    .image__link {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1; /* 确保链接在图片上方 */
    }
  </style>
{%- endunless -%}

<noscript>
  <div class="image image--{{ id }} {{ wrapper_class }}">
    {% if link %}
      <a href="{{ link }}">
    {% endif %}
      <img class="image__img" src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
    {% if link %}
      </a>
    {% endif %}
  </div>
</noscript>

调用组件时只需传入link参数即可：

{% render 'image-component', image: product.featured_image, link: product.url %}

2. 修正调用组件的方式

如果是你在模板中不小心把组件包进了<a>，比如：

<a href="/product">
  {% render 'image-component', image: product.featured_image %}
</a>

直接去掉外层的<a>，改用上面组件内部包含链接的写法即可。

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