Von Suchmaschinen gern gesehen aber meist leider viel zu selten verwendet sind die Überschriften H1-H6. Diese Überschriften signalisieren Suchmaschinen und vor allem auch den Benutzern die Zugehörigkeit der jeweiligen Texte. Generell solltet ihr euch merken das die Überschriften einer gewissen Rangfolge unterliegen, wobei H1 die wichtigste Überschrift ist und sich bis H6 in Überschriften mit abnehmender Priorität unterordnen. Also solltet ihr das Hauptthema eurer Seite in H1 setzen und die Unterthemen dem entsprechend gliedern. Scheut euch nicht diese Überschriften effektiv einzusetzen.

Der häufigste Grund warum die Überschriften nicht verwendet werden ist, weil bei diesen die Schriftgrößen schon vorgegeben sind. Aber keine Sorge diese kann man noch umdefinieren.  Dazu erstellt ihr in eurem Stylesheet einfach ein Element wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

h1
{
  font:15px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h2
{
  font:14px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h3
{
  font:13px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h4
{
  font:12px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h5
{
  font:11px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h6
{
  font:10px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}

Ich rate euch mit absteigender wertigkeit der Überschriften auch die Textgrößen zu verringern, dies dient den Usern dazu die Unterthemen eurer Texte zu erkennen und eventuell zu den relevanten Texten zu springen ohne den vielleicht unnötigen Vorspann lesen zu müssen.

Id´s und Klassen, sind in CSS nicht nur für Div-container zu gebrauchen, ihr könnt im Prinzip nahezu alles mit einer Klasse versehen, was natürlich eingige Vorteile für euer Projekt bringen kann, so müsst ihr für einzelne Bilder die Ihre im Prinzip gleich gestallten wollt nicht unbedingt extra dafür gedachte Div-Container erstellen, sondern könnt diese Bilder mittels einer Klasse direkt ansteuern.

Im Prinzip macht ihr hierbei nichts anders als bei den Div-Containern, so fügt ihr bei einem Bild einfach nach Abschluss des “src” Elementes noch ein “class” oder “Id” Element hinzu und schön könnt ihr die Bilder direkt ansteuern. Dieser Vorgang funktioniert im übrigen auch mit den Überschriften H1 – H6, wodruch ihr auf ebenfalls nutzlose Div-Container aus eurem Quellcode entfernen könnt, was euch einiges an Quellcode in der HTML Datei ersparrt und dazu nur wenig Platz in eurem Stylesheet erfordert.

Ihr solltet euch also stets bei einem Projekt überlegen, ob ihr Formatierungen für Bilder zum Beispiel, auf einer Homepage mehrfach verwenden möchtet, so zum Beispiel in einer Bildergalerie.