Html 空的 href 有效吗？

Is an empty href valid?

提问by matthew

One of our web developers uses the following html as a placeholder for styling a drop down list.

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

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

Is this considered anchor tag valid?

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

Since there is no href value, it shows up as broken on some of our link checker reports.

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

采纳答案by unor

Although this question is already answered (tl;dr:yes, an empty hrefvalue is valid), none of the existing answers references the relevant specifications.

尽管已经回答了这个问题（tl;dr:yes, an empty hrefvalue is valid），但现有的答案都没有引用相关规范。

An empty string can't be a URI.However, the hrefattribute doesn't only take URIs as value, but also URI references. An empty string may be a URI reference.

空字符串不能是 URI。但是，该href属性不仅将 URI 作为值，而且还将 URI 引用作为值。空字符串可能是 URI 引用。

HTML 4.01

HTML 4.01

HTML 4.01 usesRFC 2396, where it says in section 4.2. Same-document References(bold emphasis mine):

HTML 4.01使用RFC 2396，它在第4.2节中说。相同文档参考（粗体强调我的）：

A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document.

不包含 URI 的 URI 引用是对当前文档的引用。换句话说，文档中的空 URI 引用被解释为对该文档开头的引用，而仅包含片段标识符的引用是对该文档的已识别片段的引用。

RFC 2396 is obsoleted by RFC 3986(which is currently IETF's URI standard), which essentially says the same.

RFC 2396 已被RFC 3986（目前是IETF 的 URI 标准）废弃，它本质上说的是相同的.

HTML5

HTML5

HTML5 uses(valid URL potentially surrounded by spaces→ valid URL) W3C's URL spec, which has been discontinued. WHATWG's URL Standardshould be used instead (see the last section).

HTML5使用（可能被空格包围的有效 URL→有效 URL）W3C 的 URL 规范，该规范已停止使用。应改用WHATWG 的 URL 标准（请参阅最后一节）。

HTML 5.1

HTML 5.1

HTML 5.1 uses(valid URL potentially surrounded by spaces→ valid URL) WHATWG's URL Standard(see the next section).

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

WHATWG HTML

WHATWG HTML

WHATWG's HTML uses(valid URL potentially surrounded by spaces) the definition of valid URL stringfrom WHATWG's URL Standard, where it says that it can be a relative-URL-with-fragment string, which must at least be a relative-URL string, which can be a path-relative-scheme-less-URL string, which is a path-relative-URL stringthat doesn't start with a scheme string followed by :, and its definition says (bold emphasis mine):

WHATWG 的 HTML使用（有效 URL 可能被空格包围）来自WHATWG 的 URL 标准的有效 URL 字符串的定义，它说它可以是一个相对 URL 带片段字符串，它必须至少是一个相对 URL 字符串，它可以是path-relative-scheme-less-URL string，它是一个path-relative-URL 字符串，它不以方案字符串开头，后跟，它的定义说（粗体强调我的）：:

A path-relative-URL string must be zeroor more URL-path-segment strings, separated from each other by U+002F (/), and not start with U+002F (/).

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

回答by SLaks

It is valid.

这是有效的。

However, standard practice is to use href="#"or sometimes href="javascript:;".

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

回答by UpTheCreek

As others have said, it is valid.

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

There are some downsides to each approach though:

但是，每种方法都有一些缺点：

href="#"adds an extra entry to the browser history (which is annoying when e.g. back-buttoning).

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

href=""reloads the page

href=""重新加载页面

href="javascript:;"does not seem to have any problems (other than looking messy and meaningless) - anyone know of any?

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

回答by Nick

While it may be completely valid HTML to not include an href, especially with an onclick handler, there are some things to consider: it will not be keyboard-focusable without having a tabindex value set. Furthermore, this will be inaccessible to screenreader software using Internet Explorer, as IE will report through the accessibility interfaces that any anchor element without an href attribute as not-focusable, regardless of whether the tabindex has been set.

虽然不包含 href 可能是完全有效的 HTML，尤其是在 onclick 处理程序中，但有一些事情需要考虑：如果没有设置 tabindex 值，它将无法以键盘为焦点。此外，这对于使用 Internet Explorer 的屏幕阅读器软件来说是无法访问的，因为 IE 将通过可访问性界面报告任何没有 href 属性的锚元素为不可聚焦，无论是否设置了 tabindex。

So while the following may be completely valid:

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

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

It's far better to explicitly add a null-effect href attribute

显式添加 null-effect href 属性要好得多

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

For full support of all users, if you're using the class with CSS to render an image, you should also include some text content, such as the title attribute to provide a textual description of what's going on.

为了完全支持所有用户，如果您使用带有 CSS 的类来呈现图像，您还应该包含一些文本内容，例如 title 属性以提供对正在发生的事情的文本描述。

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

回答by halfdan

The current HTML5 draftalso allows ommitting the href attribute completely.

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

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

如果 a 元素没有 href 属性，则该元素表示一个占位符，用于在其他情况下放置链接（如果链接是相关的）。

To answer your question: Yes it's valid.

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

回答by anroots

Indeed, you can leave it empty (W3 validator doesn't complain).

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

Taking the idea one step further: leave out the ="". The advantage of this is that the link isn't treated as an anchor to the current page.

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

<a href>sth</a>

回答by James Donnelly

Whilst W3's validator may not complain about an empty hrefattribute, the current HTML5 Working Draftspecifies:

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

The hrefattribute on aand areaelements must have a value that is a valid URLpotentially surrounded by spaces.

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

A valid URLis a URL which complies with the URL Standard. Now the URL Standard is a bit confusing to get your head around, however nowhere does it state that a URL can be an empty string.

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

...which means that an empty string is nota valid URL.

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

The HTML5 Working Draft goes on, however, to state:

然而，HTML5 工作草案继续声明：

Note: The hrefattribute on aand areaelements is not required; when those elements do not have hrefattributes they do not create hyperlinks.

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

This means we can simply omit the hrefattribute altogether:

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

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

If your intention is that these href-less aelements should still require keyboard interraction, you'll have to go down the normal route of assigning a roleand tabindexalongside your usual click/keydown handlers:

如果您的意图是这些href-lessa元素仍然需要键盘交互，则您必须沿着常规路线分配 arole并tabindex与您通常的点击/按键处理程序一起使用：

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

回答by Jason

A word of caution:

提醒一句：

In my experience, omitting the hrefattribute causes problems for accessibility as the keyboard navigation will ignore it and never give it focus like it will when href is present. Manually including your element in the tabindex is a way around that.

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

回答by Ray Tsai

it's valid but like UpTheCreek said 'There are some downsides to each approach'

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

if you're calling ajax through an tag leave the href="" like this will keep the page reloading and the ajax code will never be called ...

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

just got this thought would be good to share

刚想到这个想法会很好分享

回答by elvenbyte

Try to do <a href="#" class="arrow">instead. (Note the sharp #character).

试着去做<a href="#" class="arrow">。（注意尖锐的#字符）。