Span dentro da âncora ou âncora dentro da amplitude ou não importa?

109

Eu quero aninhar spane amarcar. Eu devo

  1. Colocar <span>dentro<a>
  2. Colocar <a>dentro<span>
  3. Não importa?
html css semantic-markup Salman A
fonte

Respostas:

110

3 - Não importa.

MAS, eu tendo a usar apenas <span>dentro de uma <a>se for apenas para uma parte do conteúdo da tag, ou seja,

<a href="#">some <span class="red">text</span></a>

Ao invés de:

<a href="#"><span class="red">some text</span></a>

O que obviamente deveria ser:

<a href="#" class="red">some text</a>
Jon Hadley
fonte
1
Recentemente, encontrei um problema de espaço em branco com estouro de texto: reticências e estouro: oculto, que poderia ser resolvido adicionando um elemento de bloco embutido ao meu botão de navegação. Acabei com <a> <span> Texto </span> </a>. Então, eu acho (ou espero;)) que está tudo bem fazer isso quando você realmente precisa.
CunningFatalist
Vou para a opção 2 porque isso importa. A âncora deve ser apenas para ancorar e não para conter elementos (prática recomendada). Imagine uma situação em que você cria um bloco clicável e a âncora é o elemento pai do componente bloco e, dentro do componente, estão os links para imagens e mais imagens. O rastreador do Google ficará louco e, eventualmente, isso não é bom para o seu site.
Imam Bux
33

É perfeitamente válido (pelo menos para os padrões HTML 4.01 e XHTML 1.0) aninhar um <span>dentro de um <a>ou um <a>dentro de a <span>.

Só para provar a si mesmo, você sempre pode verificar no W3C MarkUp Validation Service

Tentei validar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

E também o mesmo que acima, mas com o <a>interior do<span>

ie

<span><a href="http://www.google.com">Google</a></span>

com ambos os tipos de documentos HTML 4.01 e XHTML 1.0, e ambos passaram na validação com sucesso!

A única coisa que você deve estar ciente é garantir que você feche as tags na ordem correta. Portanto, se você começar com um <span>depois um <a>, certifique-se de fechar a <a>tag antes de fechar o <span>e vice-versa.

CraigTP
fonte
20

Não importa - ambos são permitidos dentro um do outro.

Greg
fonte
Mas <a> é um nível de bloco e <span> é um elemento de nível embutido e o elemento de nível de bloco não pode vir dentro do elemento embutido. Acho que foi na validação w3c
Jitendra Vyas
26
Não, ambos são inline
Greg
16

isso depende do que você deseja marcar.

  • se você quiser um link dentro de um intervalo, coloque <a>dentro <span>.
  • se você quiser marcar algo em um link, coloque <span>em<a>
tricô
fonte
16

SPAN é um contêiner em linha GENÉRICO . Não importa se um aestá dentro spanou spandentro, apois ambos são elementos embutidos. Sinta-se à vontade para fazer o que parecer logicamente correto para você.

Salman A
fonte
2

Depende de para que serve o período. Se se referir ao texto do link, e não ao fato de ser um link, escolha # 1. Se a extensão se referir ao link como um todo, escolha # 2. A menos que você explique o que a extensão representa, não há muito mais resposta do que isso. Ambos são elementos embutidos, podem ser sintaticamente aninhados em qualquer ordem.

Sykora
fonte
Correto, ambos são elementos embutidos.
Chris
2

Pode ser importante se, por exemplo, você estiver usando alguma fonte de ícone de classificação. Eu tive isso agora com:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Normalmente, eu colocaria o intervalo dentro do A, mas o estilo não entraria em vigor até trocá-lo.

user1368737
fonte
1

Pessoalmente, como desenvolvedor da web, só coloco um intervalo em uma tag âncora se estou tentando destacar uma seção do texto do link, como aplicar um plano de fundo a uma seção.

Xopa
fonte
0

Funcionará em ambos, mas pessoalmente prefiro a opção 2, então o intervalo é "em torno" do link.

Oldskool
fonte
0

Semanticamente, acho que faz mais sentido, pois é um contêiner para um único elemento e, se você precisar aninhá-los, isso sugere que mais do que o elemento estará dentro do externo.

Toby
fonte