Verwendung des HTML-H-Titel-Tags

Was ist ein H- Tag?

W3C gibt an, dass Überschriften durch die Tags h1-h6 definiert werden. h1 definiert die größte Überschrift. h6 definiert die kleinste Überschrift.

h1, h2, h3, h4, h5, h6 als Titel-Tags, in absteigender Reihenfolge nach Wichtigkeit. Ich denke, dass es notwendig ist, diesem Prinzip zu folgen. Dadurch kann die hierarchische Beziehung der Seite klarer werden, Suchmaschinen können den thematischen Inhalt der Seite besser crawlen und analysieren usw. Zum besseren Verständnis schauen Sie sich bitte den folgenden Code an:

 < Textkörper >
   < h1 > Titel der ersten Ebene </ h1 >
   < p > Absatz </ p >
   <div>​
      < h2 > Zweittitel </ h2 >
      < p > … </ p >
      <div>​
         < h3 > Überschrift der Ebene 3 </ h3 >
         < p > … </ p >
         <div>​
            < h4 > Überschrift der Ebene 4 </ h4 >
            < p > … </ p >
         </div>​
      </div>​
   </div>​
</ Körper >

Auch die Standard-Stile der Browser verlieren an Bedeutung: Die Schriftgröße verringert sich von h1 auf h6. Die Stile in verschiedenen Browsern unterscheiden sich leicht. Aufgrund dieser Unterschiede verwenden wir normalerweise CSS, um sie im Layout zu vereinheitlichen.

Wie benutzt man es?

Heutzutage verwenden viele Websites (darunter Taobao, Sina, Sohu und andere bekannte Websites) gerne h1 in ihren Logos, wie in der Abbildung dargestellt:

Es ist sinnvoll, dass jeder es auf diese Weise verwendet, und es hat tatsächlich viele Vorteile: Es fasst den Inhalt der gesamten Seite zusammen, und das LOGO befindet sich sehr nah am Textkörper, was es Suchmaschinen erleichtert, das Thema so schnell wie möglich zu crawlen. Es ist auch in Bezug auf die Semantik genauer.

Natürlich verwenden nicht alle Websites h1 in ihren Logos. Die Verwendung von NetEase ist ein spezielles Beispiel:

NetEase setzt den Stil display:none für h1, um es auszublenden. Dies löst nicht nur das Problem, nicht zu wissen, wo h1 platziert werden soll, sondern spielt auch eine Rolle bei der SEO-Optimierung und schlägt zwei Fliegen mit einer Klappe.

Die h1-Seite der Homepage von Tencent enthält die Schlagzeilen, wie im Bild gezeigt:

Aus den obigen Beispielen können wir erkennen, dass die Verwendung von h1 auf verschiedenen Websites unterschiedlich ist. Wo sollte h1 also platziert werden? Das ist immer eine kontroverse Frage, aber ich glaube nicht, dass es eine eindeutige Antwort auf die Frage gibt, wo man es hinstellen soll. Ich denke, es sollte umfassend und auf der Grundlage von Faktoren wie der Positionierung und Art der Webseite sowie den Suchgewohnheiten der Benutzer betrachtet werden. Beispielsweise können Sie bei einer Nachrichten-Website h1 auf die Überschriften setzen, bei einer umfassenden Portal-Website h1 auf das LOGO. Wenn es sich um eine Unternehmenswebsite handelt, können Sie h1 auch auf das LOGO setzen, da Benutzer bei der Suche nach einem Unternehmen im Allgemeinen gerne nach dem Unternehmensnamen suchen. Wenn es einen Website-Slogan gibt, können Sie h1 auch auf den Slogan setzen, was ebenfalls eine gute Wahl ist. Kurz gesagt: Wählen Sie am besten das aus, was am besten zu Ihnen passt.

Was h2 betrifft, verwende ich es im Allgemeinen gerne in der großen Spalte der Homepage, wie in der Abbildung gezeigt:

Für Inhaltsseiten verwende ich am liebsten h2 für Artikeltitel und h3 für Spaltentitel, wie in der Abbildung gezeigt:

h3 wird hauptsächlich für Spaltentitel verwendet, wie in der Abbildung gezeigt:

Das auf der Homepage des Nongxintong-Produkts verwendete H-Tag weist nicht nur eine klare hierarchische Beziehung auf, sondern unterstreicht auch die Bedeutung des Produktinhalts, was auch für Suchmaschinen sehr vorteilhaft ist.

Sehr interessant ist auch folgendes Beispiel, wie die Abbildung zeigt:

Der Spaltentitel verwendet h2 und der Nachrichtentitel verwendet h1. Wenn wir über die hierarchische Beziehung sprechen, ist ihre Reihenfolge umgekehrt, aber das ist nicht falsch. Wenn wir das H-Tag tatsächlich verwenden, können wir es auch entsprechend der Wichtigkeit des Inhalts definieren. Daher kann die Wirkung nur maximiert werden, wenn man die grundlegende Theorie beherrscht und sie flexibel anwendet.

Aus den obigen Beispielen ist nicht schwer zu erkennen, dass die Verwendung von H-Tags sehr flexibel ist und nicht auf diese wenigen Verwendungen beschränkt ist. Wir müssen bei ihrer Verwendung lediglich dem Prinzip der abnehmenden Wichtigkeit folgen. Gleiches gilt für h4-h6.

Fassen Sie einige

Basierend auf dem Verständnis und der Anwendung von H-Tags durch Referenzmaterialien, Front-End-Produktionsexperten, bekannte Websites usw. habe ich die folgenden Spezifikationen zusammengefasst, in der Hoffnung, jedem einen Referenzwert zu bieten.

Titel der H1-Ebene

Es stellt das Wichtigste dar und seine Position auf der Seite ist genauso wichtig wie die der Schlüsselwörter. Es wird normalerweise in Websitetiteln oder Überschriften verwendet. Einige große Websites verwenden es auch in ihren Logos. Obwohl mehrere h1-Codes geschrieben werden können, sind sie tatsächlich semantisch eindeutig. Am besten ist es, wenn der h1-Titel nur einmal oder überhaupt nicht auf einer Seite erscheint.

h2 Zweittitel

Es erscheint hauptsächlich in den Artikeltiteln und Spaltentiteln des Hauptinhalts der Seite. Die dreispaltige Struktur befindet sich im Allgemeinen in der Mitte und die zweispaltige Struktur im Allgemeinen auf der wichtigen Seite. Kann mit h3 verwendet werden.

h3 Überschrift der Ebene 3

Normalerweise die Seitenleiste der Hauptseite. h4 ist sein Hilfsverb und kommt nicht häufig vor.

Die Seitenhierarchie darf nicht zu tief sein, daher kommen h4, h5 und h6 im Allgemeinen seltener vor.