É bom usar uma marca de âncora sem incluir o hrefatributo e, em vez disso, usar um manipulador de eventos de clique em JavaScript? Então, eu omitiria hrefcompletamente, nem sequer o vazio ( href="").
Tem certeza de que não deseja um botão? Isso significa que as guias etc funcionam e você pode estilizar seus botões para que pareçam links, se necessário. É certo que eu não sei sobre pairar no IE.
23613 Robbie_c #
Respostas:
217
No HTML5, o uso de um aelemento sem um hrefatributo é válido. É considerado um "hiperlink de espaço reservado".
Um link de espaço reservado é para casos em que você deseja usar um elemento âncora, mas não precisa navegar em nenhum lugar. Isso é útil para marcar a página atual em um menu de navegação ou trilha de navegação. (A abordagem antiga seria usar uma tag de extensão ou uma tag de âncora com uma classe chamada "ativo" ou "atual" para estilizá-la e JavaScript para cancelar a navegação.)
Um link de espaço reservado também é útil nos casos em que você deseja definir dinamicamente o destino do link via JavaScript no tempo de execução. Você simplesmente define o valor do atributo href e a tag anchor se torna clicável.
Não posso usar href = "#" porque estou usando os favoritos do ajax, que envolvem a alteração do hash, o que posso fazer?
john
5
Em vez de usar o javascript: void (0); dentro do href eu uso javascript :; é mais curto para escrever.
Ally
16
A penalidade de desempenho se aplica somente se você realmente especificar um atributo href vazio. A pergunta afirma que não há nenhum atributo href.
Pete B
18
Na verdade, de acordo com o artigo (e faz sentido), a penalidade de desempenho em potencial se aplica apenas a atributos src vazios . Ele não diz nada sobre desempenho sobre atributos href vazios.
bergie3000
1
Olá @Gunnar, o link parece ter desaparecido agora. Você tem outra referência para a reivindicação?
user31782
25
Resposta curta: Não.
Resposta longa:
Primeiro, sem um atributo href, não será um link. Se não for um link, o teclado (ou o interruptor de respiração ou outro dispositivo de entrada não baseado em ponteiro) estará acessível (a menos que você use os recursos HTML 5 dos tabindexquais não são universalmente suportados). É muito raro que seja apropriado que um controle não tenha acesso ao teclado.
Segundo. Você deve ter uma alternativa para quando o JavaScript não for executado (porque o carregamento foi lento no servidor, uma conexão com a Internet foi interrompida (por exemplo, sinal de celular em um trem em movimento), o JS está desativado etc.).
O problema é que eu quero algo ao qual possa anexar um evento click com o método "click" do jQuery, que também é destacado e sublinhado como um link quando o mouse passa por cima dele. O que mais, além de uma tag âncora sem href, pode fazer isso sem CSS? (ou seja, como está sem adicionar manualmente essa interação básica, mantendo a simplicidade de uma atribuição de função de clique direto via jQuery).
Triynko
@Triynko - Use um link, mas faça-o corretamente. Veja a última linha da resposta.
@technoTarek - Sim, mas hrefera obrigatório (a menos que fosse uma âncora nomeada, caso em que o tabindex não fazia sentido). O uso de tabindexadicionar elementos unfocusable para a ordem de tabulação é uma inovação em HTML 5.
Quentin
4
Isto está simplesmente errado. Se você estava referenciando uma especificação mais antiga para HTML na época, não posso dizer, mas de acordo com a especificação do HTML5, é realmente perfeitamente válido ter uma atag sem um hrefatributo.
michael
23
Se você precisar usar o href para obter compatibilidade com versões anteriores, também poderá usar
Eu precisava de uma tag <a> que se comportasse como um link em todas, exceto na função. Isso fez o truque para mim.
Jad S
13
A tag é boa para usar sem um atributo href. Ao contrário de muitas das respostas aqui, existem realmente razões padrão para criar uma âncora quando não há href. Semanticamente, "a" significa uma âncora ou um link. Se você usá-lo para algo que segue esse significado, então você está bem.
Um uso padrão da tag a sem href é criar links nomeados. Isso permite que você use uma âncora com nome = blá e, posteriormente, você pode criar uma âncora com href = # blá para vincular à seção nomeada da página atual. No entanto, isso foi preterido porque você também pode usar IDs da mesma maneira. Como exemplo, você pode usar uma tag de cabeçalho com id = header e mais tarde poderá ter uma âncora apontando para href = # header.
Meu argumento, no entanto, não é sugerir o uso da propriedade name. Apenas para fornecer um caso de uso em que você não precisa de um href e, portanto, raciocinar por que ele não é necessário.
Acho que o que a pergunta estava tentando fazer e o que as outras respostas estão abordando é se é seguro omitir o hrefatributo de um <a>elemento que está sendo usado como elemento interativo (ou seja, um link). Como você mencionou, sem um hrefatributo, é simplesmente ... não um link, apenas uma âncora, que é uma coisa completamente diferente.
BoltClock
1
Sim, mas - apenas para enfatizar - a tag <a> ainda é válida nesses casos de uso.
monokrome
9
De uma perspectiva de acessibilidade <a>sem um href não é possível tabular, todos os links devem poder tabular; portanto, adicione um tabindex = '0 "se você não tiver um href.
Ou use um botão para executar uma ação na página em vez de um redirecionamento.
SimonDever
8
A <a>tag sem o "href" pode ser útil ao usar menus de vários níveis e você precisa expandir o próximo nível, mas não deseja que esse rótulo de menu seja um link ativo. Nunca tive problemas ao usá-lo dessa maneira.
Acabei de descobrir que no IE, se você passar o mouse sobre alguns links e um for uma âncora sem href, o pequeno pop-up com o URL abaixo permanece lá, mostrando o URL anterior, em vez de desaparecer. A âncora não é clicável, portanto, não é um grande problema, mas o suficiente para eu escolher uma div.
Andrew
1
Em alguns navegadores, você enfrentará problemas se não estiver atribuindo um atributo href. Eu sugiro que você escreva seu código algo como isto:
Estou usando o Backbone.js com o Backbone.Router e o tenho #para a página de índice. Para alguns dos meus links da barra de navegação, não quero acionar uma rota à #qual é o que acontece se você usar a href="#"por si só. O uso <a href="#" onclick="return false;"impede que a rota seja acionada, mas o evento click ainda borbulha no meu manipulador (que usa eventos DOM conectados por jQuery e Backbone.Radio). Obrigado @ shashwat13 :)
<span>
elementos certamente podem ser navegados pelo teclado . Você também pode fazer com que os<a>
elementos não sejam navegáveis pelo teclado .Respostas:
No HTML5, o uso de um
a
elemento sem umhref
atributo é válido. É considerado um "hiperlink de espaço reservado".Exemplo:
Procure por "hiperlink de marcador de posição" na página de referência da marca de âncora do w3c: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element .
E também é mencionado no wiki aqui: https://www.w3.org/wiki/Elements/a
Um link de espaço reservado é para casos em que você deseja usar um elemento âncora, mas não precisa navegar em nenhum lugar. Isso é útil para marcar a página atual em um menu de navegação ou trilha de navegação. (A abordagem antiga seria usar uma tag de extensão ou uma tag de âncora com uma classe chamada "ativo" ou "atual" para estilizá-la e JavaScript para cancelar a navegação.)
Um link de espaço reservado também é útil nos casos em que você deseja definir dinamicamente o destino do link via JavaScript no tempo de execução. Você simplesmente define o valor do atributo href e a tag anchor se torna clicável.
Veja também:
fonte
href
ocursor: pointer
estilo não será adicionado automaticamente ao elemento.Está tudo bem, mas ao mesmo tempo pode fazer com que alguns navegadores fiquem lentos.
http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/
Meu conselho é usar <a href="#"> </a>
Se você estiver usando o JQuery, lembre-se de usar também:
fonte
Resposta curta: Não.
Resposta longa:
Primeiro, sem um atributo href, não será um link. Se não for um link, o teclado (ou o interruptor de respiração ou outro dispositivo de entrada não baseado em ponteiro) estará acessível (a menos que você use os recursos HTML 5 dos
tabindex
quais não são universalmente suportados). É muito raro que seja apropriado que um controle não tenha acesso ao teclado.Segundo. Você deve ter uma alternativa para quando o JavaScript não for executado (porque o carregamento foi lento no servidor, uma conexão com a Internet foi interrompida (por exemplo, sinal de celular em um trem em movimento), o JS está desativado etc.).
Faça uso do aprimoramento progressivo por JS discreto.
fonte
href
era obrigatório (a menos que fosse uma âncora nomeada, caso em que o tabindex não fazia sentido). O uso detabindex
adicionar elementos unfocusable para a ordem de tabulação é uma inovação em HTML 5.a
tag sem umhref
atributo.Se você precisar usar o href para obter compatibilidade com versões anteriores, também poderá usar
em vez de #, se você não quiser usar o atributo
fonte
A tag é boa para usar sem um atributo href. Ao contrário de muitas das respostas aqui, existem realmente razões padrão para criar uma âncora quando não há href. Semanticamente, "a" significa uma âncora ou um link. Se você usá-lo para algo que segue esse significado, então você está bem.
Um uso padrão da tag a sem href é criar links nomeados. Isso permite que você use uma âncora com nome = blá e, posteriormente, você pode criar uma âncora com href = # blá para vincular à seção nomeada da página atual. No entanto, isso foi preterido porque você também pode usar IDs da mesma maneira. Como exemplo, você pode usar uma tag de cabeçalho com id = header e mais tarde poderá ter uma âncora apontando para href = # header.
Meu argumento, no entanto, não é sugerir o uso da propriedade name. Apenas para fornecer um caso de uso em que você não precisa de um href e, portanto, raciocinar por que ele não é necessário.
fonte
href
atributo de um<a>
elemento que está sendo usado como elemento interativo (ou seja, um link). Como você mencionou, sem umhref
atributo, é simplesmente ... não um link, apenas uma âncora, que é uma coisa completamente diferente.De uma perspectiva de acessibilidade
<a>
sem um href não é possível tabular, todos os links devem poder tabular; portanto, adicione um tabindex = '0 "se você não tiver um href.fonte
A
<a>
tag sem o "href" pode ser útil ao usar menus de vários níveis e você precisa expandir o próximo nível, mas não deseja que esse rótulo de menu seja um link ativo. Nunca tive problemas ao usá-lo dessa maneira.fonte
Em alguns navegadores, você enfrentará problemas se não estiver atribuindo um atributo href. Eu sugiro que você escreva seu código algo como isto:
você pode substituir seu código () por sua própria função ou lógica, mas lembre-se de adicionar return false; declaração no final.
fonte
#
para a página de índice. Para alguns dos meus links da barra de navegação, não quero acionar uma rota à#
qual é o que acontece se você usara href="#"
por si só. O uso<a href="#" onclick="return false;"
impede que a rota seja acionada, mas o evento click ainda borbulha no meu manipulador (que usa eventos DOM conectados por jQuery e Backbone.Radio). Obrigado @ shashwat13 :)