Correct semantics to make an entire div become an anchor

0

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

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

    
asked by anonymous 04.04.2017 / 16:08

1 answer

0

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

As a result, it is not incorrect to add div within a a .

See official W3 documentation:

Google translation:

  

The a element can be wrapped in whole paragraphs, lists, tables, and so on, even whole sections, as long as there is no interactive content inside (eg buttons or other links). This example shows how this can be used to make an entire ad unit 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 div .

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

See below an example of both forms.

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'd like to read more about this, this answer has more examples and explanations.

    
04.04.2017 / 16:26