Text-Elemente¶
HTML besitzt eine Anzahl an Elementen, mit denen Text ausgezeichnet und Dokumente strukturiert werden können. Es gibt Überschriften, Textblöcke, Listen und andere. Diese sollten wie in einem Papierdokument inhaltlich korrekt strukturiert werden.
Überschriften¶
Überschriften dienen zur Strukturierung eines Dokument. Sie sind das wichtigste Merkmal für den Leser, sich im Dokument zurechtzufinden. Eine Überschrift wird durch eines der Elemente h1, h2, h3, h4, h5 oder h6 realisiert. h steht dabei für heading (Überschrift).
1<h1>Überschrift 1</h1>
2<h2>Überschrift 2</h2>
3<h3>Überschrift 3</h3>
4<h4>Überschrift 4</h4>
5<h5>Überschrift 5</h5>
6<h6>Überschrift 6</h6>
See the Pen Überschriften by Html Website (@html_website) on CodePen.
Textblock¶
Textblöcke (Paragraphen) dienen der Gliederung eines Textes. Sie werden in HTML mit dem Element <p> (engl: paragraph) ausgezeichnet.
1<p>HTML ist super</p>
2<p>Sie haben mir den Arm gebrochen! Es gibt 250 Knochen im menschlichen Körper. Das war der erste.</p>
3<p>Dieser Absatz (Paragraph) enthält viel mehr Text als alle anderen. Er enhält einen Pseudotext. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum nesciunt reprehenderit quaerat animi quisquam obcaecati et ipsam omnis, officiis aliquam adipisci mollitia rerum ex! Alias voluptatibus quasi eveniet natus.</p>
See the Pen Textblock by Html Website (@html_website) on CodePen.
Zeilenumbruch¶
Wenn man innerhalb eines Satzes eines Zeilenumbruch verwenden möchte, kann man das <br> Element verwenden.
Bemerkung
Das br-Element hat kein schließendes Tag
1<p>Das ist ein Textblock <br> mit einem Zeilenumbruch.</p>
See the Pen Zeilenumbruch by Html Website (@html_website) on CodePen.
Textauszeichung¶
Innerhalb eines Textes kann es vorkommen, das bestimmte Wörter oder einzelne Buchstaben anders formatiert werden sollen als der Rest. Dazu kann das inline-Element <span> verwendet werden. Das span-Element hat keine Auswirkungen auf die Website. Es kann später mittels einer anderen Sprache, z.B. CSS für das Design, angesprochen werden. Das span-Element befindet sich immer innerhalb anderer Elemente.
1<p>HTML ist <span>super</span></p>
2<h1>Dies ist eine <span>Überschrift</span></h1>
3<p>Ein Text, der zwei <span>Span</span> </span>enthält</span></p>
See the Pen Textauszeichnung by Html Website (@html_website) on CodePen.
Textformatierungen¶
Die folgenden Elemente sind alles Inline-Elemente und stehen immer innerhalt eines Block-Elemente wie zum Beispiel einer Überschrift oder in einem Absatz.
Fettschrifft¶
Mittels des <strong> können ein oder mehrere Wörter in ihrer Bedeutung hervorgehoben werden. Sie werden dann fett dargestellt.
1<p>HTML ist <strong>super</strong></p>
Kursivschrift¶
Das <i> hebt einen Teil vom Rest eines Textes ab um zum Beispiel, einen Fachbegriff aus einer Fremdsprache deutlicher vom Rest abzugrenzen. Das Element stellt diese Inhalte dann kursiv dar.
1<p>HTML steht für <i>Hypertext Markup Language</i></p>
Kleinschrift¶
Das <small> stellt Inhalte kleiner dar um zum Beispiel Copyright oder ähnliches darzustellen.
1<p>Hypertext Markup Language</p>
2<p><small>Standardisierung durch das W3C-Gemium</small></p>
Markiert¶
Das <mark> stellt Inhalte markiert dar.
1<p>Für Hypertext Markup Language ist die Abkürzung <mark>HTML</mark></p>
Durchgestrichen¶
Das <del> stellt Inhalte durchgestrichen dar.
1<p>Für Hypertext Markup Language ist die Abkürzung <del>HLM</del>. Richtig ist HTML</p>
Unterstrichen¶
Das <u> stellt Inhalte unterstrichen dar.
1<p>Für Hypertext Markup Language ist die Abkürzung <del>HLM</del>. Richtig ist <u>HTML</u></p>
Hoch- und Tiefgestellt¶
Das <sub> stellt Inhalte tiefgestellt dar und das <sup> stellt Inhalte hochgestellt dar. Kann für Fußnoten verwendet werden.
1<p>H<sub>2</sub>0 ist Wasser</p>
2
3<p>www<sup>[1]</sup></p>
See the Pen Textformatierungen by Html Website (@html_website) on CodePen.
Block- und Inline Elemente¶
HTML unterscheidet zwischen Block-Elementen, diese nehmen den gesamten zur Verfügung stehenden Platz auf der Website ein, und Inline-Elementen, die nur den benötigten Paltz einnehmen.
- Block-Elemente erzeugen immer einen Zeilenumbruch.Überschriften und Absätze sind Beispiele für Block-Elemente
- Inline-Elemente stehen nebeneinander und nehmen nur den benötigten Platz ein.Links und Zeilenumbrüche sind Beispiele für Inline-Elemente.
