Code 1
The link behind the playbutton here is not clickable.
Code 2
The link behind the playbutton here is clickable.
How come?
Click on the edges of the playbutton.
Clearly, it’s because the first code doesn’t have a link there, while the second code does have a link there.
1 Like
Now I don’t need to use pointer events none.
Of course, if that isn’t intended to be a link, it shouldn’t be marked up with <a> tags.
Why are you not using the improved version of the HTML using <ul>, which @PaulOB gave you over a week ago?
Getting initial to work at the top of the code? - #174 by PaulOB
I have that version too.
I have many different ones.
Why? Why keep using old code when you’ve been shown a better method?
Why link to that article? You’re not using the <a> tag in any of the ways described there.
Here I am:
<div class="linkse">
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a> Audio Player</a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
How does your use fit with the examples in the article?
The whole point here seems to be that you don’t want it to be a link - hence you were looking for ways to stop it behaving as one.
Use the right tag for the right purpose.
No, I’m asking you to explain why you believe an <a> tag is appropriate to use here, when you don’t intend the item to be either a link or an anchor.
If you used PaulOB’s code with the <ul>, you could add <a> links to those <li> elements which are actually links, and omit them from all the others. So far, there is nothing about your code to demonstrate a need for any of those <a> tags, and the only explanation you have offered is that they “might” be links at a later stage.
2 Likes
Yes it would. and they wil be links, stop telling me they won’t be, when I’m telling you they will be.
THEY WILL BE REAL LINKS.
<ul class="nav">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a> Audio Player</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
As you can see, both versions require them.
https://jsfiddle.net/ffLvyh1c/4/1
<div class="linkse">
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a> Audio Player</a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
Cursor:pointer, is now broken.
It now thinks the whole 266px x 200px should be targeted, when only the button should be targeted.
.activee {
cursor: pointer;
fill: #aaff00;
}
Now, you need to realize the context of the html used in the example I gave you in that link.
It was using anchors nested in list-items. The elimination of the href attribute was to maintain the styling you had used on the anchors, while allowing the anchor to still be a placeholder for the text (that would never be a link).
:hover will work on any html element. You can change styles on div:hover if you ever need to emulate any anchor hover effects.
So you only need to use an anchor when it is an actual link, or as we did , a link-less anchor to maintain the styling used on other anchors in the list.
The dimensions were set on your anchors so to keep everything working we needed an anchor without href.
.wrap a {
float: left;
width: 44px;
height: 44px;
border: 3px solid #0059dd;
margin: 0 4px 12px 0;
}
What’s the difference if it’s not nested inside list-items?
https://jsfiddle.net/ffLvyh1c/4/1
<div class="linkse">
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a> Audio Player</a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
How come the cursor:pointer; is targeting the playButton on this code.
.activee {
cursor: pointer;
fill: #aaff00;
}
But not this code?
It now thinks the whole 266px x 200px should be targeted
.activee {
cursor: pointer;
fill: #aaff00;
}
What’s the difference?
This doesn’t make sense.
Someone please explain this to me.
That breaks any ability to easily use links when the CSS fails to load.
It’s a standard best-practice to place a list of items such as links, in a list.
2 Likes
Yes, if CSS fails to load the browsers default styling will take over.
By default, an <a> is an inline element. So that would give you a string of anchors that laid out like a sentence.
By default, an <li> is a block element. So that would stack the nested anchors into a readable list of links. 
1 Like
Also, blind or hard-of-vision users that use screen reading software always have a much harder time when it’s a series of inline text. When it’s a list then things works much better for them.
These guide and recommendations aren’t there just on the whim of some of us here. There tend to be serious reasons underlying many of these techniques, that aren’t apparent until much later on.
1 Like
In summary, when somebody that is recognised as being an expert says do this, don’t just go ahead and do something different instead. They are an expert because they know things that you don’t. They might not even be able to express why it’s better, but they do know that it is better.
4 Likes