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

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 é?

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.

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>

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

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.