Überschriften richtig verlinken

Da Besucher Ihrer Webseite gerne auf Überschriften klicken stellt sich die Frage, “wie verlinke ich eigentlich richtig Überschrifte? Was kommt zuerst, das A-Tag oder der H-Tag? Ganz einfach!

Wichtig ist, dass ein A-Tag ein Inline-Element ist und ein H-Tag ist ein Block-Element.

Inline-Elemente dürfen nur in Block-Elemten stehen. Andersrum geht es nicht!

Das bedeutet, Sie sollten ihre überschrift immer so verlinken:
Erst das H dann das A

35 Reaktionen zu “Überschriften richtig verlinken”

  • Gabriel

    Dank HTML5 muss das bald nicht mehr beachtet werden! :)

  • Webdesign Berlin

    Guten Abend,

    der Meinung bin ich auch. Ich würde beim Verlinken von Überschriften immer das Tag vor dem Tag setzen.

  • Webdesign Saarland

    Vom logischen Ansatz her sollte der A-Tag im H-Tag stehen, weil die Überschrift die übergeordnete Funktion erfüllt.

  • Webdesign Portfolio

    Wenn es nach der logik geht sollte ein htag nie verlinkt sein. für mich ist logisch das ein inline elemt im block element steht. leider achtet kaum jemand auf barrierefreies sauber gecodetes xhtml. da ist egal ob html5 6 oder 7 neuerungen bringt. ich finde jede seite und das eingeschlossen der unterseiten sollte w3c valide sein- ohne ausnahme.

  • Webagentur

    Ein H-Tag sollte tatsächlich nie verlinkt sein, sondern lieber Passagen aus dem Content. Es macht auch nicht unbedingt viel Sinn, wenn eine Überschrift verlinkt ist.

  • Admin

    Natürlich sollten Überschriften verlinkt sein. User klicken oft auf Teaser-Überschriften um auf den Beitrag zu kommen. Natürlich kann man ihnen auch eine andere Klasse geben aber es sind nunmal überschriften und wenn User drauf klicken, dann soll man sie auch verlinken. Das ist Usability.

  • Awenza

    Frage an Gabriel: und warum dank HTML5 muss das bald nicht mehr beachtet werden?

  • bcp-design

    Schon krass – wusste gar nicht das es da nen Unterschied gibt ;)

  • ben

    Man sollte allein aus dem Grund der klaren inhaltlichen Definition der Webseiten Überschriften immer mit h-Tags kennzeichnen. Suchmaschinen bewerten das positiv.

  • Webdesign Bremen

    Ich muß dem Admin da zustimmen. Das Teaser-Beispiel zeigt z.B. eine richtige Anwendung. Anders ist es bei einem Ausgegeben Artikel, also der, der nach dem Klick auf die Überschrift kommt – dort hat ein Link auf der Überschrift nichts mehr zu suchen.
    Es wäre ein Fehler keinen Link in den Überschriften zu benutzen, klar SEO technisch, aber vor allen Dingen leidet das schnelle Surfen, die Usability.

  • letsgetvip

    Im Endeffekt entscheidet der Doctype wo was zu stehen hat.
    Es ist also keine Ansichtssache :)

  • webspring

    Mein vorredner hat vollkommen Recht. Nichts desto weniger trotz, erst Block, dann inline. Alternativ noch zusätzlich das inlineobjekt mittels Stylesheet als Block deklarieren, damit die usability Optimiert wird.

  • PHP-Friends

    Würde auch gerne mal wissen, was HTML5 daran verändert? Revolution?

  • barrierefreies Webdesign

    Wenn die Überschrift als Anker benutzt wird, kann die Frage auch gestellt werden. – aber -
    Schicke ich meine Seiten durch einen Validator, dann erledigen sich die Fragen schon von selbst.

  • Formwandler

    nicht zu vergessen bei der Thematik der Spagat zwischen Validierung und dem guten Ton und dem absoluten “dem Kunden-wunsch”

  • Dominik

    Danke. Solche Beiträge schaden nie. Auch wenn es mehr als simpel ist. Ich habe – zum eigenen Erschrecken – selbst vor kurzem darüber nach gedacht.

  • Karl-Heinz Weidlinger

    Bei meiner letzten Änderung auf einer Webseite, die ich noch auf Basis von ASP selber programmiert habe, ist mir genau ein solcher Fehler unterlaufen, da habe ich die Reihenfolge von In und Out nicht beachtet und doch glatt einen Bug produziert. Leider bin ich selber erst gar nicht dahinter gekommen, da der Firefox diesen Fehler ganz einfach ignoriert hat und alles normal gemacht hat. Als der Kunde dann angerufen hat und sagte er kann da nichts anklicken, habe ich die Seite mit dem IE getestet und siehe da, der zeigte wirklich den Link nicht an.
    Sofort nach tauschen der beiden Befehle lief es auf beiden Browsern wie gewünscht.

    Allen Lesern wünsche ich einen guten Rutsch, Gesundheit und Erfolg im 2010.

    Karl-Heinz Weidlinger

  • Klaus Kilfitt

    Danke für den Tipp, jetzt weiß ich, wie es geht ;-)

  • typo3agentur

    Klasse – hatte mal ein ähnliches Problemchen. Habe gerätzelt und geknobelt. Danke für den Tip, werde mir die Lektion zu Herzen nehmen ;-)

  • BCP-Design

    Ich sehe nicht wirklich den Sinn darin, eine Überschrift zu verlinken. Zumindest nicht in sehr vielen Fällen…

  • my-webdesigner.com

    In HTML5 ist das Regelwerk dahingehend geändert worden, dass A-Tags auch Blockelemente umschließen dürfen.
    http://dev.w3.org/html5/spec/Overview.html#the-a-element

    Grüße aus Wien

  • ff-webdesigner

    Jeder gute Webdesign-Editor macht das eh richtig, geht gar nicht andersrum…siehe Dreamweaver.

  • Webdesign Mannheim

    Ich mach’s verlasse mich zwar nicht auf einen Editor, nichtmal auf meinen Dreamweaver, ist aber von der Logik her klar, dass A in H stehen muss.

  • Elroy

    Sehe ich auch so.
    Das A muss im H stehen, aleine schon wegen der Sematntik.

  • Webdesign St. Pölten

    Richtig, ein Muss für einen reinen Code!

  • Webdesign CMS

    Für einen professionellen Internetauftritt mit kompatiblem Webdesign, auch basierend auf einem CMS, kann ich dem nur zustimmen.

  • Kurt Schnabel

    Webdesign Hamburg bietet in dem Bereich natürlich sehr viele Möglichkeiten. Gerade mit einem CMS das vor allem auch den heutigen SEO Standarts beinhaltet.

  • Valentin

    Natürlich sollten Überschriften verlinkt sein – sowohl aus Benutzerfreundlichkeit und SEO-Sicht.

  • Simlink

    Vielen Dank für die Tipps.

  • Marcel

    Wegen der Kaskade muss das a-Element innerhalb des h1-Elements stehen. Bei einer Grafik, die als link benutzt wird, steht das img-tag innerhalb des a-Tags.

  • weblarus

    Aus Sicht der Benutzerfreundlichkeit sollten Überschriften durchaus verlinkt sein. Kommt aber natürlich immer auf die Gestaltung der Seite an. Wenn man Überschriften verlinkt, sollte wie beschrieben immer erst der H und dann der A kommen.

  • Patrick

    Ich denke, Überschriften zu verlinken macht hauptsächlich in Blogs sinn, denn diese Links führen ja zur Komplett-Ansicht des entsprechenden Artikels. Dagegen sind verlinkte Überschriften (bis auf das Logo) in statischen Seiten meistens unnötig. Aus SEO-Sicht ist es jedoch sicherlich nicht von Nachteil.

  • Julian

    Gut zu wissen! Man über Webdesigns und HTML nie genug lernen!

  • Claas @ McHomepage

    In vielen Blogs werden Überschriften verlinkt. Mittlerweile haben sich viele User daran gewöhnt und möchten es nicht mehr missen…

  • Webdesign Köln

    Letztendlich kommt es auch darauf an, WARUM man eine Überschrift verlinken möchte. Soll für den Besucher ein Mehrwert geschaffen werden, indem er via Überschrift zu einem vernünftigen Topic gelangt? Oder – und das ist immer häufiger zu beobachten – geht es primär um SEO und darum, möglichst viele Cross-Links zu setzen?

    Was nützt es, dass Besucher “gerne auf Überschriften klicken”, wenn sie dann nicht auch zu einem für sie interessantem Thema gelangen? Wenig – die aktuelle Site wird dann nämlich recht schnell wieder geschlossen.

Einen Kommentar schreiben