4

Eu estava utilizando uma biblioteca de Scaffold para geração automática de códigos HTML. Era especificamente para gerar formulários em Boostrap 3.

Daí eu notei que os links de ações que estavem sendo gerados estavem assim:

<a href="url_da_pagina">
     <button class="btn btn-primary"></button>
</a>

Parece que o Scaffold dessa biblioteca estava gerando o código do Anchor (O famoso Link) com um Button dentro apenas para a formatação do Link ficar igual a do botão.

Mas nem precisa, no bootstrap você pode usar assim:

<a href="" class="btn btn-primary">Tipo como se fosse um botão</a>

A dúvida que me surgiu é: A biblioteca de geração automática de código fez isso como se fosse "algo normal". É realmente "normal"?

Existe algum problema em usar um Button dentro de um A, ou vice-versa?

Não sei, mas institivamente (ninguém me falou nada ou nenhum artigo que eu li me ensinou isso), tenho uma pequena impressão de que isso é uma má prática (ou gambiarra).

Fazer isso é válido? Esses validadores de código html da vida aprovaria colocar um botão dentro de um link ?

3

1 Resposta 1

11

Essa pergunta já foi respondida no SOen, e foi muito bem respondia. Então eu apenas irei traduzir esta resposta.

Isto não é válido!

Apenas com o fato de funcionar, não significa que algo seja válido.

Modelo de conteúdo: transparente (tanto o conteúdo fraseado ou conteúdo de fluxo) , mas não deve haver qualquer conteúdo interativo descendente.
O elemento pode ser envolvida em torno de parágrafos inteiros, listas, tabelas, e assim por diante, até secções inteiras, contanto que não há conteúdo interativo dentro (por exemplo, botões ou outros links).

Segundo a W3C, a tag a (<a>) pode receber qualquer elemento, exceto esses:

  • <a>
  • <div>
  • <audio>
  • <button>
  • <details>
  • <embed>
  • <iframe>
  • <img> (Se o atributo usemap estiver presente)
  • <input>
  • <keygen>
  • <label>
  • <menu>
  • <object>
  • <select>
  • <textarea>
  • <video> (Se o atributo controls estiver presente)

Da série, aconteceu comigo...

Em um código que eu estava desenvolvendo eu tinha um input dentro de uma tag <a>. Ao utilizar no Chrome e Firefox estava "funcionando" normalmente, mas utilizar o IE (que é o melhor validador, rsrs) ele apresentava um efeito diferente do apresentado, no meu caso um X, por não encontrar os elementos.
Somente depois de algum tempo, que percebi que aquele comportamento "diferente", se dava pelo fato de eu não estar usando o HTML corretamente.

E como dito pelo @renan nos comentários, basta utilizar um validador de código, que verá o motivo de não ser válido explicado em maiores detalhes.

Nota

No HTML5 algumas coisas foram mudadas. Como por exemplo, a tag a pode conter a tag img. Caso não acredite, em min, use o validador da W3 com o seguinte exemplo:

<!DOCTYPE html>
<html>
<head>
  <title>Estou testando</title>
</head>
<body>

<a href="form_action.asp">
  <img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>

<p>Click the image, and the click coordinates will be sent to the server as a URL query string.</p>

</body>
</html>
9
  • 1
    tanto img quanto div sempre achei que poderia usar. Vivendo e aprendendo!!!! Commented 13/05/2016 às 14:26
  • @MarceloDiniz Até pode funcionar, mas não é válido. Isso influência em diversos fatores, inclusive no SEO de seu site.
    – Randrade
    Commented 13/05/2016 às 14:27
  • @Randrade isso me deu idéia para outra pergunta, o que acha de questiornamos alternativas disso no SOPT? Commented 13/05/2016 às 14:28
  • Desculpe se não entendi, porém, utilizar link (<a>) em imagem é considerado uma má prática? Mas por que? Muitos sites grandes (inclusive SO) utilizam <a> em <img> e é uma questão de usabilidade além de necessidade ou estou enganado? Desculpe se entendi errado... Commented 13/05/2016 às 14:40
  • @VictorGomes Em que parte do SO possui isso? O que é feito, geralmente, é colocar a imagem via CSS. O que não é "certo", é colocar a tag <img> dentro de uma tag <a>.
    – Randrade
    Commented 13/05/2016 às 14:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .