relativeMeister.com
HTML-Textformatierung: Zeilenumbruch, Absatz, Überschriften, fett, kursiv, unterstrichen
Die HTML-Textformatierung-Basics. Von Zeilenumbrüchen über Absätze und Überschriften bis hin zu fett, kursiv und unterstrichen.Tags: Absätze | CSS lernen | HTML lernen | HTML-Tag | Programmieren lernen | Überschriften | Web-Development lernen | Webseiten erstellen lernenWorum geht´s?
In diesem HTML-Tutorial lernst du die Grundlagen der HTML-Textformatierung. Wir werden uns ansehen, wie wir Zeilenumbrüche bzw. Leerzeilen und Absätze erstellen. Wie Überschriften in HTML funktionieren. Und wie du Text nur mit HTML-Befehlen fett, kursiv und unterstrichen machst.
1. Wie Text in HTML grundsätzlich behandelt wird
Vielleicht hast du in einem Texteditor wie Word einen langen Text verfasst hast, den du nun einfach in deinen HTML-Code einfügen willst. Der richtige Ort dafür ist grundsätzlich der <body>-Bereich, wo alle Texte, Überschriften, Links, Bilder und so weiter platziert werden.
Wenn du dir deine HTML-Seite im Browser ansiehst, wirst du allerdings rasch feststellen, dass HTML deine Absätze aus deinem Textverarbeitungs-Programm einfach ignoriert. Warum ist das so?
Weil die HTML-Textformatierung völlig anders funktioniert.
Browser interpretieren Text in HTML grundsätzlich so, dass alle Absätze im Text sowie mehr als ein einziges Leerzeichen ignoriert werden. Wenn du also z.B. in Word gewohnt bist, zur Formatierung einfach genug Leerzeichen einzufügen, um einen Text entsprechend zu verschieben, hast du hier Pech gehabt. Das lässt HTML nicht zu.
Der Grund ist, dass Texte in deiner Entwicklungsumgebung ja möglicherweise nicht in eine Zeile passen, weil sie zu lang dafür sind. Weil HTML Zeilenumbrüche und mehr als ein Leerzeichen einfach ignoriert, kannst du Texte in deiner Entwicklungsumgebung wie Visual Studio Code über mehrere Zeilen schreiben, ohne dass dies Auswirkung auf den am Ende angezeigten Text hat.
2. In HTML einen Zeilenumbruch einfügen
Grundsätzlich gibt es in HTML mehrere Möglichkeiten, eine neue Zeile beginnen zu lassen.
Die einfachste entspricht der „new line“-Taste auf der Tastatur (auch als ENTER oder „line break“ bekannt). Dazu brauchst du ein sogenanntes <br>-Tag. Dieses steht alleine und braucht kein schließendes Tag mehr. In etwa so:
Das ist die erste Zeile.<br> Das ist die zweite Zeile
Das <br>-Tag fügt einfach einen Zeilenumbruch in den Text ein.
Was aber, wenn wir eine Leerzeile in unserem HTML-Code haben wollen?
Dann können wir einfach zwei <br>-Tags hintereinander einfügen. Das erste Tag beginnt eine neue Zeile, und das zweite bringt uns noch eine Zeile darunter. Im Ergebnis haben wir dadurch eine Zeile ausgelassen – also eine Leerzeile erstellt:
Das ist die erste Zeile.<br><br> Das ist die zweite Zeile nach einer Leerzeile.
Aber auch wenn der direkte Zeilenumbruch sehr einfach ist und grundsätzlich funktioniert, ist er meist nicht das HTML-Tag der Wahl. Vielseitiger und damit nützlicher sind HTML-Absätze.
3. Bessere HTML-Textformatierung mit Absätzen
Ein Absatz in HTML zeichnet sich dadurch aus, dass ein bestimmter Text-Block in einem Absatz zusammengefasst ist. Meist haben Absätze oben und unten einen gewissen Abstand zu anderen HTML-Elementen.
Das praktische an Absätzen ist, dass man sie später mit Hilfe von CSS sehr genau konfigurieren kann. So kann man z.B. die Abstände zu anderen HTML-Elementen für alle Absätze gemeinsam steuern. Oder die Zeilenbreite, um die Lesbarkeit zu erhöhen.
Absätze erstellst du in HTML mit dem <p>-Tag, wobei das „p“ für „paragraph“, also Absatz steht. Dieses HTML-Tag ist wieder ein „soziales“ Tag, das heißt es hat ein öffnendes und ein schließendes Tag. Alles dazwischen gehört zum Absatz:
<p> Alles dazwischen ist ein Absatz. </p>
Wenn du nun mehrere Absätze in deinem Text hast, musst du vor jedem Absatz ein <p>-Tag und nach jedem Absatz ein schließendes </p>-Tag einfügen.
Weil das bei längeren Texten in Arbeit ausartet, werden Texte meist nicht direkt in den HTML-Code eingefügt, sondern über Werkzeuge wie TinyMCE, die automatisch Absätze usw. in den Text einbauen. Für den Benutzer sieht das Ganze dann ähnlich aus wie ein Textbearbeitungsprogramm, wie z.B. Word.
Warum du dann trotzdem noch HTML lernen solltest?
Weil man in diesen Werkzeugen meist auf eine HTML-Ansicht umschalten kann, um komplexere Aufgaben „händisch“ zu lösen. So sind z.B. nicht alle dieser Werkzeuge fähig, einen Text in mehreren Spalten anzuzeigen. Wenn du HTML (und idealerweise ein bisschen CSS) kannst, hast du da große Vorteile. Aber dazu später mehr.
Jetzt wirds Zeit für Überschriften!
4. In HTML Überschriften einfügen
Überschriften funktionieren in HTML ähnlich wie die Absätze von vorhin. Auch hier gibt es ein öffnendes HTML-Tag und ein schließendes HTML-Tag, und alles dazwischen entspricht der Überschrift. Auch bei Überschriften gibt es oben und unten automatisch Abstände. Zusätzlich sind sie je nach Art der Überschrift auch noch fett oder mit größerer Schriftgröße geschrieben.
Grundsätzlich gibt es 6 verschiedene Arten von Überschriften in HTML, wobei das Prinzip dahinter immer gleich ist. Sie werden nur unterschiedlich groß und auffällig angezeigt. Allerdings macht die Art der Überschrift noch einen weiteren Unterschied: Suchmaschinen geben einer <h1>-Überschrift beispielsweise mehr Gewicht als einer <h3>-Überschrift.
Aber jetzt schauen wir uns mal an, wie sie funktionieren:
<h1>Das ist die größte Überschrift</h1> Irgendein Text <h2>Das ist eine Unter-Überschrift</h2> Text unter der zweiten Überschrift <h2>Eine weitere Unter-Überschrift</h2> Weiterer Text <h6>Kleinstmögliche Unter-Überschrift</h6> Noch ein Text
HTML-Überschriften funktionieren grundsätzlich immer gleich, nämlich mit einem <h1>-Tag, wobei sich die Zahl nach dem h zwischen 1 und 6 bewegen kann. Je höher Die Zahl, desto „größer“ die Überschrift.
In den meisten Webseiten gibt es pro Unterseite nur eine einzige <h1>-Überschrift, nämlich den Seiten-Titel. Das hat mit der Suchmaschinen-Optimierung (auch SEO genannt) zu tun.
Die größten HTML-Überschriften im eigentlichen Text beginnen dann entsprechend mit <h2>.
Was uns jetzt für den Anfang der Textformatierung in HTML noch fehlt, sind fett, kursiv und unterstrichen.
5. HTML-Textformatierung für fett, kursiv und unterstrichen
Ähnlich wie im Textverarbeitungsprogramm Word kann auch in HTML Text-Teile fett, kursiv oder/und unterstrichen machen.
Beginnen wir mit fettem Text:
5.1 In HTML Text fett (bold) formatieren
Das HTML-Tag für fetten Text ist das <b>-Tag, wobei das „b“ für „bold“, also fett steht:
Das ist ein Text mit <b>fettem Teil</b> darin.
5.2 Texte in HTML kursiv (italic) formatieren
Kursive Texte erstellst du in HTML mit Hilfe des <i>-Tags, wobei das „i“ für „italic“ steht. Der Legende nach wurde die kursive Schrift in Italien erfunden, deswegen heißt es auch „italic“:
In diesem Text gibt es auch einen <i>kursiven Teil</i>. Wow!
In HTML Text unterstreichen (underline)
Im Web-Bereich werden unterstrichene Texte im eigentlichen Text eher selten verwendet. Der Grund ist, dass die meisten Webseiten-Besucher unterstrichenen Text mit Links zum Anklicken verbinden.
Wenn du Textteile trotzdem unterstreichen willst, geht das so:
Das ist ein <u>unterstrichener</u> Text-Bereich
6. Mehr zur HTML-Textformatierung im Bereich über CSS
Die oben genannten HTML-Tags ermöglich dir eine grobe Formatierung deines Textes in HTML. Aber wenn du z.B. Überschriften eine andere Farbe geben willst, kommst du mit der reinem HTML-Textformatierung nicht sehr weit. Mit Hilfe von CSS wird es dann erst so wirklich interessant.
Weil HTML-Elemente aber die Grundlage von allem anderen darstellen, solltest du zuerst aber noch die anderen Grundbausteine in HTML kennenlernen, bevor du dich in die fast unbegrenzten Möglichkeiten von CSS stürzt.