Válido para usar <a> (marca âncora) sem o atributo href?

152

Eu tenho usado o Twitter Bootstrap para criar um site, e muitas de suas funcionalidades dependem de envolver as coisas <a>, mesmo que elas apenas executem Javascript. Eu tive problemas com a href="#"tática recomendada pela documentação do Bootstrap, então estava tentando encontrar uma solução diferente.

Mas tentei apenas remover o hrefatributo completamente. Eu tenho usado <a class='bunch of classes' data-whatever='data'>e o Javascript lida com o resto. E isso funciona.

No entanto, algo está me dizendo que eu não deveria estar fazendo isso. Certo? Quero dizer, tecnicamente <a>é suposto ser um link para alguma coisa, mas não tenho muita certeza por que isso é um problema. Ou é?

Zacqary
fonte
1
Possível duplicata de É uma marca de âncora sem o atributo href seguro?
manipula

Respostas:

245

O <a>elemento nchor é simplesmente uma âncora para ou de algum conteúdo. Originalmente, a especificação HTML permitia âncoras nomeadas ( <a name="foo">) e âncoras vinculadas ( <a href="#foo">).

O formato âncora nomeado é menos usado, pois o identificador de fragmento agora é usado para especificar um [id]atributo (embora para compatibilidade com versões anteriores você ainda possa especificar [name]atributos). Um <a>elemento sem um [href]atributo ainda é válido .

No que diz respeito à semântica e estilo, o <a>elemento não é um link ( :link), a menos que tenha um [href]atributo. Um efeito colateral disso é que um <a>elemento sem [href]não estará na ordem de tabulação por padrão.

A verdadeira questão é se o <a>elemento sozinho é uma representação apropriada de a <button>. Em um nível semântico, há uma diferença distinta entre a linke a button.

Um botão é algo que quando clicado faz com que uma ação ocorra.

Um link é um botão que causa uma alteração na navegação no documento atual. A navegação que ocorre pode ser movida dentro do documento no caso de identificadores de fragmento ( #foo) ou movida para um novo documento no caso de URLs ( /bar).

Como os links são um tipo especial de botão, eles geralmente tiveram suas ações substituídas para executar funções alternativas. Continuar usando uma âncora como botão é aceitável do ponto de vista da consistência, embora não seja muito preciso semanticamente.

Se você estiver preocupado com a semântica e acessibilidade do uso de um <a>elemento (ou <span>, ou <div>) como um botão, adicione os seguintes atributos:

<a role="button" tabindex="0" ...>...</a>

A função do botão informa ao usuário que o elemento específico está sendo tratado como um botão como uma substituição para qualquer semântica que o elemento subjacente possa ter.

Para <span>e <div>elementos, convém adicionar ouvintes de chave JavaScript Spaceou Enteracionar o clickevento. <a href>e <button>elementos fazem isso por padrão, mas elementos que não são botões não. Às vezes, faz mais sentido vincular o clickgatilho a uma chave diferente. Por exemplo, um botão "ajuda" em um aplicativo Web pode estar vinculado F1.

zzzzBov
fonte
1
@ Zacqary, [role="button"]não faz nada concreto, você ainda precisa ouvir o evento click (mas faria isso de qualquer maneira para criar um botão JS). Ele deve ser usado para navegação assistida (também conhecido como leitores de tela), para que o leitor de tela saiba representar o elemento como um botão, e não seu valor semântico original. Adicionar [tabindex]adiciona o elemento à ordem de tabulação. Em circunstâncias especiais, talvez você não queira / precise do botão navegável na ordem de tabulação, por isso é um atributo opcional. Os elementos que já são botões não precisam [role="button"], pois são redundantes.
ZzzzBov
É HTML válido ter uma marca de âncora sem href e sem nome? Em nosso aplicativo, temos alguns links de exclusão desativados (portanto, nenhum atributo href), mas ainda mostrados ao usuário.
Joshua Muheim
1
@ JoshuaMuheim, espero que você não se importe, mas eu postei sua pergunta como uma pergunta independente .
precisa saber é o seguinte
Só queria adicionar uma observação de que, se você estiver usando isso para criar 'botões' para ações javascript ... remover completamente o atributo href também fará com que o Chrome (e provavelmente outros navegadores) pare de mudar o cursor durante o mouse. Obviamente, isso é fácil de adicionar novamente com CSS - mas apenas um aviso.
Mir
@ Senhor, se você não for usar [href], provavelmente deve usar um <span>para o botão.
ZzzzBov
45

Acho que você pode encontrar sua resposta aqui: Uma tag de âncora sem o atributo href é segura?

Além disso, se você não deseja operação de link com href, pode usá-lo como:

<a href="javascript:void(0);">something</a>
swati
fonte
3
Na verdade, deve serjavascript:undefined
rybo111
2
@ rybo111 você está certo, mas eu ainda prefiro void (0); basicamente porque parece melhor. Eu não gosto de meus clientes para ver as coisas como "indefinido" ;-)
Alex
9
<a href="javascript:;">text</a>?
diynevala
javascript:;usado para quebrar coisas como efeitos de sobreposição e até animações gif no IE6. E para operações sem link, existem elementos HTML dedicados como button. Ao mesmo tempo, coisas como links AJAX podem usar seus hrefs para ações de fallback se o JS falhar.
Ilya Streltsyn
14

Sim, é válido usar a tag anchor sem um hrefatributo.

Se o aelemento não tiver hrefatributo, o elemento representará um espaço reservado para onde um link poderia ter sido colocado, se fosse relevante, consistindo apenas no conteúdo do elemento.

Sim, você pode usar classe outros atributos, mas você não pode usar target, download, rel, hreflang, etype .

A target, download, rel, hreflang, e typeatributos devem ser omitidos se o atributo href não está presente.

Quanto à parte " Devo? ", Consulte a primeira citação: " onde um link poderia ter sido colocado caso fosse relevante ". Então, perguntava " Se eu não tivesse JavaScript, usaria essa tag como um link? ". Se a resposta for sim, então sim, você deve usar <a>sem href. Se não, ainda o usaria, porque a produtividade é mais importante para mim do que a semântica de casos extremos, mas essa é apenas minha opinião pessoal.

Além disso, você deve observar comportamentos e estilos diferentes (por exemplo, nenhum sublinhado, nenhum cursor apontador, não a :link).

Fonte: Recomendação W3C HTML5

Tamás Bolvári
fonte
Não é tanto sobre "semântica caso extremo", mas sobre acessibilidade, que está certificando-se que as pessoas com deficiência possam usar e entender o conteúdo de um website
neiya
3

Isso é válido. Você pode, por exemplo, usá-lo para mostrar modais (ou coisas semelhantes que respondem data-togglee data-targetatributos).

Algo como:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Aqui eu uso o ícone de fonte impressionante, que é melhor como uma amarca do que como uma button, para mostrar um modal. Além disso, a configuração role="button"faz o ponteiro mudar para um tipo de ação. Sem um hrefou role="button", o ponteiro do cursor não muda.

vedante
fonte
2
Você deve usar um botão neste caso. É mais apropriado do ponto de vista semântico e de acessibilidade. As âncoras devem levá-lo a algum lugar, não executar uma ação. Além disso, por que você está escondendo toda a âncora aria-hidden? O ícone, talvez, mas os usuários de leitores de tela não devem ter uma experiência reduzida.
Isherwood