Is it acceptable to use <H2>, <H3>, <p>, <div> tags within links/anchors (<a></a>)?

Asked

Viewed 1,166 times

13

It is acceptable in question SEO and semantics to use tags like <h2>, <h3>, <p> and <div> inside <a href=""></a>?

I noticed that to make items on a page people usually use a structure similar to this:

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

I know the tag <a> is inline and needs the display: block for it to work, but the question really is about SEO and semantics.

  • In HTML5 the tag <a> can be inserted whole paragraphs, lists, tables,and so on, even whole sections, as long as there is no interactive content within it, I believe I would only miss the semantics if there was something from the <a> which changes its natural behaviour.

  • William, I know your question is about CEO, but in HTML5 the concept of inline x block has matured, now the elements are organized by categories, and an element can receive a different classification depending on some conditions... to better understand, read: Content Categories... in the case of <to> he can both be a conteúdo de texto as to a conteúdo de fluxo.

  • @Tobymosque only one CEO detail != SEO.

  • ops, I typed CEO by mistake, it was SEO itself.

  • 1

    Just to increase the answers, I’ll leave that answer on webmasters.

2 answers

12


It is acceptable to use tags <h2>, <h3>, <p>, <div> within links/anchors (<a></a>)?

Yes. This is an HTML5 feature. Other versions did not allow this use.

On the contrary (put <a> inside <h1>, <h2>, etc.) is the most widely used to date. There are several examples. one of the most notable, in my view, is the documentation of the Github. Hovering the mouse over a title, an image of an anchor containing the full link to that anchor appears.

  • Yes is the most used by ecommerces like ebay, however I say this to use inside the <a> in order to make everything clickable. Although I think I will use clickable only the title and the photo.

  • Here goes your goal. I would keep the classic approach, which works for everything.

  • I did not express myself well, I think the approach seems to me the classic, what I intend to do is something like (summarized) <h2><a></a></h2><a><img></a>... Would this be the classic no?

  • That’s right. That’s what I’d wear.

  • 1

    I had forgotten to mark as correct :) Thank you!

11

In the specification of the tag <a> in Permitted Elements HTML5 the following elements are supported and supported are semantically correct if they do not change the original behavior of <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>

Recommended Link SOEN: Is putting a div Inside an Anchor Ever correct?

  • I think he’s saying use the tags inside <a> and not out as Parent (parent/upper tag) of <a>.

  • @Kaduamaral, both father and son accept the same elements, da para ver isto em permitted content: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

  • 1

    Hmm correct Gabriel, thank you for clarifying. I suggest then that you change your answer to Permitted content, and remove the interactive elements from your list as they are not allowed in the tag <a> according to MDN: _ Transparent, containing either flow content (excluding Interactive content) or phrasing content._.

  • Thank you for your reply +1

Browser other questions tagged

You are not signed in. Login or sign up in order to post.