13

É aceitável em questão SEO e semântica usar tags como <h2>, <h3>, <p> e <div> dentro de <a href=""></a>?

Notei que para tornar itens em uma página as pessoas costumam usar uma estrutura semelhante a esta:

<div class="item">
    <a href="produto/1">
        <figure>
            <img src="images/produto-1.jpg" alt="produto 1">
        </figure>
        <h2>Produto</h2>
        <p class="price">R$ 1000</p>
    </a>
</div>

Eu sei que a tag <a> é inline e necessita do display: block para que funcione, mas a questão realmente é sobre SEO e semântica.

5
  • No HTML5 a tag <a> pode ser inseridas parágrafos inteiros, listas, tabelas,e assim por diante, até mesmo seções inteiras, contanto que não há conteúdo interativo dentro do mesmo, acredito que só iria perder a semântica se houvesse algo do <a> que altera-se o seu comportamento natural. Commented 11/01/2016 às 15:10
  • Guilherme, sei que a sua pergunta é quanto a CEO, mas no HTML5 o conceito de inline x block sofreu um amadurecimento, agora os elementos estão organizados por categorias, sendo que um elemento pode receber uma classificação diferente dependendo de algumas condições... para entender melhor, leia: Content categories... no caso do <a> ele tanto pode ser um conteúdo de texto quanto um conteúdo de fluxo. Commented 11/01/2016 às 15:15
  • @TobyMosque só um detalhe CEO != SEO.
    – Syzoth
    Commented 11/01/2016 às 16:07
  • ops, digitei CEO por engano, era SEO mesmo. Commented 11/01/2016 às 16:59
  • 1
    Apenas para incrementar as respostas, deixarei essa resposta no webmasters.
    – Randrade
    Commented 11/01/2016 às 17:33

2 Respostas 2

12

É aceitável usar tags <h2>, <h3>, <p>, <div> dentro de links/âncoras (<a></a>)?

Sim. Isto é um recurso do HTML5. Outras versões não permitiam este uso.

Já o contrário (colocar <a> dentro de <h1>, <h2>, etc.) é o mais utilizado até hoje. Há vários exemplos. um dos mais notáveis, a meu ver, é o de documentações do GitHub. Passando o mouse por cima de um título, aparece uma imagem de uma âncora contendo o link completo até aquela âncora.

5
  • Sim é o mais usado por ecommerces como o Ebay, no entanto eu digo isto de usar dentro do <a> na intenção de tornar tudo clicável. Se bem que acho que vou passar a usar clicável apenas o título e a foto.
    – Syzoth
    Commented 11/01/2016 às 16:06
  • Aí vai do seu objetivo. Eu manteria a abordagem clássica, que funciona pra tudo. Commented 11/01/2016 às 16:12
  • Não me expressei direito, acho que a abordagem me parece a classica, o que pretendo é fazer algo como (resumido) <h2><a></a></h2><a><img></a>... Seria isto o classico não?
    – Syzoth
    Commented 11/01/2016 às 16:16
  • Isso mesmo. É o que usaria. Commented 11/01/2016 às 16:31
  • 1
    Tinha me esquecido de marcar como correta :) Obrigado!
    – Syzoth
    Commented 29/02/2016 às 2:20
11

Na especificação da tag <a> em Permitted elements do HTML5 os seguintes elementos são suportados e por serem suportados são semanticamente corretos se não alterarem o comportamento original do <a>:

>  <a>, <abbr>, <address>, <article>,
> <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>,
> <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>,
> <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>,
> <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>,
> <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>,
> <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>,
> <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>,
> <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>,
> <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>,
> <time>, <ul>, <var>, <video>, <wbr>

Link Recomendado SOEN: Is putting a div inside an anchor ever correct?

4
  • Acho que ele está dizendo usar as tags dentro de <a> e não fora como parent (tag pai/superior) de <a>.
    – KaduAmaral
    Commented 13/01/2016 às 10:49
  • @KaduAmaral, tanto pai quanto filho aceitam os mesmos elementos, da pra ver isto em permitted content: developer.mozilla.org/en-US/docs/Web/HTML/Element/a Commented 13/01/2016 às 10:56
  • 1
    Hmm correto Gabriel, obrigado por esclarecer. Sugiro então que altere sua resposta para Permitted content, e remova os elementos interativos da sua lista, pois não são permitidos na tag <a> de acordo com a MDN: _ Transparent, containing either flow content (excluding interactive content) or phrasing content._.
    – KaduAmaral
    Commented 13/01/2016 às 13:24
  • Obrigado pela resposta +1
    – Syzoth
    Commented 3/03/2016 às 20:58

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 .