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

109

Eu quero aninhar spane amarcar. Eu devo

Colocar dentro<a>
Colocar <a>dentro
Não importa?

html css semantic-markup

— Salman A
fonte

110

3 - Não importa.

MAS, eu tendo a usar apenas 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> Texto </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 dentro de um <a>ou um <a>dentro de a .

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

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 depois um <a>, certifique-se de fechar a <a>tag antes de fechar o 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 é 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 .
se você quiser marcar algo em um link, coloque 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