Eine semantisch korrekte Web-Visitenkarte mit CSS erstellen

Die Semantik (die Lehre der Bedeutung von - nicht nur sprachlichen - Zeichen, Wörtern, Sätzen oder Texten) wird im Web immer wichtiger. Denn die Suchmaschinen oder andere Computer versuchen immer stärker vom maschinenlesbaren Inhalt logische Rückschlüsse auf die Bedeutung des Inhaltes zu ziehen. Damit können diese Programme dem Anwender bessere, genauere oder auch nur logischere Suchresultate präsentieren.

Natürlich müssen wir die Maschinen dabei unterstützen. Und das geht am Besten, wenn wir unsere HTML/CSS-Daten semantisch richtig auszeichnen. Wir haben das schon weiter oben einmal gemacht. Aber diesmal werden wir eine Adresse (besser die Daten einer Visitenkarte) semantisch richtig schreiben und auch gleichzeitig formatieren. In der Fachsprache nennen wir diese Art der Auszeichnung auch Mikroformate, die für verschiedene Arten von Daten existieren.

Der ganze Trick bei dieser Art der Formatierung ist das Kernattribut class bei den einzelnen Tags. Hier sind verschiedene Klassennamen vorgeschrieben, damit es als Mikroformat gültig wird. Schauen wir uns zum besseren Verständnis eine Visitenkarte einer Webagentur in der Praxis an..

Wir beginnen mit der Visitenkarte selbst. Hier versuchen wir die Visitenkarten-Metapher so gut wie möglich in den Browser zu übertragen.

/* Visitenkarte */
div.vcard {
width: 500px;
height: 280px;
background: #84CBDB url(../images/guru_r.png) 15px 10px
no-repeat;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
div.vcard address {
padding: 30px 20px 30px 100px;
color: #687221;
font-family: Verdana, "MS Sans Serif", sans-serif;
font-weight: normal;
font-style: normal;
font-size: .8em;
}
...

Damit nicht der gesamte Text entlang einer Fluchtlinie ausgerichtet ist, definieren wir alle Tags mit einem linken Abstand von 120 Pixeln. Nur der Organisationsname hat einen Abstand von 50 Pixeln. Für den Firmennamen verwenden wir aber die Eigenschaft padding. Denn durch das Box-Modell können wir jetzt am unteren Rand des Elements eine Linie ziehen, die länger als der Name ist.

Ein kleiner Trick ist in der Definition von address .fn und .tel versteckt. Denn die Werte für margin werden von den meisten Browsern nur bei Blockelementen erkannt. Daher verwenden wir hier die Eigenschaft display: inline-block. Damit wird das Element zwar als Block angezeigt, aber innerhalb des Textes. Somit erzeugt der Browser keinen Umbruch vor und/oder nach dem Element.

Als letzten Schritt machen wir uns das Leben noch ein wenig leichter. Wir nutzen das Pseudoelement :before. Da wir nicht bei allen Daten die Bezeichnung in HTML schreiben wollen, können wir es auch mit CSS erledigen.

...
address .cell:before {
content: "mobile: ";
}
address .email:before {
content: "eMail: ";
}
address .url:before {
content: "web: ";
}
...

Ganzen Artikel lesen...