Html-Tags - Semantik - logische Textauszeichnung

Da das Lesen am Monitor anstrengender ist als das Lesen eines Buches ist es besonders wichtig eine Webseite gut zu untergliedern und wichtige Passagen deutlich hervorzuheben. Verschiedene html-Tags, beispielsweise Überschriften mit ihren verschiedenen h-Tags, und dazugehörige Attribute sorgen für eine übersichtiche Darstellung der Webseite auf dem Monitor. In Verbindung mit css lassen sich heut die einzelnen html-Tags in einem meist ausgelagerten css-stylesheet formatieren, sodass viele Attribute nicht mehr verwendet werden. Die modernen Browser haben kaum noch Schwierigkeiten mit der Umsetzung von css auch wenn es hin und wieder noch verschiedene Interpretationen einzelner css-Anweisungen in unterschiedlichen Browsern gibt. Alte Browser wie beispielsweise der Netscape 4.5 haben jedoch mit der Umsetzung von css große Schwierigkeiten.

Nachfolgend finden Sie logische (betonte) Anweisungen für die Schriftformatierung - der Browser entscheidet über die Hervorhebung des Textes. Es kann nicht mit Sicherheit gesagt werden, wie die Hervorhebung in den unterschiedlichen Browseren und auf den verschiedenen PC-Systemen am Ende wirklich aussehen wird. Die meisten Elemente sind Inline-Elemente, Blockelemente wurden gekennzeichnet.

Alte Browser können diese Anweisungen möglicherweise nicht darstellen und die Texthervorhebungen werden dort nicht sichtbar, stattdessen wird der so markierte Text als normaler Fließtext dargestellt. Da der Text in den alten Browsern normal lesbar ist spricht nichts dagegen diese logischen Auszeichnungen für die zeitgemäßen Browser der neueren Generation und zur Optimierung Ihrer Webseiten für Suchmaschinen auch zu verwenden. Mit css können auch diese Anweisungen gesteuert werden. Unter Semantik finden Sie weitere Informationen, die verdeutlichen, weshalb der Einsatz logischer Anweisungen in html sehr sinnvoll ist.

Überschrift Größe 6

Überschrift Größe 5

Überschrift Größe 4

Überschrift Größe 3

Überschrift Größe 2

Überschrift Größe 1

Überschriften aller Größenordnungen sind Blockelemente und haben standardmäßig eine Leerzeile und sind fett geschrieben. Sie können die Überschriften per css formatieren und so besser in Ihr Webdesign integrieren.

Blockelement
So kann ein Zitat gekennzeichnet werden, meist erfolgt eine Einrückung am Anfang

Dieser Text ist präformatiert (vorformatiert). 
Z.B. Absätze aus einem Textbearbeitungsprogramm, 
mathematische Formeln, Tabellen oder strukturierte 
Programmquelltexte lassen sich so sehr gut im Browser, 
ohne komplizierte css-Klassen, darstellen. Auch viele
alte Browser können diese Formatierung darstellen.

Texteinrückungen, Absätze, mehrere Leerzeichen
hintereinander oder Zeilenumbrüche, die 
beispielsweise in einem Textbearbeitungsprogramm 
gemacht wurden bleiben beim Kopieren in den Quelltext 
auch in der Browseransicht erhalten. 
Die Schrift ist dicktengleich, d.h. jeder Buchstabe 
beansprucht den gleichen Platz in der Breite egal ob 
i oder m.

Beispiel dicktengleicher Text:
mmmmmmm
iiiiiii

Text, der in Tabellenzellen automatisch umgebrochen 
würde, weil das Browserfenster zu klein ist, wird bei 
präformatiertertem Text nicht umgebrochen, wenn er 
keine Zeilenumrüche enthät. Statt dessen wird eine 
Scrolleiste am unteren Rand angezeigt. Schauen Sie 
sich Ihre so formatierte Webseite also genau an und 
verwenden Sie präformatierten Text nur dort wo er 
notwendig und sinnvoll ist.
Ein 20-seitiges Buch in A4 so darzustellen ist sicher 
nicht sinnvoll.

Präformatierter Text bedeutet auch sparsam verwendet 
schon eine gewisse Einschränkung der Barrierefreiheit 
einer Website.

Präformatierter Text kann per css formatiert werden. 
Absätze und Einrückungen bleiben erhalten. Die Dickten-
gleichheit geht verloren, wenn Sie eine Schriftart
wählen, die dieses Kriterium nicht erfüllt.

Dieser Text wurde unterstrichen