Link im Header? Oder Header im Link?

Eric Range hat sich mit dieser Blog-Post-Idee gemeldet. Ist es besser, ein Header-Tag in einen Ankerlink einzubetten oder umgekehrt? Unter der Annahme von HTML5 sind beide völlig gültig.

Link im Header

<h1>
  <a href="#">
    Ten Ways to Have Yourself a Merry Little Christmas
  </a>
</h1>

Header im Link

<a href="#">
  <h1>
    Ten Ways to Have Yourself a Merry Little Christmas
  </h1>
</a>

Also, wofür entscheiden Sie sich? Ich würde sagen, das kommt darauf an.

Klickbarer Bereich

Standardmäßig ist das Anker-Tag ein Inline-Element und der Header ein Block. Ohne dies mit CSS zu ändern, ist der klickbare Bereich für h1 > a der hellrote Bereich hier

Im Gegensatz zum Ansatz a > h1, bei dem der Block-Header vollständig klickbar wird.

CSS könnte den Link im oberen Beispiel leicht auch zu einem Block-Element machen, aber das wäre der normale Standard.

Sie denken vielleicht: „Mehr klickbarer Bereich! Das ist gut!“, was legitim ist, aber es wirkt sich auf Folgendes aus

Textauswahlfreundlichkeit

Wie wichtig das ist, überlasse ich Ihnen. Aber ich bin ein „von unten rechts“-Selektor und hasse Block-Level-Links aus diesem Grund immer.

Layout-Kuriosität

Sie können dies einfach beobachten und sicherstellen, dass Sie dies in CSS berücksichtigen, aber es gibt eine seltsame Fallstrick, wenn Sie den Ansatz a > h1 wählen, bei dem ein Innenabstand des Links zu einer Situation wie dieser führen würde.

Zwei Header, ein Link

Wenn Sie jemals einen verknüpften Titel und Untertitel benötigen (und Sie keinen Untertitel mit einem Kind-Span oder Ähnlichem verwenden möchten), könnte der umschließende Anker nett sein.

<a href="#">
  <h1>Cheese is favorite holiday gift</h1>
  <p class="subtitle">From a one-person survey held in central Wisconsin</p>
</a>

Zugänglichkeitsbedenken

Ich bin mir nicht sicher, fürchte ich. Gibt es welche?

Gewinner?

Ich neige dazu, h1 > a zu mögen, und eine informelle Umfrage zeigt, dass die überwiegende Mehrheit der Leute das auch tut.

Dennoch eine Überlegung wert.