Überschriften sind auf den meisten Webseiten üblich. Tatsächlich neigt so ziemlich jedes Textdokument dazu, mindestens eine Überschrift zu haben, damit Sie den Titel dessen kennen, was Sie lesen. Diese Schlagzeilen werden mit dem HTML Überschriftenelemente — h1, h2, h3, h4, h5 und h6.
Auf einigen Websites werden Überschriften möglicherweise ohne diese Elemente codiert. Stattdessen können Überschriften Absätze mit bestimmten Klassenattributen oder Divisionen mit Klassenelementen verwenden. Der Grund, warum wir oft von dieser falschen Praxis hören, ist, dass der Designer "das Aussehen der Überschriften nicht mag". Standardmäßig werden Überschriften fett und größer angezeigt, insbesondere die h1- und h2-Elemente, die in einer viel größeren Schriftgröße als der Rest des Seitentexts angezeigt werden. Denken Sie daran, dass dies nur das Standard-Erscheinungsbild dieser Elemente ist! Mit CSS, Sie können die Überschrift so gestalten, wie Sie möchten! Sie können die Schriftgröße ändern, den Fettdruck entfernen und vieles mehr. Überschriften sind die richtige Methode, um die Überschriften einer Seite zu codieren. Hier sind einige Gründe dafür.
Warum Überschriften-Tags statt Divisionen verwenden Use
Dies ist der beste Grund, Überschriften zu verwenden, und zwar in der richtigen Reihenfolge (z. h1, dann h2, dann h3 usw.). Suchmaschinen Geben Sie Text, der in Überschriften-Tags enthalten ist, die höchste Gewichtung, da dieser Text einen semantischen Wert hat. Mit anderen Worten, indem Sie Ihren Seitentitel H1 kennzeichnen, teilen Sie der Suchmaschinenspinne mit, dass dies der Hauptfokus der Seite ist. H2-Überschriften haben die Betonung #2 und so weiter.
Sie müssen sich nicht merken, welche Klassen Sie verwendet haben, um Ihre Schlagzeilen zu definieren
Wenn Sie wissen, dass alle Ihre Webseiten ein H1 haben werden, das fett, 2em und gelb ist, können Sie dies einmal in Ihrem Stylesheet definieren und fertig. 6 Monate später, wenn Sie eine weitere Seite hinzufügen, fügen Sie einfach ein H1-Tag oben auf Ihrer Seite hinzu, das Sie nicht haben, um zu anderen Seiten zurückzukehren, um herauszufinden, welche Stil-ID oder Klasse Sie verwendet haben, um die Hauptüberschrift und die Unterüberschriften zu definieren.
Bieten Sie einen starken Seitenumriss
Konturen erleichtern das Lesen von Text. Aus diesem Grund haben die meisten US-Schulen den Schülern beigebracht, eine Gliederung zu schreiben, bevor sie die Arbeit schreiben. Wenn Sie Überschriften-Tags im Gliederungsformat verwenden, hat Ihr Text eine klare Struktur, die sehr schnell erkennbar wird. Darüber hinaus gibt es Tools, die die Seitengliederung überprüfen können, um eine Zusammenfassung bereitzustellen, und diese basieren auf Überschriften-Tags für die Gliederungsstruktur.
Ihre Seite macht auch bei deaktivierten Stilen Sinn
Nicht jeder kann Stylesheets anzeigen oder verwenden (und das kommt zurück zu #1 – Suchmaschinen sehen den Inhalt (Text) Ihrer Seite, nicht die Stylesheets). Wenn Sie Überschriften-Tags verwenden, machen Sie Ihre Seiten zugänglicher, da die Überschriften Informationen enthalten, die a DIV-Tag würde nicht.
Es ist hilfreich für Screenreader und die Barrierefreiheit von Websites
Die richtige Verwendung von Überschriften erstellt eine logische Struktur für ein Dokument. Dies ist, was Screenreader verwenden, um einem Benutzer mit Sehbehinderung eine Website vorzulesen und Ihre Website für Menschen mit Behinderungen zugänglich zu machen.
Gestalten Sie den Text und die Schriftart Ihrer Schlagzeilen
Der einfachste Weg, sich von dem "großen, fetten und hässlichen" Problem der Überschriften-Tags zu lösen, besteht darin, den Text so zu gestalten, wie er aussehen soll. Tatsächlich ist es bei der Arbeit an einer neuen Website am besten, als Erstes die Stile Absatz, h1, h2 und h3 zu schreiben. Bleiben Sie nur bei Schriftfamilie und Größe/Gewicht. Dies kann beispielsweise ein vorläufiges Stylesheet für eine neue Site sein (dies sind nur einige Beispielstile, die verwendet werden könnten):
Sie können die ändern Schriftarten Ihrer Überschrift oder ändern Sie den Textstil oder sogar die Textfarbe. All dies wird Ihre "hässliche" Überschrift in etwas Lebendigeres verwandeln und zu Ihrem Design passen.
Grenzen können Schlagzeilen verschönern
Rahmen sind eine großartige Möglichkeit, Ihre Schlagzeilen zu verbessern und sind einfach hinzuzufügen. Aber vergessen Sie nicht, mit den Rändern zu experimentieren – Sie brauchen nicht auf jeder Seite Ihrer Überschrift einen Rand. Und Sie können mehr als nur langweilige Ränder verwenden.
Wir haben unserer Beispielüberschrift einen oberen und unteren Rand hinzugefügt, um einige interessante visuelle Stile einzuführen. Sie können Rahmen beliebig hinzufügen, um den gewünschten Designstil zu erreichen.
Fügen Sie Ihren Schlagzeilen Hintergrundbilder hinzu, um noch mehr Pizazz zu erhalten
Viele Websites haben oben auf der Seite einen Kopfzeilenabschnitt, der eine Überschrift enthält – normalerweise den Site-Titel und eine Grafik. Die meisten Designer betrachten dies als zwei separate Elemente, aber das müssen Sie nicht. Wenn die Grafik nur dazu da ist, die Überschrift zu schmücken, warum fügen Sie sie dann nicht den Überschriftenstilen hinzu?
Der Trick bei dieser Überschrift ist, dass wir wissen, dass unser Bild 90 Pixel groß ist. Also haben wir am unteren Rand der Überschrift von 90px Padding hinzugefügt (Padding: 0.5 0 90px 0p;). Sie können mit den Rändern, der Zeilenhöhe und dem Abstand spielen, damit der Text der Überschrift genau dort angezeigt wird, wo Sie ihn haben möchten.
Beachten Sie bei der Verwendung von Bildern Folgendes: Responsive Website (was Sie sollten) Bei einem Layout, das sich je nach Bildschirmgröße und Gerät ändert, hat Ihre Überschrift nicht immer dieselbe Größe. Wenn Ihre Überschrift eine genaue Größe haben muss, kann dies zu Problemen führen. Dies ist einer der Gründe, warum wir Hintergrundbilder in einer Überschrift generell vermeiden, so cool sie manchmal aussehen können.
Bildersetzung in Schlagzeilen
Dies ist eine weitere beliebte Technik für Webdesigner, da Sie damit eine grafische Überschrift erstellen und den Text des Überschriften-Tags durch dieses Bild ersetzen können. Dies ist wahrhaftig eine antike Praxis von Webdesignern, die Zugang zu sehr wenigen Schriftarten hatten und exotischere Schriftarten in ihrer Arbeit verwenden wollten. Der Aufstieg von Webfonts hat die Herangehensweise von Designern an Websites wirklich verändert. Überschriften können jetzt in einer Vielzahl von Schriftarten gesetzt werden und Bilder mit diesen eingebetteten Schriftarten werden nicht mehr benötigt. Daher finden Sie auf älteren Websites, die noch nicht auf modernere Praktiken aktualisiert wurden, CSS-Bilder als Ersatz für Schlagzeilen.
Herausgegeben von Jeremy Girard