语义正确的嵌套锚点答案

【问题标题】：Semantically correct nested anchors语义正确的嵌套锚点
【发布时间】：2017-07-17 22:26:41
【问题描述】：

我正在开发一个网络应用程序。我们还创造了可以被描述为内联编辑的东西。只是为了描绘我想要解决的问题，我使用 Facebook 帖子的示例。

你有喜欢的帖子。

史蒂夫·乔布斯添加了 5 张新照片

Steve Jobs 是一个链接，可以重定向到他的个人资料，所以在 HTML 中，这将是：

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div>

但我想要的是整个帖子“块”都是可点击的，尽管我只希望该名称看起来是链接。通常在 HTML 逻辑中会这样说：

<a href="stevejobs/" title="#"><div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div></a>

但这在语义上是不正确的。快速查看 HTML 4.01 或任何其他标准都会这样说：

A 元素定义的链接和锚点不能嵌套；一个A 元素不得包含任何其他 A 元素。

除了使用 javascript 和为整个“div 锚”定义 div:hover 状态之外，如何在语义上正确地创建它？

【问题讨论】：

嵌套的 a 元素在 HTML 中是语法禁止的，因此它们没有分配语义。您似乎想要的是特定的功能。

标签： html anchor

【解决方案1】：

既然你不想要javascript（这会更容易），这里有另一种方法：

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs <span style="color:none; text-decoration:none;">added 5 new photos.</span></a></p>
</div>

可以添加任何其他样式效果。比如cursor: none;等等看你想要的效果。

【讨论】：

我不反对JS，但我想知道是否还有其他合适的选择。这不像 JS 解决方案那样巧妙，但也要感谢！
none 不是有效颜色，请改用initial。

【解决方案2】：

HTML：

<div class="post-block">
 <p><a href="stevejobs/" title="#"><span class="author">Steve Jobs</span> <span class="posttext">added 5 new photos.</span></a> <p>
</div>

CSS：

.post-block { margin: 0px; } 
.post-block p { margin: 0px; } 
.post-block p a {display: inline-block; background-color: transparent; width: 100%; min-height: 100px; /* can be varied */ }
.post-block p span.author { display: inline-block; }
.post-block p span.posttext { display: inline-block; }

【讨论】：

【解决方案3】：

在 HTML5 中，a 可以用作块级元素。

<div class="post-block">
   <a href="stevejobs/"><p>Steve Jobs added 5 new photos.<p></a>
</div>

现在，使用 CSS (.post-block a {text-decoration:none;}) 删除默认链接样式。

要获取名称的链接样式，请将名称包含在一个元素中并添加一个类，如“名称”。 b 元素在这里是一个合适的选择（否则使用span）：

<div class="post-block">
   <a href="stevejobs/"><p><b class="name">Steve Jobs</b> added 5 new photos.<p></a>
</div>

现在返回样式：.post-block .name {text-decoration:underline;}。

如果您愿意，将名称包含在元素中甚至可以让您使用微格式 hCard。

【讨论】：

【解决方案4】：

多年来我一直遇到同样的问题，因为我也想维护 HTML 语义和 SEO 语义，例如标题标签和段落等，同时仍保持默认锚行为，例如在浏览器中指示目标 URL，保持标签不变并保持默认的锚点悬停动作，这是 JavaScript 本身不做的。

我能想到的最佳解决方案是在（覆盖）内容上放置一个绝对定位的块级锚点，并使用父元素的悬停动作将任何行为集成到实际内容中，这在语义上是正确的，应该是所有网络爬虫都正确解析，因此：

.post-block {
  position: relative;
}

.post-block p span.anchor {
  text-decoration: underline;
}

.post-block:hover p span.anchor {
  text-decoration: none;
}

.postblock a.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* to be on the safe side */
  text-indent: -9999em;
}

<div class="post-block">
  <p><span class="anchor">Steve Jobs</span> added 5 new photos.<p>
  <a class="overlay" href="stevejobs/" title="#">Steve Jobs</a>
</div>

这适用于块和网格布局，甚至可以很好地用于触摸设备，因为锚本身没有悬停动作 - 有些设备会劫持第一次点击:)

不能 100% 确定搜索引擎是否会惩罚文本缩进，但有许多额外的变通方法，discussion here 让任何感兴趣的人开始。

【讨论】：

【解决方案5】：

只需将第二个示例中围绕“史蒂夫乔布斯”的锚标记替换为跨度并根据需要设置样式：

<a href="stevejobs/" title="#"><div class="post-block">
    <p><span class="post-block-user">Steve Jobs</span> added 5 new photos.<p>
</div></a>

使用 CSS：

a {
    cursor: default;
}
.post-block-user {
    font-weight: bold;
    cursor: pointer;
}

或您希望应用或不应用的任何样式。实际上，我会尝试丢失 div 并将类放在锚标记上，除非有其他原因保留该结构。

【讨论】：

【解决方案6】：

禁止嵌套锚标记。

如果您只想将名称显示为链接，请使用锚标记。如果您需要整个块可点击，请在 jquery 的 onclick 函数中执行此操作。像

$(.post-block).click(//your function);

【讨论】：