logo标签列表

空的 href 是否有效？

htmlhref
240

我们的一位网页开发人员使用以下HTML代码作为下拉列表的样式占位符。

<a href="" class="arrow"></a>

这个锚点标签是否合法？

因为没有 href 值，所以在一些链接检查器报告中会显示为损坏的链接。

11
但它在IE中无法工作！嗯，在IE中它能工作，但是行为完全不同于规范。因此，根据规范它是有效的，但实际上却不行 :((( - ZhongYu
扩展bayou.io所说，IE将链接到文档上方的目录：https://dev59.com/C1zUa4cB1Zd3GeqP6skG - Nate
1
是的，在旧版本的IE（7/8等）中，空href可能会产生不良后果，例如目录列表。如果您在谷歌上搜索此主题，将会有很多相关文档记录。 - Ringo
不要忽略空的src或href属性，这不仅影响旧版浏览器，也会影响当前的IE、Edge和Webkit浏览器。 - Ringo
10个回答
224

它是有效的。

然而，标准做法是使用 href="#" 或有时候是 href="javascript:;"。

25
根据RFC 2396所述：不包含URI的URI引用是对当前文档的引用。换句话说，文档内的空URI引用被解释为对该文档开头的引用。 - Oct
38
当我在IE浏览器中点击href="#"时，焦点会移动到页面顶部，因此我认为使用href="javascript:;"更好。 - Deckard
38
“href='#'”是一种反模式。它会在浏览器历史记录中添加额外的条目，并且在某些情况下会使浏览器滚动到顶部。如果您不使用它，可以直接省略“href”属性。这样，它会默认为“”，因此如果没有防止重新加载页面的操作，它将重新加载页面。 - tosh
18
@tosh，不，我很确定如果省略href属性，<a>元素将不会被样式化为链接，也不会成为一个可聚焦的对象，并且也不会像<a href="">或<a href>一样创建一个链接。如果这对你起作用，请分享一个JSFiddle来展示它。 - Gui Prá
6
@tosh，你知道什么很有趣吗？ 显然自从HTML5起，省略属性应该按照这种方式工作，请参见http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element（感谢下面的halfdan提交答案）。 显然，厂商尚未实施此功能，而且由于它仍然只是候选建议，很难确定它是否会在最终标准中保留，或者在那之前厂商是否会遵守。 - Gui Prá
显示剩余2条评论
151

就像其他人所说的那样，它是有效的。

然而，每种方法都有一些缺点:

href="#" 会在浏览器历史记录中添加一个额外的条目（当使用“后退”按钮时很烦人）。

href="" 会重新加载页面。

href="javascript:;" 似乎没有任何问题（除了看起来凌乱和毫无意义）- 有人知道吗？

25
另一个有趣的例子是 href="//:0"，它不会向服务器发送请求，也不会留下任何历史记录。 - diachedelic
2
//：0 会导致我的一些图片在 Chrome 中无法加载。看起来 Chrome 将其解释为接收到取消命令。 - David Grenier
7
"href:“javascript:;”正是我需要的，可以让内容在Android和iOS的webview中都能够正常工作。" - dumazy
2
IE链接到文档上面的目录：https://dev59.com/C1zUa4cB1Zd3GeqP6skG - Nate
2
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Mark Good
我发现 href="" 会在新标签页中重新加载页面 - 不知道为什么。我必须明确添加 target="_self"。 - EML
81

虽然在包含 onclick 处理程序的情况下不包括 href 可能是完全有效的 HTML，但有一些要考虑的事情：如果没有设置 tabindex 值，则它将无法通过键盘聚焦。此外，这将对使用 Internet Explorer 的屏幕阅读器软件不可访问，因为 IE 将通过辅助功能接口报告任何没有 href 属性的锚元素都无法聚焦，无论是否已设置 tabindex。

因此，尽管以下内容可能完全有效：

<a class="arrow">Link content</a>

最好明确地添加一个空效果的 href 属性。

<a href="javascript:void(0);" class="arrow">Link content</a>

为了完全支持所有用户，如果您正在使用CSS对图像进行渲染，则还应包括一些文本内容，例如标题属性，以提供关于所发生情况的文本说明。

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>
5
谢谢您提到省略 href 会影响辅助功能接口。 - Daniel Sokolowski
2
我还要补充一点——从可访问性的角度来看——将href值设置为相对/绝对路径以外的任何值都会导致屏幕阅读器问题。避免使用井号/数字符号作为解决此问题的方法，因为它并不是为此而设计的。屏幕阅读器可能（目前VoiceOver确实如此）宣布您的链接为片段标识符（链接到当前页面上的某个地方），也符合标准。请参见https://www.w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash - Michel Hébert
为什么要对屏幕阅读器这么心怜呢？它们也有if语句。 - doug65536
@doug65536 如果没有正确的ARIA标签，if语句将不会起作用，这只是对HTML元素的不正确使用 - 这不是屏幕阅读器的问题，而是由开发不正确的HTML的人的实现问题。 - undefined
79
尽管这个问题已经得到解答（太长不看： 是的，一个空的href值是有效的），但是现有的答案都没有涉及相关规范。空字符串不能成为URI。然而，href属性不仅可以取URI作为值，还可以取URI引用。一个空字符串可以是URI引用。

HTML 4.01

HTML 4.01 使用 RFC 2396，其中在4.2. 同一文档引用部分中指出（加粗为本人强调）：

一个不包含URI的URI引用是对当前文档的引用。 换句话说，文档内的空URI引用被解释为对该文档的起始处的引用，而只包含片段标识符的引用则是对该文档中被标识的片段的引用。

RFC 2396已被RFC 3986取代（目前是IETF的URI标准），其基本上表达了相同的意思。

HTML5

HTML5 使用（{{link4：可能由空格包围的有效URL}} → {{link5：有效的URL}}）W3C的URL规范，该规范已经停止使用。应改用WHATWG的URL标准（请参见最后一节）。

HTML 5.1

HTML 5.1使用了WHATWG的URL标准（参见下一节），其中uses(可能被空格包围的有效URL → 有效URL)。

WHATWG HTML

WHATWG的HTML 使用 (可能被空格包围的有效URL) 定义了有效URL字符串，该定义来自WHATWG的URL标准，其中它可以是一个带片段的相对URL字符串，它至少必须是一个相对URL字符串，它可以是一个不带方案的路径相对URL字符串，它是一个不以方案字符串和:开头的路径相对URL字符串，其定义如下（粗体强调我的）：

路径相对 URL 字符串必须是零个或多个 URL 路径段字符串，这些字符串彼此之间用 U+002F (/) 分隔，且不能以 U+002F (/) 开头。
28

目前的HTML5草案也允许完全省略href属性。

如果a元素没有href属性，则该元素表示一个占位符，用于放置链接，如果有相关性，那么可能会放置在该位置。

回答您的问题：是的，它是有效的。

7
是的，但是-在某些浏览器中，没有href属性的<a>元素会有不同的样式。例如，在Chrome（和其他一些奇怪的事情）中，":hover"样式无法正常工作。 - Alex from Jitbit
一个没有 href 属性的 <a> 标签代表着其他内容，而不是传统意义上的锚点链接。此外，可选属性和可以为空的属性之间有所区别。 - Kobi
22

实际上，您可以将其留空（W3验证器不会抱怨）。

更进一步的想法是：省略 =""。这样做的好处是，该链接不会被视为当前页面的锚点。

<a href>sth</a>
尽管：<a href></a> → 未看到属性href的显式值。该属性可能会被IE7删除。 - c24w
1
我也喜欢这个解决方案。除了IE7的行为之外，你知道还有什么其他缺点吗？ - rinat.io
这是非法的语法。根据规范，“[空属性]语法仅允许用于布尔属性。” - Robert Siemer
11
虽然W3的验证器可能不会抱怨空的href属性，但是当前的HTML5工作草案指定：

a和area元素上的href属性必须具有有效的URL值，可能被空格包围。

有效的URL是符合URL标准的URL。现在，URL标准有点令人困惑，但它没有说明URL可以是一个空字符串。
这意味着空字符串不是有效的URL。
然而，HTML5工作草案继续声明：

注意：a和area元素上的href属性不是必需的；当这些元素没有href属性时，它们不会创建超链接。

这意味着我们可以完全省略href属性：
<a class="arrow"></a>

如果您的意图是让这些没有href属性的a元素仍然需要键盘交互，您需要按照正常的方式分配一个role和tabindex，并在通常的click/keydown处理程序旁边。
<a class="arrow" role="button" tab-index="0"></a>
1
确实。不幸的是，正如您引用的那样，省略 href 会使其不成为超链接，这将使键盘用户无法访问 onclick 功能。 - aij
9

注意：

根据我的经验，省略 href 属性会导致无法访问，因为键盘导航会忽略它，并且不像存在 href 时那样将其聚焦。手动将您的元素包含在 tabindex 中是解决此问题的一种方法。

3
2
尝试使用<a href="#" class="arrow">代替（请注意尖括号符号#）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接