Texte mit HTML formatieren - fett, kursiv und Co

Fett - hervorgehoben

Zu diesem Kapitel empfiehlt das Haus folgende Musik: "I´m fat" von "Weird Al" Yankovic.

Um wichtige Passagen oder Wörter hervorzuheben, können diese fett ausgegeben werden.

Dafür gibt es 2 verschiedene Befehle. Einerseits steht dafür der TAG <b> zur Verfügung. Das b steht für das engl. bold = fett. Andererseits haben wir den HTML-TAG <strong> - engl. "überzeugend, kräftig, fest, derb".

<p> nun <b>wichtiger</b> Text mit b</p>

<p>nun <strong>wichtiger</strong> Text mit strong</p>

Und wenn man sich der Ergebnis im Browser ansieht, wir feststellen, dass in der Ausgabe i.d.R. keine Unterschied zwischen der Hervorhebung mit <strong> und <b> zu sehen ist:

nun wichtiger Text mit b

nun wichtiger Text mit strong

Anmerkung: Wer den End-TAG vergisst, darf sich nicht wundern, wenn dann auch der restliche Text fett wird.

So, wenn Sie sich wundern, warum beides gleich aussieht und dafür es 2 verschiedene HTML-TAGs gibt, hier die Erklärung: es gibt semantisch-logische und physisch-visuelle HTML-TAGs. Folgender Abschnitt zur Erklärung von beiden Elementen erscheint eher sich in Feinheiten zu verlieren – wenn Sie solche Feinheiten lieben, dann ist der Abschnitt für Sie interessant – wer solche Feinheiten nicht leiden kann, den Abschnitt einfach überfliegen!

physisch-visuellen VERSUS semantisch-logische HTML-TAGs

Der große Unterschied ist, dass wir nach der Maxime von XHTML unseren Inhalt logisch strukturieren wollen. Das bedeutet, Inhalt der eine Überschrift darstellt, soll auch mit dem entsprechenden HTML-TAG für die Überschrift ausgezeichnet werden. Bei Bereichen, die hervorgehoben werden sollen, kann der Schreiber entscheiden, was von der inhaltlichen Logik wichtig ist - dann wird <strong> verwendet – bzw. was nur fett dargestellt wird, damit die Aufmerksamkeit darauf gelenkt wird – z. B. möchte man das Wort „Anmerkung: …“ fett hervorheben – dann wird <b>Anmerkung:</b> verwendet. Wenn man sich nicht entscheiden kann, ist es auch kein Beinbruch, wenn man dann einfach einen der beiden HTML-TAGs verwendet (frei nach dem Motte, wird doch fett dargestellt).

Eine kleine Gemeinheit am Rand - nicht jeder Browser zweigt mit dem HTML-TAG <strong> ausgezeichnete Bereiche auch hervorgehoben in fetter Schrift an. Dazu können wir aber später die visuelle Ausgabe von strong (sprich wie es auf dem Bildschirm aussieht) über CSS dann nach unserem Geschmack gestalten.

kursiv - schräge Typen in HTML

Um Passagen oder Wörter hervorzuheben können diese kursiv (in Windrichtung liegend) dargestellt werden.

Hier kommt nun <i>kursiver (schräger)</i> Text

Im Browser erfolgt dann folgende Ausgabe:

Hier kommt nun kursiver (schräger) Text

Das i steht für das englische Wort „italic“ = italienisch. Das Wort "italienisch" hat erstmals nicht allzu viel mit kursiv zu tun, sofern man die Hintergrundgeschichte nicht kennt. Diese Hintergrundgeschichte ist ein Andenken an den ersten Schriftsetzer in der Druckerei von Aldus Manutius, der schräge Buchstaben entwickelte, um mehr Buchstaben auf eine Seite zu bekommen und dadurch das erste Taschenbuch herausbringen zu können. Dieser war Italiener und die Druckerei war in Venedig.

PS: Das erste Taschenbuch musste nicht in Hosentaschen passen, sondern in Satteltaschen :)

Und wie bei der Hervorhebung durch Fett gibt es von kursiv 2 verschiedene HTML-TAGs.

kursiv Darstellung mit semantisch-logischen HTML-TAG <em>

HTML-TAG <em> steht für englische Wort „emphasis“ = „Betonung, Gewichtung, Nachdruck“. Nutzen Sie diesen statt dem HTML-TAG <i>, wenn Sie etwas betont werden soll, weil es von der Textlogik passt.

Anmerkung zu Kursiv: Kursive Schrift bremst den Leser – daher sollten bestenfalls nur kurze Textpassagen kursiv angezeigt werden. Sind lange Textpassagen bzw. der ganze Text kursiv wird es anstrengend für den Leser. Also bitte sachte mit der Verwendung von kursivem Text.

vorheriges Kapitel: Aufgabenlösung Seitenaufbau
nächstes Kapitel: Schachteln von HTML-TAGs
Aufgabenlösung SeitenaufbauSeitenanfangSchachteln von HTML-TAGs
eBook HTML-Seminar.de
del.icio.usMister Wong         Aufgabenlösung SeitenaufbauSeitenanfangSchachteln von HTML-TAGs
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de