Methode 1: Macht es Sinn?
<span class="heading">Artikeltitel</span>
Obwohl <span> in manchen Situationen ein praktisches Tag sein kann, vermittelt es nicht die volle Bedeutung des Titels. Ein Vorteil dieser Methode besteht darin, dass wir ihr eine CSS-Regel hinzufügen und ihr eine Überschriftenklasse zuweisen können, damit ihr Text wie ein Titel aussieht.
.Überschrift {
Schriftgröße: 24px;
Schriftstärke: fett;
Farbe: blau;
}
OK, jetzt sind alle Überschriften mit der Überschriftenklasse in großer Fettschrift und in Blau gekennzeichnet. wunderbar! Aber ist das das Richtige? Was passiert, wenn jemand es mit einem Browser anzeigt, der CSS nicht unterstützt?
Was passiert beispielsweise, wenn die Regeln des von uns festgelegten externen Stylesheets von älteren Browserversionen nicht unterstützt werden? Oder was ist, wenn jemand mit Sehbehinderung einen Screenreader verwendet, um diese Seite zu lesen? Was ein Besucher auf diese Weise sieht (oder hört), sollte sich nicht vom normalen Text auf der Seite unterscheiden.
Obwohl class="heading" dem Tag eine kleine Bedeutung verleiht, ist <span> immer noch nur ein gewöhnlicher Tag, der durch den Standardstil der meisten Browser geändert werden kann.
Suchmaschinen ignorieren das <span>-Tag beim Crawlen dieser Seite, als ob es nicht existierte, und schenken den möglicherweise darin enthaltenen Schlüsselwörtern keine besondere Aufmerksamkeit. Wir werden später mehr über die Beziehung zwischen Suchmaschinen und Titeln sprechen.
Da es sich bei dem <span>-Tag schließlich um ein Inline-Element handelt, müssen wir es möglicherweise in einem zusätzlichen Element auf Blockebene verschachteln, z. B. einem <p>-Tag oder einem <div>-Tag, damit es eine separate Zeile bildet , wodurch Ihre Tags noch mehr mit unnötigem Code überladen werden. Diese zusätzlichen Tags sind notwendig, damit Browser, die kein CSS unterstützen, denselben Text anzeigen können.
Methode 2: Kombination von <p> und <b>
<p><b>Artikeltitel</b></p>
Durch die Verwendung eines Absatz-Tags erhalten wir eine Anzeige auf Blockebene, und <b> macht den Text fett. Aber wenn wir diese Methode zum Markieren eines wichtigen Titels verwenden, werden wir mit den gleichen bedeutungslosen Ergebnissen konfrontiert.
Im Gegensatz zu Methode A kann das <b>-Tag Text in visuellen Browsern fett formatieren – sogar in Browsern, die CSS nicht unterstützen. Aber wie beim <span>-Tag geben Suchmaschinen keine höhere Priorität, nur weil etwas in einem Absatz fett gedruckt ist.
Schwierig zu stylen
Die Verwendung der gewöhnlichen Kombination von <p> und <b> bringt noch einen weiteren Nachteil mit sich: Es ist unmöglich, diesen Titel so zu gestalten, dass er sich von anderen Absätzen unterscheidet. Möglicherweise möchten wir einen speziellen Stil zum Hervorheben des Titels verwenden, um den Seiteninhalt klarer und strukturierter zu gestalten. Diese Methode kann ihn jedoch nur fett erscheinen lassen.
Methode 3: Stil plus Substanz
<h1>Artikeltitel</h1>
Was für eine tolle Titeldefinition. Die meisten Webdesigner sind damit vertraut. Tatsächlich kann <Hn> bei richtiger Verwendung eine flexible, indizierbare und stilisierbare Struktur für Seiteninhalte bereitstellen.
Dies ist auch eine clevere Art, es zu definieren, und Sie werden feststellen, dass es ziemlich einfach ist. Es werden keine zusätzlichen Tags mehr benötigt, und man könnte argumentieren, dass dies nur ein kleines bisschen mehr Bytes einspart als die anderen beiden Methoden, was vernachlässigbar ist, aber eine Einsparung zählt.
<h1> bis <h6> stellen sechs Überschriftenebenen dar, von der wichtigsten (<h1>) bis zur unwichtigsten (<h6>). Sie sind selbst auf Blockebene und erfordern nicht das Hinzufügen weiterer Elemente, um sie einzeln anzuordnen. Einfach, effektiv – einfach ein tolles Tool.
Passen Sie Stile ganz einfach an
Da wir das <h1>-Tag eindeutig verwenden und das <b>- oder <p>-Tag besser für die Verwendung auf der gesamten Seite geeignet ist, können wir verschiedene CSS-Methoden verwenden, um es zu formatieren.
Darüber hinaus kann ein Titel-Tag einen Titel deutlich kennzeichnen, auch ohne dass ein Styling erforderlich ist! Visuelle Browser zeigen <h1> in einer größeren Fettschrift an. Auf einer nicht formatierten Seite wird die Dokumentstruktur wie erwartet angezeigt, mit entsprechenden Überschriften-Tags, um die Bedeutung zu vermitteln.
Bildschirmlesegeräte, PDAs, Mobiltelefone sowie visuelle und nicht-visuelle Browser wissen alle, was zu tun ist, wenn sie auf ein Titel-Tag stoßen, richtig damit umgehen und es ernster nehmen als normalen Text auf der Seite. Mit dem <span>-Tag wird es von Browsern, die CSS nicht unterstützen, nicht besonders behandelt.
Ärgerliche Standardstile
In der Vergangenheit hätten Designer die Verwendung von Title-Tags möglicherweise gänzlich vermieden, weil die Browser-Standardeinstellungen so hässlich waren. Oder vermeiden Sie die Verwendung von <h1> oder <h2> aufgrund ihrer großen Standardgrößen und verwenden Sie stattdessen Überschriften-Tags mit höherer Nummer, um kleinere Größen zu erreichen.
Es ist jedoch wichtig zu betonen, dass wir diese Titel-Tags mithilfe von CSS problemlos ändern können – beispielsweise muss ein < ;h1> kein riesiges Tag sein, das die Hälfte des Bildschirms einnimmt. Später werde ich zeigen, wie einfach es ist, Titel-Tags mit CSS zu formatieren, und Ihnen hoffentlich einige Ihrer überwältigenden Ängste nehmen.
suchmaschinenfreundlich
Das ist ein großer Vorteil. Suchmaschinen lieben Title-Tags. Andererseits bedeutet ein <span>-Tag oder ein normaler fetter Absatz-Tag etwas weniger. Die entsprechende Kennzeichnung Ihrer Titel mit <h1> bis <h6> erfordert nur wenig Aufwand Ihrerseits, erleichtert aber das Crawlen Ihrer Seiten durch Suchmaschinen, sodass die Leute sie letztendlich finden können.
Suchmaschinen-Bots legen besonderen Wert auf Titel-Tags – hier können Sie einige Schlüsselwörter einfügen. Genauso wie <title> und <meta> abgerufen werden, durchsuchen sie die Seite entlang des Title-Tags. Wenn Sie diese Tags nicht verwenden, werden die darin enthaltenen Schlüsselwörter nicht als wertvoll erachtet und ignoriert.
Mit ein wenig Aufwand können Sie also die Wahrscheinlichkeit erhöhen, dass Nutzer Ihre Website aufgrund des Inhalts Ihrer Seite finden. Hört sich gut an, nicht wahr?
Über die Reihenfolge der Titel
Im Beispiel ist dieser bestimmte Titel der wichtigste auf der Seite, da es sich um den Titel des Dokuments handelt. Daher verwenden wir den wichtigsten Title-Tag, <h1>. In Anlehnung an die W3C-Spezifikation halten einige Leute das Überspringen mehrerer Überschriftenebenen für eine schlechte Praxis. Stellen Sie sich zum Beispiel vor, wir befinden uns auf der folgenden Seite:
<h1>Artikeltitel</h1>
Unsere nächste Überschrift (sofern sie nicht mit einem weiteren <h1> wiederholt wird) wäre <h2>, dann <h3> usw. Sie sollten nach <h1> wahrscheinlich nicht eine Ebene überspringen und direkt zu <h3> übergehen. Ich stimme dem oben genannten Standpunkt eher zu und behalte die Kontinuität der Ebenen entlang des Textes bei, um eine Layoutstruktur aufzubauen. Auf diese Weise ist es einfacher, Titel und Stile zu einer bereits vorhandenen Seite hinzuzufügen, und Sie reduzieren Fehler, die durch die Verwendung zusätzlicher Nummern entstehen.
Wie bereits erwähnt, verwenden Designer möglicherweise <h4>, um die wichtigste Überschrift auf einer Seite zu kennzeichnen, einfach weil die Standardschriftgröße nicht so unangenehm groß ist wie <h1>. Aber denken Sie daran: Zuerst Struktur, dann Design. Wir können CSS jederzeit verwenden, um Überschriften in jeder gewünschten Textgröße zu formatieren.