Sie sind hier: Startseite -> HTML-Beispielseite -> Phase II: Inhalt -> Textformatierung

HTML-Inhalt: Textformatierung

HTML-Inhalt: Textformatierung

Nachdem die Überschrift und ein erster Text in die Beispielseite eingebaut wurde, ist es nun an der Zeit, mögliche Formatierungen zu besprechen. Den Rand mit dem CSS-Befehl margin haben wir schon ausprobiert und auch die Zeilenhöhe im Absatz ist Geschichte.

Beim Formatieren gibt es eine Kombination aus HTML-Befehlen und CSS-Befehlen. CSS macht Sinn, wenn ein ganzer Absatz einen bestimmten Stil haben soll, HTML bietet das Gesamtgerüst, zum Beispiel den p-Tag für den Absatz und natürlich auch für die Formatierung einzelner Textpassagen.

Der Text ist der gleiche wie im vorherigen Artikel mit Überschrift und Text, allerdings habe ich der Übersichtlichkeit wegen den wiederholenden zweiten Absatz entsorgt. Stattdessen beginnt der Absatz mit einem fettgeschriebenen Teil und nach der Zeilenschaltung mit einem kursiven Teil.

Beides sind wichtige Textformatierungen, die auf Webseiten immer wieder auftreten. Hier wird nicht CSS-verwendet, sondern mit HTML die entsprechende Textstelle markiert. Wichtig sind dabei die neueren Definitionen. Früher hat man in HTML Fettschrift durch den b-Tag verwendet, heute wird hiefür strong genützt. Auch beim kursiven Text war früher der i-Tag gefragt, der durch den em-Tag ersetzt wurde. Vom Aussehen her spielt das aber keine Rolle.

Nehmen wir nun an, man möchte einen ganzen Absatz fett schreiben - dann wäre CSS die bessere Wahl. CSS kann aber auch für einzelne Passagen verwendet werden, indem man den span-Befehl nutzt.

Das Ergebnis sieht so aus: Beispielseite

Die CSS-Befehle, die wir im letzten Artikel für den Absatz (p-Tag) definiert haben, blieben gleich. Aber es kam der Befehl font-weight hinzu, der auf "bold" gestellt wurde. Damit ist der Text jedes Absatzes vom ersten bis zum letzten Zeichen fettgeschrieben.

Das ist natürlich wenig effektiv, weil man dann nicht erkennen kann, was wichtig ist und was nicht, aber es kann später passieren, dass man einen kompletten Absatz fett schreiben möchte und daher ist dieses Wissen gut geeignet. Stellen Sie sich vor, sie haben auf verschiedenen Seiten solch einen Absatz und möchten die fettgeschriebenen Textstellen noch weiter betonen - mit CSS können sie mit zusätzlichen Werten arbeiten, zum Beispiel: "font-weight: 900;", um das Fett noch stärker darzustellen. Wenn Sie den HTML-Tag strong verwendet hätten, hätten Sie diese Möglichkeit nicht und zusätzlich kann man in der CSS-Datei mit einer Änderung alle fettgeschriebenen Absätze vollautomatisch ändern. Dazu würde man als Unterscheidung für die normal geschriebenen Absätze eine Klasse einsetzen, was später genauer erklärt wird.

In den CSS-Definition wurde auch span aufgenommen und mit der Textformatierung italic bestückt. Das ist die kursive Formatierung und hat den Vorteil, dass jede Textpassage, die als span in HTML definiert wurde, per CSS direkt geändert werden kann. So könnte man beispielsweise nach einem halben Jahr auf die Idee kommen, den Text in grüner Schrift darzustellen. Dazu braucht man nur die span-Befehle in der CSS-Datei mit einem Farbwert (CSS-Befehl color) ergänzen.

Eine klassische HTML-Formatierung habe ich bewusst weggelassen: den u-Tag, der für das Unterstreichen steht. Dieser wurde früher gerne eingesetzt, wird manchmal auch heute noch bei Webseiten beobachtet, aber hat ein Problem: unterstrichen ist meist ein Link und daher glauben viele Leserinnen und Leser, dass sie einen Link sehen, der aber keiner ist. Fett und Kursiv sind daher die besseren Formatierungsmöglichkeiten.

Ebenfalls interessant:

Überschrift + Text

Informationen über das HTML-Konzept von Überschrift und Text, SEO-Tipps und CSS-Formatierung.

[aktuelle Seite]

Textformatierung

Informationen über die Textformatierung mit HTML und Möglichkeiten, CSS einzusetzen.

Aufzählungslisten

Informationen über die HTML-Aufzählungslisten in der HTML-Beispielseite und die Formatierung durch CSS.

Bild einbauen

Informationen über das Einbauen eines Bildes in die HTML-Beispielseite und die Formatierung mit CSS.

Startseite

Informationen über die Startseite mit echtem Text für das HTML-Beispielprojekt, die Ausgangspunkt für weitere Seiten ist.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Phase II: Inhalt

Startseite HTML-Beispielseite