リンクの入れ子は subgrid が最適解かもしれない

はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ

[inatax]

タグをタップしようとしてちょっとズレたら違うページに飛ばされることになるし、そもそもリンクを重ねるのってあんまりいいデザインじゃないと思う

[securecat]

JSなしでやるとしたらかなりイイ感じ…くらいでは？　今のところ最適解なのはXのタイムライン表示だと思う。

[otchy210]

アンカータグの入れ子を許していないのは、HTMLWG がそもそもリンクの入れ子をバッドプラクティスだと判断しているからでは？

[mayumayu_nimolove]

入れ子ダメな理由がhtmlのルール的なものなのか、UIとしての辻褄が合ってないからなのかで大きく違うと思う。入れ子リンクは誤タップを招くからね。文法的に正しければいいというものじゃない

[sigwyg]

そもそもa要素でブロックを囲むのが好きじゃない。どこに飛ばそうとしてるのか明確じゃないし

[oooooooo]

テキストをコピーしたいときに不便

[zentarou]

最近はなんでもかんでもリンクになってるから文字コピーするためにALTキーが過労死しそうになってる

[geerpm]

こんなのもうaタグのネスト許可してブラウザエンジンで宜しくやっといて欲しいなあ

[peketamin]

ユニバーサルデザインではないかもしれないけど、セグメントを習熟の早い層に絞ったサービスでは使い所が多そう