Ausrichtung von Absätzen
Mit Absätzen lassen sich lange Texte gliedern und so leichter lesbar machen. Der Webbrowser fügt dazu am Ende eines Absatzes eine Leerzeile (zwei Zeilenumbrüche) ein.
Das <p>-Tag initiiert einen Absatz und bringt auch gleich eine praktische Funktion mit, die Sie sicherlich aus Ihrem Textverarbeitungsprogramm kennen: Die automatische Ausrichtung des gesamten Absatzes – linksbündig, zentriert, Blocksatz und rechtsbündig.
Experten-Tipp: Verlassen Sie sich nicht darauf, dass Absätze ohne Angabe des align-Attributs immer linksbündig ausgerichtet werden, da manche Sprachen von rechts nach links verlaufen und dies dann im Webbrowser die Standardeinstellung ist.
Beispiel:
<p align="left">Das ist ein linksbündig ausgerichteter Absatz!</p>
<p align="center">Das ist ein zentrierter Absatz!</p>
<p align="justify">Um einen Text so zu formatieren, damit jede Zeile eine einheitliche Länge besitzt, nennt man "Blocksatz". Der Webbrowser fügt zwischen einzelnen Wörtern mehr oder weniger Freiraum ein und bricht die Zeile am Ende auch passend um.</p>
<p align="right">Das ist ein rechtsbündig ausgerichteter Absatz!</p>
Und so sieht’s aus:
Das ist ein linksbündig ausgerichteter Absatz!
Das ist ein zentrierter Absatz!
Um einen Text so zu formatieren, damit jede Zeile eine einheitliche Länge besitzt, nennt man „Blocksatz“. Der Webbrowser fügt zwischen einzelnen Wörtern mehr oder weniger Freiraum ein und bricht die Zeile am Ende auch passend um.
Das ist ein rechtsbündig ausgerichteter Absatz!
Schnell und schmutzig: <center>
Früher (also vor CSS-Zeiten) war das <center>-Tag wohl eines der beliebtesten HTML-Tags. Wie sein Name schon andeutet, zentriert es Textzeilen.
Beispiel:
<center>Das ist eine zentrierte Zeile.</center>Und so sieht’s aus:
Das ist eine zentrierte Zeile.
Inzwischen dient es CSS-Enthusiasten als abschreckendes Beispiel für die Trennung von Inhalt (HTML) und Form (CSS). Aber das Tag funktioniert und ist besonders in Newslettern gebräuchlich.
Allerdings müssen wir an dieser Stelle anmerken, dass <center> aus dem offiziellen HTML5-Wortschatz entfernt wurde. Da aber alle Browser HTML 4.x unterstützen, können Sie es dennoch einsetzen.
Die Klassiker: Fett, kursiv, unterstrichen
Um einen Text fett hervorzuheben, stehen zwei HTML-Tags zur Verfügung: <b> und <strong> (wobei der Buchstabe „b“ für das englische Wort „bold“, also „kräftig“ oder „fett“ steht).
Auch für die Darstellung von Kursivschrift existieren zwei HTML-Tags: <i> und <em> („i“ meint den Anfangsbuchstaben des Wortes „italic“, was „kursiv“ bedeutet und „em“ ist die Abkürzung für „emphasized“, auf Deutsch „etwas betonen“ oder „hervorheben“).
Mit dem HTML-Tag <u> schließlich lässt sich ein Textbereich unterstreichen („u“ für das englische Wort „underline“, also „unterstreichen“). Und nein, hierfür gibt es keine zweite Variante. 😉
Die Tags können ineinander verschachtelt werden, um beispielsweise ein Wort sowohl fett zu schreiben als auch zu unterstreichen.
Beispiel:
Mit <b>purem HTML</b> lassen sich <i>old-skool</i> mäßig
Texte <u>schnell</u> formatieren.
<b><i><u>Wer braucht da schon CSS</b></i></u>!?Und so sieht’s aus:
Mit purem HTML lassen sich old-skool mäßig Texte schnell formatieren. Wer braucht da schon CSS !?
Fett, kursiv und ein feiner Unterschied
Obwohl die meisten Webbrowser die Tags <b> und <strong> sowie <i> und <em> gleich behandeln, unterscheiden sie sich doch in ihrer Bedeutung:
Während <b> und <i> tatsächlich nur für die optische Gestaltung entwickelt wurden, sollen <strong> und <em> die Wichtigkeit der damit versehenen Textpassagen hervorheben.
