Correct semantics to make an entire div become an anchor

Asked

Viewed 309 times

0

Hello, I have a simple question (I believe). In the image below, I would like anywhere I click redirects itself to the X link preserving the semantic web, without putting the entire div inside a <a>

follows the code I’m using:

<div class="square square-dec square-color-red">
  <span class="nmrSquare">77</span>
  <i class="fa fa-file-text-o fa-5x iconSquare" aria-hidden="true"></i>
  <span class="txtSquare">Cancelados</span>
</div>

Toda está imagem deve ser uma âncora

html

  • You just need to add an ID to the image, and on the link you click, use #seu_id on href

  • @Lai32290, but I’m not using image, everything was done through css

  • Not required to be an image, just add ID to the element, from which the element can be used as an anchor

  • The point is that I don’t want the element itself to be the anchor, for example: I want when you click on any purple part (from the image above) to be redirected to google.com (for example). Easily this would happen if I add all the code I passed in the question inside a <a>, but this does not go according to the semantic web

  • Got it, you can then wrap the entire div into a link element, which is the most recommended way for this case, or you can add a click-to-div event, and do the redirect action manually with Javascript

1 answer

0


From HTML5, the element a can have paragraphs, lists, tables and even sections, as long as it has no interactive content (buttons and other links).

With that, it is not incorrect to add to div within a a.

See the official documentation of W3:

Google Translation:

The element a can be rolled up into whole paragraphs, lists, tables and so on, even whole sections, as long as there is no interactive content inside (for example, buttons or other links). This example shows how this can be used to make an entire advertising block on a link:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

In your case, just add the element a before the div.

If you do not want, you can do by javascript too, but I do not see much need.

See below for an example of both ways.

function ancora(web) {
  location.hash = "#" + web;
}
div.square {
  width: 100px;
  height: 50px;
  background-color: red;
  display: inline-block;
}
<div class="square square-dec square-color-red" onclick="ancora('ancora');">
  <span class="nmrSquare">5</span>
  <i class="fa fa-file-text-o fa-5x iconSquare" aria-hidden="true">
</i>
  <span class="txtSquare">JavaScript</span>
</div>


<a href="#ancora">
  <div class="square square-dec square-color-red">
    <span class="nmrSquare">5</span>
    <i class="fa fa-file-text-o fa-5x iconSquare" aria-hidden="true">
</i>
    <span class="txtSquare">HREF</span>
  </div>
</a>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p id="ancora">Âncora</p>

If you want to read more about it, this answer has more examples and explanations.

  • Thanks for the reply, did not know that there were exceptions to add elements within a <a>!

Browser other questions tagged html

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