` 要素に `linkarea` 属性を追加しています。この要素をクリックすると、`defaultlink` 属性を持つ最初の子孫要素に委任（delegation）されます。
代替手段として、`linkarea` 属性の値に ID を指定することも可能です。
```html
```
この例では ID で指定するリンク要素は必ずカードの子孫である必要があります。
### a new element type
新しい要素型を導入するアプローチでは、`
` 要素を導入します。先程の例と同じように `defaultlink` 属性を持つ子孫要素にリンクの委任が行われます。
```html
```
この方法は `linkarea` 属性を使用する場合と比較して柔軟性の観点で望ましくないと指摘されています。例としてテーブルの行全体をリンクにしたい場合を考えてみましょう。`linkarea` 属性を使用する場合には以下のようになります。
```html
```
しかし新しい `` 要素ではこれを実現することが不可能です。なぜなら、`` 内の `` 要素では特別な HTML パーサーの処理が行われるためです。新しい要素を解析できるように HTML パーサーの挙動を変更すると、新しい要素をサポートしていないブラウザではページが正しく表示されない可能性があります。
一方で `linkarea` 属性を用いたアプローチではポリフィルを介して新しい属性をサポートできるため、ブラウザ間のサポートの差異を埋めることができます。
### CSS instead of HTML
3 つ目のアプローチでは HTML 属性や要素を使用する代わりに、新しい CSS プロパティ `pointer-area` を導入します。
```html
```
```css
.card {
pointer-area: contain;
}
.card h2 a {
pointer-area: expand;
}
```
この例ではカード要素のコンテナに `pointer-area: contain` を指定しています。これによりカード要素全体がクリック可能な領域となります。`pointer-area: expand` を指定した要素は、その要素のクリック領域が親要素のクリック領域に拡張されます。
### Use Invokers
最後のアプローチでは [Invokers](https://open-ui.org/components/invokers.explainer/) という提案を使用します。
```html
```
このアプローチでは `commandfor` 属性の値にリンク要素の ID を指定します。そして `command` 属性を使用してどのようなイベントを行うかを指定しています。
この方法の利点はリンク要素以外にも例えば `