空的href有效吗？

179

我们的一位Web开发人员使用以下html作为占位符来设计下拉列表。

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

这被认为是锚标签有效吗？

由于没有href值，因此它在我们的某些链接检查器报告中显示为损坏。

html href

— 马修
source

10

虽然它在IE中不起作用！很好，它可以在IE中工作，但行为与规范完全不同。因此，根据规范它是有效的，但在实践中无效：（（（

— ZhongYu2014年

IE扩展到bayou.io所说的内容上，该链接指向文档上方的目录：stackoverflow.com/questions/7966791/…–

— Nate

1

是的，较旧版本的IE（例如7/8等）中的空白href可能会产生不良后果，例如目录列表。如果您用google搜索，则有很多文献记录在此

— 林戈

例如：gtmetrix.com/avoid-empty-src-or-href.html。不必介意旧的浏览器，它会影响当前的IE，Edge和Webkit浏览器。

— 林戈

60

尽管已经回答了该问题（tl; dr：是，一个空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 使用（已被空格包围的有效URL → 有效URL）W3C的URL规范，已终止。应该改用WHATWG的URL标准（请参阅最后一节）。

HTML 5.1

HTML 5.1 使用（有效的URL可能被空格包围 → 有效的URL）WHATWG的URL标准（请参阅下一节）。

WHATWG HTML

WHATWG的HTML 使用了WHATWG的URL标准中有效URL字符串的定义（有效URL可能被空格包围），在该标准中，WHATWG可以说它可以是带有片段的相对URL字符串，至少必须是一个相对URL字符串，它可以是一个路径相对路径较少的URL字符串，它可以是一个路径路径相对URL的字符串，其开头不是以方案字符串开头，后跟，其定义为（粗体强调我的意思）：:

相对路径URL字符串必须是零个或多个URL路径段字符串，并以U + 002F（/）彼此分隔，并且不能以U + 002F（/）开头。

— Unor
source

184

是有效的。

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

— ak
source

23

如RFC 2396中所述：不包含URI的URI引用是对当前文档的引用。换句话说，文档中的空URI引用被解释为对该文档开始的引用，

— 10

32

当我单击时href="#"，焦点将移至IE中的页面顶部，因此我认为href="javascript:;"效果更好

— Deckard

32

href =“＃”是反模式。它在浏览器历史记录中添加了一个额外的条目，并且在某些情况下使浏览器滚动到顶部，如果不使用href属性，则可以忽略它。它将默认为“”，因此，如果没有阻止，则将重新加载页面。

— tosh 2013年

16

@tosh，不，我很确定是否遗漏了href属性，<a>元素未设置为链接的样式，无法集中显示，并且未创建为<a href =“”的链接>或<a href>可以。如果它对您有用，您可以共享一个显示它的JSFiddle吗？

— GuiPrá14年

6

@tosh，你知道有趣吗？显然，自HTML5以来，忽略该属性应以这种方式工作，请参阅w3.org/TR/html5/text-level-semantics.html#the-a-element（感谢Halfdan在下面提交该答案。）显然，这还没有得到解决。由于仍是由供应商实施的，并且由于它仍然只是候选建议，因此很难说是否将其保留在最终标准中，或者在此之前供应商是否会遵守。

— GuiPrá14年

115

正如其他人所说，这是有效的。

每种方法都有一些缺点：

href="#" 在浏览器历史记录中添加了一个额外的条目（例如，在后退按钮时很烦人）。

href="" 重新加载页面

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

— 小溪
source

22

另一个有趣的是href =“ //：0”，它既不会向服务器发出请求，也不会留下任何历史记录。

— diachedelic

2

//：//使我的某些图片无法在Chrome中加载。Chrome似乎将其解释为收到取消命令。

— David Grenier 2012年

5

href：“ javascript :;” 这就是我需要使东西在两个Android和iOS Webview中都能正常工作的原因

— dumazy 2013年

2

IE链接到文档上方的目录：stackoverflow.com/questions/7966791/...

— 内特

1

我尚未对此进行测试，但我怀疑href =“ javascript :;” 会违反禁止内联JavaScript的内容安全政策。如果您打算启用此策略，我将使用其中一种替代方法。

— Mark Good

60

尽管完全不包含href的HTML可能是完全有效的HTML，尤其是使用onclick处理程序时，但仍需要考虑以下几点：如果没有设置tabindex值，它将不会成为键盘焦点。此外，这将使使用Internet Explorer的屏幕阅读器软件无法访问，因为IE会通过可访问性界面报告，任何没有href属性的锚点元素都不可聚焦，而不管是否已设置tabindex。

因此，虽然以下内容可能完全有效：

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

最好显式添加一个null效果的href属性

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

为了获得所有用户的全面支持，如果您正在使用带有CSS的类来渲染图像，则还应该包括一些文本内容，例如title属性，以提供对所发生情况的文本描述。

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

— 缺口
source

1

感谢您提到忽略href将使可访问性界面混乱。

— Daniel Sokolowski

1

从可访问性的角度来看，我还要补充一点，将href值设置为相对/绝对路径以外的任何值都会导致屏幕阅读器出现问题。避免将井号/井号用作解决此问题的方法，因为这并不意味着这样做。屏幕阅读器可能会（当前VoiceOver确实）宣布您的链接为片段标识符（链接到当前页面中的某个位置），并且从标准的角度来看也有效。看到w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash

— 米歇尔·赫伯特

27

当前的HTML5草案还允许完全省略href属性。

如果a元素没有href属性，则该元素代表一个占位符，用于在可能存在链接的情况下（如果有的话）。

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

— Halfdan
source

6

是的，但是- 在某些浏览器中<a>，没有元素的href样式直接不同。例如，“：hover”样式在Chrome中不起作用（以及其他怪异的东西）

— Alex

<a>没有a 的标记href表示其他内容，而不是链接（通常是锚点）。另外，可选属性和可以为空的属性之间也存在差异。

— 科比2015年

19

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

更进一步，将“ =”省略掉。这样做的好处是，该链接不会被视为当前页面的锚点。

<a href>sth</a>

— 根源
source

尽管：<a href></a>→ 没有看到明确值的属性href。IE7可能会丢弃该属性。

— c24w

1

我也喜欢这个解决方案。您是否知道除IE7行为外还有其他缺点吗？

— rinat.io 2014年

这是非法语法。根据规范， “ [Empty Attribute]语法仅适用于布尔属性。”

— 罗伯特·西默

9

虽然W3的验证程序可能不会抱怨href属性为空，但当前的HTML5工作草案指定：

和元素href上的属性必须具有一个值，该值是可能被空格包围的有效URL。aarea

一个有效的URL是与相符的网址URL标准。现在，URL Standard有点让人困惑，但是没有地方说明URL可以是一个空字符串。

...这意味着空字符串不是有效的网址。

但是，HTML5工作草案继续指出：

注：在href对属性a和area不需要的元素 ; 当这些元素没有href属性时，它们将不创建超链接。

这意味着我们可以简单地完全省略该href属性：

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

如果您的目的是使这些href-less a元素仍然需要键盘字符，则必须遵循分配a role和的常规路线，tabindex以及常规的click / keydown处理程序：

<a class="arrow" role="button" tab-index="0"></a>

— 詹姆斯·唐纳利
source

确实。不幸的是，正如您所引用的，放弃href它就不会成为超链接，这会使onclick键盘用户无法使用该功能。

— 2016年

7

请注意：

以我的经验，省略该href属性会导致可访问性出现问题，因为键盘导航会忽略该属性，并且永远不会像出现href时那样给予它焦点。手动将元素包括在tabindex中是一种解决方法。

— 杰森
source

3

这是有效的，但就像UpTheCreek所说的那样，“每种方法都有一些缺点”

如果您通过标签调用ajax，请像这样保留href =“”，以保持页面重新加载，并且永远不会调用ajax代码。

刚想到这个想法就可以分享了

— 蔡T
source

2

尝试做<a href="#" class="arrow">代替。（请注意尖锐的#字符）。

— 精灵字节
source