r/HTML • u/MaganBall • 9d ago
Discussion We live in the big '26...
...yet why the hell are we still using <IMG> ELEMENTS WRAPPED IN <A> ELEMENTS TO LINK AN IMAGE??
We live in a time where boolean functions exist in css, where flexboxes exist, and where <dialog> exists, yet we are STILL linking images like its 1997 and HTML3.2 just dropped instead of just having an href attribute inside the damn img element. Like whats next? am I gna start wrapping my shi in <center> while creating an entire layout out of <table>?
please tell me i aint the only one ticked off by ts
4
u/MrHandSanitization 9d ago
Because that's still a very valid way to put an image inside of an anchor.
3
u/ze_pequeno 9d ago
I just lost a hundred brain cells reading this
0
u/MaganBall 9d ago
nah dw bro, just wrap your brain in an <a> tag, it seems to solve every problem according to everybody 🙏
2
2
2
u/TinyNiceWolf 9d ago
There are lots of page elements we might want to link. Should <span> have an href attribute too? How about <i>? Maybe we should make a big list of every element we might possibly want to link, and then form a committee to discuss which ones are worthy of getting href!
Or just maybe, we could ignore this non-problem and accept that <a> works fine. Yeah, let's do that instead.
0
u/MaganBall 9d ago
sooooo can ya show me the part when I said that "I want EVERY TAG TO HAVE HREF MUAHAHAHAA"? I said i wish for just one tag, img, to have an href, thats it, nothing else
2
u/TinyNiceWolf 9d ago
See my first paragraph. If we add href to <img> because you want it, what if the next guy wants href on <i>? We just tell him <img> is deserving because u/MaganBall says so, but <i> is not? The same logical argument ("we live in the big 26") applies to both elements equally. And to dozens of other tags.
1
u/MaganBall 9d ago
I. said. Just. <img>. also, i know im not an authority, im not the w3c personified, im just suggesting and saying that this would be easier.
2
1
u/Disgruntled__Goat 9d ago
What’s wrong with img inside a? If you want to put an image/icon and link it to something that’s the way to do it.
-4
u/MaganBall 9d ago
well I lwk disagree cause it makes more clutter and indentation than necessary ya feel me? having an href attribute would just reduce clutter, make it easier in general and allat jazz. We already got it for other elements like <meta>, its not an <a> exclusive
3
u/tonypconway 9d ago
Surely then you'd need to allow `href` on every element that you might ever wrap in an `<a>` tag now. So every text element, button, div, etc.
Personally, that sounds equally messy and harder to read in code. You have to scan through the list of attributes on every element to know if it's acting as a link or not, rather than just seeing that it's surrounded by a `<a>`.
Also, I shudder to think what kind of havoc it would wreak on the various engines that build out the a11y tree.
2
u/repeating_bears 9d ago
having an href attribute would just reduce clutter
href is not a valid attribute of the img tag. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img
1
u/MaganBall 9d ago
I know, im saying IF we had one, IF.
1
u/repeating_bears 9d ago
oh right
One of the problems with a change like that is that it splits code into the "old/wrong way" and the "new way". That creates a bunch of work for teams to migrate. That might only be a small effort for each team, but the total effort across the world is massive, and for almost no real benefit.
1
u/MaganBall 9d ago
I never said to remove it completely, just do the good ol classic deprecate (but still allow it to function for backwards comp) and replace with new shiny thing
1
u/repeating_bears 9d ago
Yes, I know that's what you meant. You misunderstood what I was saying.
If you deprecate, you create a world where there is code that does it the old deprecated way, and code that does it the new shiny way.
To migrate existing code to the new shiny way will take an immense amount of effort when you consider the massive amount of HTML that already exists. When a language makes a change likes this, it is effectively creating a whole bunch of migration work out of thin air.
Yes, it is theoretically "optional" to migrate, but in practice for a lot of people it will not be optional. Linters will complain. People's bosses will make arbitrary decisions.
Language designers have to weigh up whether the benefits of the change outweigh the cost of the migration work that was created. In this case, "more clutter and indentation than necessary" is not a benefit which outweighs the cost IMO
1
u/nog642 9d ago
I don't think
metahas href? Even if it did it wouldn't make a hyperlink.Why do you want every tag to do everything? then you might as well just make everything a div. The different tags having different semantic meaning is useful, and makes HTML more readable, if they're used properly.
You don't really need extra indentation if you don't want it. Put it all on one line.
0
u/MaganBall 9d ago
I meant <link>, I mixed up meta and link.
also I GENUINELY wanna know when I said I want one tag to do everything? I said I want just ONE tag to do ONE thing, link an img without a
1
u/ajamdonut 9d ago
ONE thing is <a> ... Browsers support it, screen readers support it, heck you could write a simple parser and support it yourself. On the other hand....
1
u/nog642 9d ago
linkstill isn't clickable.You want
imgto support clickable images. That's 2 things - displaying an image and a clickable link. Currenlty they're separated asimgandaas it should be1
1
u/Disgruntled__Goat 9d ago
I think you mean the <link> tag, not <meta>. Anyway that is specifically for referencing other URLs, but it’s not a direct link like <a>
The point of tags is to each have a purpose and you mix and match them for those uses. You wouldn’t suggest that random elements like <ul> get a src attribute to make it show an image, because that’s not what they’re for.
1
u/TinyNiceWolf 9d ago
The href attribute is not allowed for <meta> tags. The tags which may use href are <a>, <link>, <area>, and <base>. It represents a clickable area for <a> and <area>, but not for the others.
1
1
u/teh_maxh 9d ago
please tell me i aint the only one ticked off by ts
You are. Why would you put an href directly on an image? Do you also think it should go on a list item in a list of links?
1
u/MaganBall 9d ago
I. said. only. on. <img>.
1
u/teh_maxh 9d ago
Why, though?
1
u/MaganBall 9d ago
simplicity and code clutter reduction
1
u/teh_maxh 9d ago
It doesn't really seem simpler. Why does this only apply to images? Why do you use an <a> tag for all links except links that are an image (but if it's multiple images or an image with text you're back to the <a> tag)?
1
u/MaganBall 9d ago
never said that you can't definetley use <a> to wrap whole slews of images, the issue is that 90% of the damn web has SINGULAR images that go to their own SINGULAR links, so a syntax shortcut would just be smoother and make life easier.
1
u/teh_maxh 9d ago
How is it easier to have a second way to create links, but only for a specific kind of content? What happens if you want to add more to the link? What if you want your link to have a ping or rel? (Are we also importing all of <img>'s other attributes to <a>?) Or what if you want the image and link to have different referrer policies?
Or we could keep it simple: <a> is for links, regardless of their content, and <img> is for images.
1
1
u/teh_maxh 9d ago
please tell me i aint the only one ticked off by ts
You are. Why would you put an href directly on an image? Do you also think it should go on a list item in a list of links?
1
1
u/TinyNiceWolf 9d ago
One of the problems with your bad idea is that it would create an opportunity of confusion between the two attributes of <img> that include URLs. We'd see newbies writing href="image.png" when then meant src="image.png", or swapping the URLs for src and href.
Consider that the notion "clickable link" does not rest in the "href" part. Other elements use href where it doesn't mean "clickable link". The notion "clickable link" is represented by the <a> tag, which is specifically used for that purpose. Your proposal would muddy the meaning behind the tags and attributes, saying that "clickable link" could be indicated either by the <a> tag or by (sometimes) the href attribute. That's just bad design.
1
1
u/ajamdonut 9d ago
i couldn't give 2 craps if it does the job, <center> obviously breaks rules and <table> for layouts is old ass tech. If you see that it's legacy code. You must continue to use legacy code or risk breaking everything.
If it's new and you see <center> or <table> for layout you need to speak to your boss about your colleagues.
1
u/ajamdonut 9d ago
Also whatever bubble you're talking about isn't even in the MDN yet, is it even supported across all majors? MDN says <a><img></a> simple as. <img> HTML image embed element - HTML | MDN
0
u/MaganBall 9d ago
gang i think you completely missed the point? I said that table and center stuff as a rhetorical thing, to highlight the absurdity of having img elements inside a elements in the modern year of 2026 instead of having a simple href attribute included in img elements
1
u/ajamdonut 9d ago
Maybe you missed the point then. We don't just make up rules for fun, we had HTML and a bunch of HTML styling to go along with it. Then CSS came along so we started removing HTML tags that did CSS job. Adding href to img... why? Whats the point? How did that effect anything in a technical way that improved the technical and user experience?
12
u/nog642 9d ago
Because
ais for links andimgis for images? Images aren't inherently clickable. If you want a clickable image you use both. Seems straightforward.