What do you do when you want to make the entire carded content a link (clickable)?
This is often done and is often introduced using HTML like the one below, which is a method to spread the link of child element A throughout.
<div class="oya-content">
<div class="ko-content-a">
<a href="">Child content contentA</a>
</div>
<div class="ko-content-b">
Child content contentB
</div>
</div>
It’s like adding “position:relative;” to the parent element and “position:absolute;” to the child element A with the link, expanding that element to the whole, and then specifying the position of the child element A. It will come true.
However, with this, specifying the position of content A in the child content is very troublesome, and the style code becomes very uncomfortable when trying to adapt it to various screen sizes.
Also, if you use something like “display:flex;”, the situation becomes increasingly complicated.
Therefore, this time, I will introduce two ways to make the entire parent element click (link) using a different method (I personally recommend [Method 2]).
The method introduced on this page is an example. Please check it yourself to determine whether it is correct as HTML coding.
[Method 1] Surround the entire content with link tags
This is quite a chore and was not recommended at all until a while ago. But before you know it, it has become acceptable (no longer seen as a problem), and you can sometimes see it written in the following way.
<a href="">
<div class="oya-content">
<div class="ko-content-a">
Child content contentA
</div>
<div class="ko-content-b">
Child content contentB
</div>
</div>
</a>
In terms of syntax, the anchor text part is the content enclosed in a div, so this is OK (maybe), but previously. .. Personally, I don’t want to use this method if possible because it comes with annotations like this.
By adding a class attribute to the a tag and writing style code for it, you can add some decoration etc. to only that content.
[Method 2] Use a link without anchor (link text)
This is the method I personally recommend and works well without being influenced too much by the display element in the style code.
Write HTML like this.
<div class="oya-content">
<a href="Link destination URL" aria-label="Purpose/content of link (instead of anchor)"></a>
<div class="ko-content-a">
<a href="">Child content contentA</a>
</div>
<div class="ko-content-b">
Child content contentB
</div>
</div>
The basic method is the same as the common form shown at the beginning, so write the style code as shown below to reflect the relationship between parent and child elements and link elements to the entire parent element.
.oya-content{
position:related;
}
.oya-content a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
There are four points to keep in mind when using this method:
- Insert the completed a tag directly below the parent element
- Do not put anchors (link text) in the a tag, and do not use the a tag in other parts.
- Add “aria-label” attribute instead of anchor
- Specify something other than the a tag for decoration when hovering
First, we will create a parent-child relationship using position, so we will create a structure where the link will be placed directly under the parent element.
Then, use the a tag only in this one place and do not use it anywhere else (if you use it, add a class to both to clearly separate them), and since there is no anchor, you can use Google PageSpeed Insights etc. to To avoid getting the message “No possible name specified,” add the “aria-label” attribute to clarify the meaning of this link (it seems that the title attribute would also work fine).
Finally, when you want to make a change, such as changing the background color when hovering, you usually use a pseudo element to control the a tag, but with this method, the a tag is placed on the content, so If you specify a style directly to the a tag with a pseudo element (:hover), it will not affect the contents and will be covered with the set background color, so be sure to add the pseudo element to the original class and write the style code. Let’s write.
The above seems unlikely, and I still have doubts as to whether this is really a good method, but it was a quick, easy-to-understand, and more reliable way to set links throughout the content.