1

I'm struggling with a simple problem. I'm using <a> to link a whole block full of content, instead of linking through title or image, I want to link the whole content, and if I had to place everything into an inline <a> element, I would end up with bunch of spans, and I would rather use more semantic code, so I was thinking about placing empty <a> element before everything else and then use more semantic tags for the content.

What I had before:

<p>
    <a href="">
        <span class="percent">- 27%</span>
        <span class="images"><span><img src="img/img02.png" alt=""></span></span>
        <span class="title">Špičkový šlehač Š-LEH-NIHO, pomocník každé hospodyňky</span>
        <span class="bottom-part">
            <span class="price"><b>18 599</b> Kč</span>
            <span class="status available">Skladem</span>
        </span>
    </a>
</p>

Obviously, each of those tags is necessary, because it requires different styling. This might be something completely ridiculous that most of you solved years ago, but I tend to run into it quite regularly and every time I feel bad about using those spans - what is worse, using that empty link tag, or placing everything into it and having spans with long classes?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
lefiath
  • 21
  • 2
  • Why feel bad if it looks ok and the customer is happy with it? The computer doesn't care? and unless there are lots (many hundreds) then it will be reasonably quick to transmit? – Ryan Vincent Nov 27 '15 at 20:51
  • What would be the alternative to the snippet you included? – unor Nov 27 '15 at 22:02
  • Possible duplicate of http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Bustikiller Nov 27 '15 at 22:13
  • @RyanVincent I just feel like the span spam is not very intuitive and might be problematic if the code gets passed to other people (which it will, I'm not a programmer, just coder), sure, I might be getting worked up about something completely irrelevant, but when I spend hours on code, I try to make it as clean as possible. – lefiath Nov 27 '15 at 23:09
  • @unor I was thinking about something like [this](http://pastebin.com/RjB49dVe) Arguably, it's not much better, but at least it's not a span spam. If you're further interested, [this](http://lefiath.cz/temp/vede/hl.html) is what I'm making, but it's obviously unfinished. – lefiath Nov 27 '15 at 23:27
  • 1
    @lefiath: Given the alternative, why not combine both variants, i.e., use `a` with the `figure`, `footer` etc. inside? – unor Nov 27 '15 at 23:47
  • I don't get what the problem is. You say you have a "bunch of spans, and I would rather use more semantic code", so why don't you? You can put more than just spans in an ``. Please explain. Also, what do you mean by "empty `` tag"? And, if "each of those tags is necessary", then it cannot possibly be "completely ridiculous". – Mr Lister Nov 29 '15 at 12:47
  • @unor: Sorry that I haven't replied earlier, hospitalized :) I have since learned that with html5, I can place block items into inline ones, so that was the information I was looking for, but it hasn't occured to me to just ask if it's possible. Now my new structure looks exactly like that. – lefiath Dec 02 '15 at 18:41
  • @Mr Lister: As I've mentioned above, I didn't knew that with html5 you can now use block items inside inline items, so I was still doing the same old stuff from html4. – lefiath Dec 02 '15 at 18:43
  • 1
    @lefiath You still can't use block items inside inline items! However, the content model of `a` has changed in HTML5 from `inline` to `transparent`, that is, you can use the same elements inside an `a` as you can use inside its parent. The same is true for some elements, like `ins`, `del`, `object`, etc, but not for all inline elements, which are still inline in HTML5. – Mr Lister Dec 02 '15 at 18:58
  • @MrLister I took it from here: http://html5doctor.com/block-level-links-in-html-5/ I'm using it specifically for a, that was my original question, I have no need to otherwise place block items into inline ones, so you don't have to worry about that... – lefiath Dec 03 '15 at 19:57

1 Answers1

0

there is no problem with html perspective but if you use a tag with blank href value then when you click on this tag it will refresh the page.

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74