Überschriften sind auf den meisten Webseiten üblich. In der Tat hat so ziemlich jedes Textdokument mindestens eine Überschrift, so dass Sie wissen, was Sie lesen. Diese Überschriften werden mit den HTML-Überschriftenelementen - h1, h2, h3, h4, h5 und h6 - codiert.
Auf einigen Websites stellen Sie möglicherweise fest, dass Überschriften ohne diese Elemente codiert werden. Stattdessen können Überschriften Absätze mit bestimmten hinzugefügten Klassenattributen oder Unterteilungen mit Klassenelementen verwenden. Der Grund, warum ich oft von dieser falschen Praxis erfahre, ist, dass der Designer "das Aussehen von Überschriften nicht mag". Standardmäßig werden Überschriften fett dargestellt. Sie sind größer, insbesondere die Elemente h1 und h2, die eine viel größere Schriftgröße aufweisen als der übrige Text einer Seite. Denken Sie daran, dass dies nur das Standardaussehen dieser Elemente ist! Mit CSS können Sie die Überschrift nach Ihren Wünschen gestalten! Sie können die Schriftgröße ändern, Fettdruck entfernen und vieles mehr. Überschriften sind die richtige Methode, um die Überschriften einer Seite zu kodieren. Hier sind einige Gründe warum.
Warum sollten Sie Überschriften-Tags anstelle von DIVs und Styling verwenden?
Suchmaschinen wie Überschriften
Dies ist der beste Grund, Überschriften zu verwenden und sie in der richtigen Reihenfolge zu verwenden (dh h1, dann h2, dann h3 usw.). Suchmaschinen geben Text, der in Überschriften-Tags enthalten ist, die höchste Gewichtung ein, da dieser Text einen semantischen Wert hat. Mit anderen Worten: Indem Sie den Seitentitel H1 benennen, teilen Sie der Suchmaschinenspinne mit, dass dies der Fokus # 1 der Seite ist. H2-Überschriften haben den Schwerpunkt # 2 und so weiter.
Sie müssen sich nicht daran erinnern, welche Klassen Sie verwendet haben, um Ihre Schlagzeilen zu definieren
Wenn Sie wissen, dass alle Ihre Webseiten eine H1 haben, die fett, 2em und gelb ist, können Sie dies einmal in Ihrem Stylesheet definieren und fertig sein. Wenn Sie eine weitere Seite hinzufügen, fügen Sie sechs Monate später ein H1-Tag oben auf der Seite hinzu. Sie müssen nicht zu anderen Seiten zurückkehren, um herauszufinden, mit welcher Stil-ID oder Klasse Sie die Hauptansicht definieren Schlagzeile und Unterköpfe.
Sie bieten eine starke Seitenübersicht
Umrisse machen den Text leichter lesbar. Deshalb haben die meisten amerikanischen Schulen den Schülern beigebracht, eine Gliederung zu schreiben, bevor sie das Papier schreiben. Wenn Sie Überschriften-Tags in einem Gliederungsformat verwenden, hat Ihr Text eine klare Struktur, die sehr schnell sichtbar wird. Darüber hinaus gibt es Tools, mit denen Sie die Seitengliederung überprüfen können, um eine Zusammenfassung bereitzustellen, und diese sind auf Überschriften-Tags für die Gliederungsstruktur angewiesen.
Ihre Seite wird auch bei deaktivierten Styles sinnvoll sein
Nicht jeder kann Stylesheets anzeigen oder verwenden (und dies führt zurück zu Nr. 1 - Suchmaschinen zeigen den Inhalt (Text) Ihrer Seite an, nicht die Stylesheets). Wenn Sie Überschriften-Tags verwenden, machen Sie Ihre Seiten leichter zugänglich, da die Überschriften Informationen enthalten, die ein DIV-Tag nicht bieten würde.
Es ist hilfreich für Bildschirmleser und Website-Zugänglichkeit
Durch die richtige Verwendung von Überschriften wird eine logische Struktur für ein Dokument erstellt. Dies ist, was Bildschirmleser verwenden, um eine Website einem Benutzer mit Sehbehinderung zu "lesen", wodurch Ihre Website für Menschen mit Behinderungen zugänglich ist.
Gestalten Sie den Text und die Schriftart Ihrer Schlagzeilen
Der einfachste Weg, um vom "großen, kühnen und hässlichen" Problem der Überschriften-Tags abzuweichen, besteht darin, den Text so zu gestalten, wie er aussehen soll. Wenn Sie an einer neuen Website arbeiten, sollten Sie die Stile für Absatz, h1, h2 und h3 zuerst schreiben. Bleiben Sie bei der Schriftfamilie und Größe / Gewicht. Dies könnte 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 Schriftarten Ihrer Überschrift ändern oder den Textstil oder sogar die Textfarbe ändern. All dies wird Ihre "hässliche" Schlagzeile in etwas Lebendigeres verwandeln, das Ihrem Design entspricht.
Grenzen können Schlagzeilen verschönern
Rahmen sind eine großartige Möglichkeit, Ihre Schlagzeilen zu verbessern, und lassen sich leicht hinzufügen. Aber vergessen Sie nicht, mit den Grenzen zu experimentieren - Sie brauchen auf beiden Seiten Ihrer Überschrift keinen Rand. Und Sie können mehr als nur langweilige Grenzen verwenden.
Ich fügte meiner Beispielüberschrift einen oberen und einen unteren Rand hinzu, um einige interessante visuelle Stile einzuführen. Sie können Ränder auf beliebige Weise hinzufügen, um den gewünschten Designstil zu erreichen.
Fügen Sie Ihren Schlagzeilen Hintergrundbilder für noch mehr Pizazz hinzu
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 muss nicht sein. Wenn die Grafik nur dazu dient, die Überschrift zu dekorieren, dann fügen Sie sie den Überschriftenstilen hinzu.
Der Trick für diese Überschrift ist, dass ich weiß, dass mein Bild 90 Pixel groß ist. Also fügte ich der Schlagzeile von 90px eine Auffüllung hinzu (Auffüllung: 0,5 0) 90px 0p;). Sie können mit den Rändern, der Zeilenhöhe und dem Abstand spielen, um den Text der Überschrift genau dort anzuzeigen, wo Sie ihn haben möchten.
Bei der Verwendung von Bildern ist zu beachten, dass Ihre Überschrift nicht immer dieselbe Größe hat, wenn Sie über eine responsive Website verfügen (die Sie sollten), deren Layout sich je nach Bildschirmgröße und Gerät ändert. Wenn Sie eine exakte Größe für Ihre Überschrift benötigen, kann dies zu Problemen führen. Dies ist einer der Gründe, warum ich generell Hintergrundbilder in einer Überschrift meide, so cool, wie sie manchmal aussehen können.
Bildersetzung in den 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 wahrlich eine antiquierte Praxis von Webdesignern, die nur über wenige Schriftarten verfügten und in ihrer Arbeit exotischere Schriftarten verwenden wollten. Das Aufkommen von Webfonts hat die Art und Weise verändert, wie Designer Websites ansprechen. Schlagzeilen können jetzt in einer Vielzahl von Schriftarten gesetzt werden, und Bilder mit eingebetteten Schriftarten werden nicht mehr benötigt. Daher können Sie CSS-Bilder nur für Schlagzeilen auf älteren Websites ersetzen, die noch nicht auf modernere Methoden aktualisiert wurden.
Bearbeitet von Jeremy Girard am 06.09.17
