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&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&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.
You just need to add an ID to the image, and on the link you click, use #seu_id on href
– Lai32290
@Lai32290, but I’m not using image, everything was done through css
– Everton Neri
Not required to be an image, just add ID to the element, from which the element can be used as an anchor
– Lai32290
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
– Everton Neri
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
– Lai32290