Articles

HTML-Überschriften: Die vollständige Anleitung zum Hinzufügen von Überschriften für die Dokumentstruktur

Inhaltsüberschriften

Die sechs Überschriften-Tags sind ein wichtiger Bestandteil des Schreibens von HTML-Inhalten. Neben dem etwas offensichtlichen Bedürfnis, das sie erfüllen (die Leute wollen manchmal Schlagzeilen auf die Dinge setzen), haben die Schlagzeilen-Tags auch SEO-Wert, helfen Ihnen, ein organisierter Schriftsteller zu sein und Seiten benutzerfreundlicher zu machen.,

Schlagzeilen-Tags und SEO

Es gibt zwei Dinge, die eine Suchmaschine versucht, über Ihre Seite herauszufinden:

  • Worum geht es?
  • Wie gut ist es?

Im Allgemeinen werden Links zu einer Seite als Maß für die Qualität (wie gut sie ist) verwendet, und die Analyse auf der Seite wird verwendet, um herauszufinden, worum es auf der Seite geht. (Hier gibt es natürlich einige Überschneidungen: Google urteilt über die Qualität einer Seite, indem es sich die Seite ansieht, und versucht auch herauszufinden, worum es auf der Seite geht, indem es sich ansieht, was andere Seiten sagen, wenn sie darauf verlinken.,) Eines der (vielen) Dinge, die Google und andere Suchmaschinen betrachten, um den Inhalt einer Seite zu bestimmen, sind die Wörter, die in Überschriften-Tags angezeigt werden. Wenn Sie versuchen, nach bestimmten Wörtern oder Phrasen zu rangieren, ist es eine gute Idee, diese Wörter und Phrasen in Ihre Schlagzeilen-Tags aufzunehmen.

Mehr organisiertes Schreiben

Wenn Menschen ohne Verwendung von Schlagzeilen-Tags schreiben (z. B. wenn sie von Hand oder in einem visuellen Editor wie MS Word schreiben), schreiben sie oft nur in langen, ungebrochenen Textströmen, die zu lange andauern., Oder, schlimmer noch, sie können visuelle Überschriften hinzufügen (mit Fettdruck, Großbuchstaben, größerem Text oder etwas anderem. Dies ist sehr häufig, da die Leute instinktiv wissen, dass sie Text in kleinere Teile aufteilen sollten. Das Problem dabei ist, dass dann nicht klar ist, wie die verschiedenen Abschnitte miteinander zusammenhängen. Soll der Abschnitt mit 15pt-Schriftart ein Unterabschnitt der Teilüberschriften mit 14pt-Fettschrift sein? Oft weiß es sogar der Schriftsteller nicht, weil sie nicht wirklich darüber nachgedacht haben.,

Schlagzeilen-Tags Erstellen Sie eine Inhaltshierarchie

Auf einer Seite mit einem einzelnen Inhalt (der die meisten Seiten sein sollte) sollte der Haupttitel für diesen Inhalt ein <h1> – Tag sein. Wichtige Abschnitte innerhalb dieses Inhalts sollten mit <h2>überschrieben werden. Unterabschnitte innerhalb dieser Abschnitte sollten mit <h3> usw. versehen sein. Es sollte möglich sein, eine Gliederung aus Ihren Schlagzeilen-Tags zu extrahieren. (Tatsächlich tun wir dies — schauen Sie sich das Inhalts-Widget oben auf der Seite an.,) Diese Struktur macht das schreiben mehr organisiert, welche (mindestens 99%) auch das schreiben besser.

Protip: Viele von uns, die online schreiben, ordnen zuerst die Schlagzeilen zu und füllen dann die Abschnitte aus. Es ist nur altmodische Umrisse, aber es kann sicher viel schneller schreiben gehen und das Endergebnis ist in der Regel viel kohärenter, als wenn Sie gerade an der Spitze begonnen und hoffte, irgendwo zu bekommen, bevor Sie fertig sind.

Überschriften sind gut für Nutzer,

Hier ist ein schmutziges kleines Geheimnis über online-Inhalte: Leser überfliegen. Fast niemand liest jedes Wort eines Online-Artikels., Und Sie können sehr wenig dagegen tun. Sie können es sicherlich nicht aufhalten. Aber Sie können es so machen, dass Skimmer etwas haben, an dem sie sich festhalten können, wenn sich ihre Augen die Seite hinunter bewegen. Schlagzeilen, wenn sie gut verteilt und für ihren Inhalt relevant sind, geben Skimmern eine Reihe kleiner Wege zurück in den Text des Artikels. Sie zerlegen den Artikel auch in scheinbar verdauliche mundgerechte Stücke, so dass ein Antsy Skimmer nicht durch eine lange Solumn ununterbrochenen Textes ängstlich gemacht wird.,

Und vergessen Sie nicht,

Ab HTML5 zu verknüpfen, können Sie auf jedes Element auf einer Seite verlinken, indem Sie ein Hash-Zeichen (#) und die id des Elements anhängen. (In der Vergangenheit konnten Sie nur auf Ankerelemente verlinken.) Durch Hinzufügen einer id zu jeder Überschrift auf Ihrer Seite können Sie Personen erlauben, eine Verknüpfung zu einem beliebigen Ort in Ihrem Dokument herzustellen. (Sehen Sie erneut, wie die Inhaltslinks oben auf der Seite funktionieren.,) Diese In-Dokument-Links können enorm hilfreich sein, insbesondere wenn Sie Referenzinhalte jeglicher Art bereitstellen oder wenn Ihre Artikel besonders lang sind.

Verwenden von Schlagzeilen-Tags zum Strukturieren Ihres Inhalts

Im Allgemeinen gibt es zwei Arten von Inhaltsseiten: einzelne Inhaltsseiten (die einen einzelnen Inhalt darstellen) und Indexseiten (die eine Reihe von Inhalten auflisten). Indexseiten umfassen die Hauptblogseite einer Site, Kategorien-und Tag-Archive, Autorenseiten, auf denen alle vom Autor geschriebenen Artikel aufgeführt sind, usw., Dann gibt es auch Inhalte (Seitenleisten, Widgets, Fußzeilen), die auf fast jeder Seite angezeigt werden und die nicht wirklich „Inhalt“ sind.“Wie Sie in diesen Situationen Schlagzeilen-Tags verwenden, kann sich auf SEO und Benutzerfreundlichkeit auswirken.

<h1> und <h2> Elemente

Auf einzelnen Inhaltsseiten auf Ihrer Website sollte der Titel dieses bestimmten Inhalts fast immer im <h1> – Tag sein.die Spitze der <body>., Wie oben erwähnt, können Ihre Abschnitte innerhalb des Artikels die Tags <h2>.

<main><article> <h1>All About Headlines</h1> . . . <h2>Headlines and SEO</h2> . . . <h2>Headlines and Structure</h2> . . . </article></main> 

Auf einer Indexseite ist es normalerweise sinnvoll, entweder den Site-Titel in ein <h1> – Tag einzufügen oder den Indexnamen dorthin zu setzen: den Kategorienamen, den Autorennamen oder was auch immer diese Seite definiert. Dann sollten die Titel aller einzelnen Stücke, die dort aufgeführt sind, ein <h2> Element für ihre Titel haben.,

In der Vergangenheit war es üblich, ein <h2>-Tag für den Site-Titel zu verwenden, wenn er auf Einzelinhaltsseiten angezeigt wird.

<header> <h2>HTML Code Tutorials</h2> <nav><!-- menu --></nav> </header> <main> <h1>Actual Title of This Page</h1? . . . </main> 

Die Meinungen dazu sind gemischt, aber der Trend wird immer weniger. Mehr Leute platzieren einfach den Titel (und wahrscheinlicher ein Logo-img) in der Kopfzeile und speichern die Schlagzeilen-Tags für bestimmte Inhalte auf der Seite. Ein Teil Ihrer eigenen Überlegung, ob dies zu tun ist, hat wahrscheinlich damit zu tun, wie wichtig der Titel Ihrer eigenen Website in Bezug auf Ihre SEP-Ziele ist.,

Widgets und andere „Nicht-Inhalte“

Bis vor kurzem war es auch üblich, <h3> oder <h4> Elemente für Widget-Titel in Seitenleisten zu verwenden. Viele Content-Management-Systeme tun dies einfach automatisch, sodass es für Sie möglicherweise keine Rolle spielt. Aber es ist etwas, woran Sie vielleicht denken möchten, wenn Sie das Markup Ihrer gesamten Seite von Grund auf neu gestalten. Möchten Sie, dass Ihre Überschriftelemente darauf hindeuten, dass die eigentliche Bedeutung Ihrer Seite „Anmelden“ oder „Für die Mailingliste anmelden“ist?, (Dies wird natürlich teilweise vermieden, indem Sie Ihre Seitenleiste in einem <aside> Element platzieren.)

Adam ist ein technischer Autor, der sich auf Entwicklerdokumentation und Tutorials spezialisiert hat.