Um href vazio é válido?


179

Um de nossos desenvolvedores da Web usa o seguinte html como espaço reservado para criar uma lista suspensa.

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

Essa tag âncora considerada é válida?

Como não há valor href, ele aparece como quebrado em alguns de nossos relatórios do verificador de link.


10
Porém, ele não funciona no IE! Bem, ele funciona no IE, mas com um comportamento completamente diferente, contra as especificações. Portanto, é válido por especificação, mas não na prática: (((
ZhongYu

Expandindo o que bayou.io disse, o IE vincula-se ao diretório acima do documento: stackoverflow.com/questions/7966791/…
Nate

1
Sim, um href vazio nas versões mais antigas do IE (7/8, etc.) pode ter consequências ruins, como a listagem de diretórios. Há muito documentado sobre o assunto se você o pesquisar no Google
Ringo

por exemplo: gtmetrix.com/avoid-empty-src-or-href.html . Não importa apenas os navegadores antigos, ele afeta os navegadores atuais IE, Edge e também os Webkit.
Ringo

Respostas:


60

Embora essa pergunta já esteja respondida ( tl; dr: sim, um hrefvalor vazio é válido), nenhuma das respostas existentes faz referência às especificações relevantes.

Uma cadeia vazia não pode ser um URI. No entanto, o hrefatributo não leva apenas URIs como valor, mas também referências a URI. Uma cadeia vazia pode ser uma referência de URI.

HTML 4.01

O HTML 4.01 usa o RFC 2396 , onde diz a seção 4.2. Referências no mesmo documento (ênfase em negrito):

Uma referência de URI que não contém um URI é uma referência ao documento atual. Em outras palavras, uma referência de URI vazia em um documento é interpretada como uma referência ao início desse documento , e uma referência que contém apenas um identificador de fragmento é uma referência ao fragmento identificado desse documento.

O RFC 2396 está obsoleto pelo RFC 3986 (atualmente o padrão URI da IETF ), que diz essencialmente o mesmo .

HTML5

O HTML5 usa ( URL válido potencialmente cercado por espaçosURL válido ) a especificação de URL do W3C , que foi descontinuada. Padrão de URL do WHATWG deve ser usado (consulte a última seção).

HTML 5.1

Utilizações do HTML 5.1 ( URL válido potencialmente cercado por espaçosURL válido ) Padrão de URL do WHATWG (consulte a próxima seção).

WHATWG HTML

O HTML do WHATWG usa ( URL válido potencialmente cercado por espaços ) a definição de string de URL válida do URL Standard do WHATWG , onde diz que pode ser uma string de URL relativa com fragmento , que deve pelo menos ser uma string de URL relativa , que pode ser uma sequência de caminho relativo ao esquema sem URL , que é uma sequência de caminho relativo à URL que não começa com uma sequência de esquema seguida por :, e sua definição diz (ênfase em negrito):

Uma cadeia de URLs relativa ao caminho deve ser zero ou mais cadeias de segmentos de caminho da URL, separadas uma da outra por U + 002F (/) e não iniciar com U + 002F (/).


184

Isso é válido.

No entanto, a prática padrão é usar href="#"ou algumas vezes href="javascript:;".


23
Conforme declarado na RFC 2396: Uma referência de URI que não contém um URI é uma referência ao documento atual. Em outras palavras, uma referência vazia de URI dentro de um documento é interpretada como uma referência ao início desse documento.
Oct

32
quando eu clico href="#", foco se move para cima da página no IE, então eu thkink href="javascript:;"é melhor
Deckard

32
href = "#" é um anti-padrão. Ele adiciona uma entrada extra ao histórico do navegador e, em alguns casos, faz com que o navegador role para o topo, você pode simplesmente deixar de fora o atributo href se não o estiver usando. o padrão será "" e, portanto, recarregará a página se não for impedido.
26413

16
@tosh, não, tenho certeza que, se você deixar de fora o atributo href, o elemento <a> não será denominado como um link, não poderá ser focalizado e não criará um link como <a href = "" > ou <a href> faz. Se funcionar, você poderia compartilhar um JSFiddle mostrando?
Gui Prá

6
@tosh, você sabe o que é engraçado? Aparentemente, desde o HTML5, omitir o atributo deve funcionar dessa maneira, consulte w3.org/TR/html5/text-level-semantics.html#the-a-element (Obrigado halfdan por enviar a resposta abaixo.) Aparentemente, isso não foi possível. já implementado pelos fornecedores e, como ainda é apenas uma recomendação de candidato, é difícil dizer se ele será mantido no padrão final ou se os fornecedores cumprirão isso antes.
Gui Prá

115

Como outros já disseram, é válido.

Existem algumas desvantagens em cada abordagem:

href="#" adiciona uma entrada extra ao histórico do navegador (que é irritante quando, por exemplo, é pressionado novamente).

href="" recarrega a página

href="javascript:;" parece não ter nenhum problema (além de parecer bagunçado e sem sentido) - alguém sabe de algum?


22
Outro interessante é o href = "//: 0", que não fará uma solicitação ao servidor nem deixará nenhum histórico.
Diachedelic 01/08/2012

2
O //: 0 faz com que algumas das minhas imagens falhem ao carregar no Chrome. Parece que o Chrome interpreta isso como recebendo um comando de cancelamento.
David Grenier

5
href: "javascript :;" era exatamente o que eu precisava para fazer o trabalho de coisas em ambos Android um webviews iOS
dumazy

2
O IE fornece links para o diretório acima do documento: stackoverflow.com/questions/7966791/…
Nate

1
Não testei isso, mas suspeito que href = "javascript :;" violaria a Política de segurança de conteúdo que não permite o JavaScript embutido. Se você pretende ativar essa política, eu usaria uma das alternativas.
Mark Boa

60

Embora possa ser um HTML completamente válido para não incluir um href, especialmente com um manipulador onclick, há algumas coisas a considerar: ele não será focado no teclado sem ter um valor tabindex definido. Além disso, isso será inacessível ao software de leitura de tela usando o Internet Explorer, pois o IE relatará através das interfaces de acessibilidade que qualquer elemento âncora sem um atributo href não pode ser focalizado, independentemente de o índice de tabulação ter sido definido.

Portanto, embora o seguinte possa ser completamente válido:

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

É muito melhor adicionar explicitamente um atributo href de efeito nulo

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

Para suporte total de todos os usuários, se você estiver usando a classe com CSS para renderizar uma imagem, inclua também algum conteúdo de texto, como o atributo title, para fornecer uma descrição textual do que está acontecendo.

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

1
Obrigado por mencionar que a omissão hrefinterferirá nas interfaces de acessibilidade.
Daniel Sokolowski

1
Eu também acrescentaria - de uma perspectiva de acessibilidade - que definir o hrefvalor para qualquer coisa que não seja um caminho relativo / absoluto causará problemas no leitor de tela. Evite usar um símbolo de hash / libra como solução alternativa para esse problema, pois não se destina a isso. Os leitores de tela podem (atualmente o VoiceOver o faz) anunciar que seu link é um identificador de fragmento (link para algum lugar da página atual) e também é válido do ponto de vista dos padrões. veja w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash
Michel Hébert

27

O rascunho atual do HTML5 também permite omitir completamente o atributo href.

Se o elemento a não tiver atributo href, o elemento representará um espaço reservado para onde um link poderia ter sido colocado, se fosse relevante.

Para responder sua pergunta: Sim, é válido.


6
sim, MAS - um <a>elemento sem hrefé denominado diretamente em alguns navegadores. Por exemplo, ": hover" estilos não funcionam no Chrome (e outras coisas estranhas)
Alex

Uma <a>tag sem a hrefrepresenta outra coisa , não um link (tradicionalmente uma âncora). Além disso, há uma diferença entre um atributo opcional e um atributo que pode estar vazio.
Kobi em Kobi

19

Na verdade, você pode deixá-lo em branco (o validador W3 não reclama).

Levando a idéia um passo adiante: deixe de fora o = "". A vantagem disso é que o link não é tratado como uma âncora para a página atual.

<a href>sth</a>

Embora: <a href></a>Atributo href sem um valor explícito visto. O atributo pode ser descartado pelo IE7.
C24w

1
Eu também gosto dessa solução. Você conhece outras desvantagens, exceto o comportamento do IE7?
Rinat.io

Esta é uma sintaxe ilegal. De acordo com a especificação, a sintaxe [[Atributo Vazio] é permitida apenas para atributos booleanos ”.
Robert Siemer

9

Enquanto o validador do W3 não pode reclamar de um hrefatributo vazio , o rascunho de trabalho atual do HTML5 especifica:

O hrefatributo on ae os areaelementos devem ter um valor que seja uma URL válida potencialmente cercada por espaços.

Um URL válido é um URL que está em conformidade com o URL Standard . Agora, o URL Standard é um pouco confuso para entender, no entanto, em nenhum lugar ele afirma que um URL pode ser uma string vazia.

... o que significa que uma string vazia não é uma URL válida.

O rascunho de trabalho do HTML5 continua, no entanto, declarando:

Nota: O hrefatributo on ae os areaelementos não são necessários ; quando esses elementos não têm hrefatributos, eles não criam hiperlinks.

Isso significa que podemos simplesmente omitir hrefcompletamente o atributo:

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

Se sua intenção é que esses elementos href-less aainda exijam a interação do teclado, você precisará seguir a rota normal de atribuição de um rolee tabindexao lado dos manipuladores de cliques / teclas pressionados:

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

De fato. Infelizmente, como você citou, deixar de fora o hreftorna um hiperlink, o que torna a onclickfuncionalidade inacessível aos usuários do teclado.
aij

7

Uma palavra de cautela:

Na minha experiência, omitir o hrefatributo causa problemas de acessibilidade, pois a navegação do teclado o ignorará e nunca dará foco como quando o href estiver presente. A inclusão manual de seu elemento no índice de tabulação é uma maneira de contornar isso.


3

é válido, mas como o UpTheCreek disse: 'Há algumas desvantagens em cada abordagem'

se você estiver chamando ajax através de uma tag, deixe o href = "" assim manterá a página recarregando e o código ajax nunca será chamado ...

acabei de receber esse pensamento seria bom compartilhar


2

Tente fazer o <a href="#" class="arrow">contrário. (Observe o #caractere nítido ).

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.