Question

I have a grid with grid items and I wrapped them in < a > tags so that the entire element leads to the link. I really want valid html.

          <!--Grid Item-->
          <figure class="grid-item">
              <span>
                <a href="#">
                  <img src="images/image.jpg">
                  <figcaption>
                      <h1>Title</h1>
                      <p>Description</p>
                  </figcaption>
                  <div class="item-background"></div>
                </a>
              </span>
          </figure>
          <!--End Grid Item-->

In certain hover effects the item background and ficaption are over the image with a lot of the image being exposed and left without the link. I have created a lot of hover effects with this structure. I know this is valid in html5 but I want to come up error free in html4 validator. Plus, I hear it's bad practice. I don't want to add any javascript if possible.

Should I keep it the way I have it now or is there a valid way that doesn't interfere with the design.

Answer 1

我知道这在html5中有效

然后，您可以通过将文档标记为HTML 5来使其有效。

......或者你可以，如果这是正确的。您还需要移动锚点，使其完全位于export class App { message = 'bootstrap-table'; attached(){ $('#table').bootstrapTable({ columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); } }内或完全位于figcaption周围。

但我想在html4验证器中出现错误。

那不会发生。

HTML 4不支持锚点中的块元素。
HTML 4不支持图元素。
HTML 4不支持figcaption元素。

如果你想使用本世纪引入HTML的功能，那么你需要使用本世纪编写的HTML规范。

如果可能，我不想添加任何JavaScript。

使用JavaScript注入内容而不是将其放入HTML中会使HTML有效。但这将是一个可怕的黑客，它首先忽略了使用验证器的重点。

Answer 2

在符合W3C标准的HTML 4.01和xHTML 1.0中，<a>是内联元素。

它不能包含嵌套的块级元素。

将此验证作为W3C标准合规HTML 4.01的唯一方法是在<h1>内<p>和<div>周围的图片周围包含重复的锚点等

结束<a> around </a> <div> <a>, </a> <figcaption> <a> is invalid

2 个答案: