HTML-Elemente: Text
Details, Bearbeiten in Web-Editoren
Überschriften, Absätze, vorformatierter Text, Kontaktinformation zum/zur Autor/in, Zitat in Absatzform, Zeilenumbrüche, Waagrechte Trennlinie
HTML-Elemente: Text
Überblick Elemente
Folgende Elemente kann man verwenden, um Text zu strukturieren:
| Tag | Elementname original | Beschreibung | Beispiel, wie es dargestellt wird (kann zwischen Browsern differieren) |
Gehe zu | |
|---|---|---|---|---|---|
| <h1>…<h6> | heading | Überschrift | 
|
||
| <h1> | Überschrift 1 |
||||
| <h2> | Überschrift 2 |
||||
| <h3> | Überschrift 3 |
||||
| <h4> | Überschrift 4 |
||||
| <h5> | Überschrift 5 |
||||
| <h6> | Überschrift 6 |
||||
| <p> | paragraph | Absatz | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
|
| <pre> | preformatted text | Vorformatierter Text |
<html>
<head>
<title>Zählen bis drei</title>
</head>
<body>
<h1>Zählen bis drei</h1>
<p>So zählt man bis drei</p>
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
</body>
</html>
|
|
|
| <blockquote> | block-like quote | Zitat (ganzer oder mehrere Absätze) |
|
|
|
| <address> | information on author | (Kontakt)Informationen zum/zur Autor/in bzw. Urheber/in |
Address:
Artikel von Stefan Münz: http://de.selfhtml.org
|
|
|
| <br> | forced line break | (harter) Zeilenumbruch, neue Zeile | Absatz mit einem Break. |
|
|
| <hr> | horizontal rule | Horizontales, waagrechtes Lineal (Trennlinie) | Absatz vor hr: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Absatz nach hr: Ut enim ad minim eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
Beschreibung
Überschriften: h1 bis h6 (heading)
| Beschreibungen |  |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
 |
 |
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle |  |
|
|
|
|
|
|
 |
h1…h6
Elementbeschreibung
<h1> bis <h6>: Überschriften werden
mit h (header) abgekürzt. Es gibt sie in sechs Abstufungen (h1, h2, … h6), wobei 1 die größte
und 6 die kleinste ist.
Beschreibung
http://wiki.selfhtml.org/wiki/H1
http://webkompetenz.wikidot.com/html-handbuch:ueberschriften
Referenz
http://wiki.selfhtml.org/wiki/Referenz:HTML/h1
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-h1-h5
Code
Überschriften (% heading)
- selfhtml wiki
- can i use
Attribute
Universalattribute
id, class, style, title, lang, dir
http://wiki.selfhtml.org/wiki/HTML/Universalattribute
Absätze: p (paragraph)
| Beschreibungen | |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
|
|
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle | |
|
|
|
|
|
|
|
p
Elementbeschreibung
<p>: Absätze werden mit p (paragraph) abgekürzt.
Beschreibung
http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/p
http://webkompetenz.wikidot.com/html-handbuch:textabsaetze
Referenz
http://wiki.selfhtml.org/wiki/Referenz:HTML/p
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-p
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Attribute
Universalattribute
id, class, style, title, lang, dir
http://wiki.selfhtml.org/wiki/HTML/Universalattribute
Vorformatierter Text: pre (preformatted)
| Beschreibungen | |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
|
|
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle | |
|
|
|
|
|
|
|
pre
Elementbeschreibung
<pre>: Vorformatierter Text wird mit pre (preformatted) abgekürzt. Wird vor allem verwendet, wenn man Code (Programmiersprachen, HTML-Quellcode, …) darstellen möchte. Es wird eine Schrift verwendet, bei der alle Zeichen gleich breit sind (dadurch entstehen "Spalten") und der Zeilenumbruch entspricht dem des Quelltextes und passt sich nicht der Fensterbreite des Browsers an.
http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/pre
http://webkompetenz.wikidot.com/html-handbuch:praeformatierte-bereiche
http://wiki.selfhtml.org/wiki/Referenz:HTML/pre
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-pre
Attribute
Universalattribute
id, class, style, title, lang, dir
http://wiki.selfhtml.org/wiki/HTML/Universalattribute
"Block"-Zitat: blockquote
| Beschreibungen | |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
|
|
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle | |
|
|
|
|
|
|
|
blockquote
Elementbeschreibung
<blockquote>: Ein Blockzitat wird verwendet, wenn das Zitat nicht innerhalb einer Zeile angeführt werden soll, sondern als einheitlicher (größerer) Block. Es wird von den meisten Browsern eingerückt dargestellt. Vorsicht: Man sollte das Blockzitat nicht missbrauchen, um Text einzurücken, was leider von vielen getan wird. Besser ist es mit CSS den Text einzurücken.
Das blockquote-Element wird gerne
verwendet, um Einrückungen zu realisieren. Da es sich jedoch um eine
logische Textauszeichnung handelt, die keine bestimmte Art der Formatierung
vorschreibt, ist der Einrück-Effekt nicht garantiert.
[cite: gibt den URI der Zitatquelle (nach RFC 2396) an; bewirkt jedoch meistens
nichts]
Beispiel:
Die Energie des Verstehens
<blockquote cite="http://de.selfhtml.org/">
<p>Die Energie des Verstehens</p>
</blockquote
http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/blockquote
http://webkompetenz.wikidot.com/html-handbuch:blockzitate
http://wiki.selfhtml.org/wiki/Referenz:HTML/blockquote
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-blockquote
Attribute
cite
(todo) http://webkompetenz.wikidot.com/html-handbuch:html-attributreferenz-cite
Universalattribute
id, class, style, title, lang, dir
http://wiki.selfhtml.org/wiki/HTML/Universalattribute
"Adresse" / (Kontakt)Informationen: address
| Beschreibungen | |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
|
|
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle | |
|
|
|
|
|
|
|
address
Elementbeschreibung
<address>: (Kontakt)Informationen zum/zur Autor/in bzw. Urheber/in. Wird von den meisten Browsern als kursiv dargestellt.
http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/address
http://webkompetenz.wikidot.com/html-handbuch:autorenangaben
http://wiki.selfhtml.org/wiki/Referenz:HTML/address
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-address
Attribute
Universalattribute
id, class, style, title, lang, dir
http://wiki.selfhtml.org/wiki/HTML/Universalattribute
Neue Zeile: br (break)
| Beschreibungen | |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
|
|
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle | |
|
|
|
|
|
|
|
br
Elementbeschreibung
Neue Zeile: Es besteht die Möglichkeit einen fixen Zeilenumbruch ("harter" Umbruch) einzufügen, ohne
das ein neuer Absatz begonnen wird. Dies erreicht man mittels des Elementes
break (<br>). Es entsteht kein neuer Block und daher auch keine entsprechenden
vertikalen Abstände. Ein break wird meistens in Absätzen verwendet, kann aber
auch in Überschriften benutzt werden.
Anmerkung: break ist ein inhaltsleeres Element, daher <br /> .
http://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/br
http://webkompetenz.wikidot.com/html-handbuch:zeilenumbrueche
http://wiki.selfhtml.org/wiki/Referenz:HTML/br
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-br
Attribute
Universalattribute
id, class, style, title, lang, dir
http://wiki.selfhtml.org/wiki/HTML/Universalattribute
Waagrechte Linie: hr (horizontal rule)
| Beschreibungen | |
|||||||
|---|---|---|---|---|---|---|---|---|
| Referenzen | |
|
|
|
|
|
|
|
| Sprache | dt | dt | en | en | en | en | dt | en |
| Info zur Quelle | |
|
|
|
|
|
|
|
hr
Elementbeschreibung
<hr>: Es wird eine waagrechte Linie eingefügt, die als Trennlinie dient.
Sie ist zwei Pixel hoch und die obere Kante ist dünkler als die untere,
somit sieht die Linie graviert aus.
hr werden heute selten verwendet, da sie "altmodisch" aussehen. Es gibt mit
CSS bessere Möglichkeiten, Texte optisch zu trennen.
http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/hr
http://webkompetenz.wikidot.com/html-handbuch:trennlinien
http://wiki.selfhtml.org/wiki/Referenz:HTML/hr
http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-hr
Attribute
Universalattribute
id, class, style, title, lang, dir
Web-Editoren
Expression Web | BlueGriffon | Dreamweaver 8
Expression Web
<p>, <h1> … <h6>, <address>, <pre>,
<blockquote>
Einfügen/Erstellen eines Textblockes
Wenn man beim Schreiben eines Textes mit einem Textblock fertig ist,
dann befindet sich die Einfügemarke am Ende des Textblocks. Mit tippen
der Eingabetaste kann man nun einen neuen Textblock erzeugen und danach
dieses neue, leere HTML-Element in das gewünschte ändern.
Anmerkung: Bei <h1>…<h5> wird automatisch ein neues Element <p> erzeugt.
alle <…>
<p>, <h1> … <h6>, <address>, <pre>, <blockquote>
Ändern eines Textblockes
Menü: nicht verfügbar
Symbolleiste Allgemein: "Formatvorlage"
Tastenkombination: Strg+Umschalt+S (springt zur Symbolleiste)
<p>, <h1> … <h6>, <address>, <pre>,
<blockquote>
Anmerkung: "ohne" bedeutet: keine der oberen Auszeichnungen, z.B. für Text in einer Liste
<br>: Umschalt+Eingabetaste
<hr>:
Menü: Einfügen | HTML | Horizontale Linie
BlueGriffon
Einfügen/Erstellen eines Textblockes
Durch Einfügen eines HTML 5 Elements mit Menübefehl
Nach jedem beliebigen Element (auch Listen) ein folgendes Element einfügen:
<p>, <h1> … <h5>, <address>, <pre>,
<blockquote>
Menü: Einfügen | HTML 5 Element | <Elementname>
Tipp: Einen Buchstaben eintippen, Fokus springt zum ersten Eintrag mit diesem
Anfangsbuchstaben.
Fügt in der Zeile unterhalb der Einfügemarke ein neues HTML-Element ein.
Durch Erstellen eine Elements mit Hilfe der Eingabetaste
und dem Kombinatinsfeld "Absatzformat wählen" in der
Symbolleiste
Wenn man beim Schreiben eines Textes mit einem Textblock fertig ist,
dann befindet sich die Einfügemarke am Ende des Textblocks. Mit tippen
der Eingabetaste kann man nun einen neuen Textblock erzeugen und danach dieses neue,
leere HTML-Element in das gewünschte ändern:
Symbolleiste oben: Absatzformat wählen
Das Ändern mit "Absatzformat wählen" funktioniert aber unterschiedlich, daher siehe
die Beschreibungen in "Ändern eines
Textblockes".
Genauso unterschiedlich ist die Wirkung der Eingabetaste, daher:
Anmerkung: Bei <h1> … <h5> wird automatisch ein neues Element <p>
erzeugt.
Vorsicht: Bei <address>, <pre>, <blockquote> erzeugt die Eingabetaste
(egal wo sie steht) kein neues Element, sondern fügt nur ein <br> ein -
daher funktioniert hier diese Methode nicht.
Vorsicht: Bei <p>, <h1> … <h5>: Steht die Einfügemarke nicht am Ende des
Textelements, sondern inmitten, so wird das Element an dieser Stelle
getrennt und es entstehen zwei gleiche Elemente - dies gilt auch für die
Überschriften.
Ändern eines Textblockes
alle <…>
Vorsicht: Existiert ein <br> innerhalb des Blockelements, dann
werden nur die Zeilen geändert, in denen die Einfügemarke steht und
die durch das break oder die breaks begrenzt werden. Alle anderen
Zeilen "außerhalb" des breaks oder der breaks bleiben das
Blockelement, das sie waren - es entstehen daher aus einem mehrere
Blockelemente.
Daher besser: Vorher den gesamten Text innerhalb des Elements markieren,
entweder mit der Maus bzw. Tastatur, oder auch das ganze
Element mit der F2-Taste oder mittels der Strukturleiste.
Bei
bestehenden Textblöcken: <p>, <h1> … <h5>,
<pre>, <address>
Mit Symbolleiste oben: Absatzformat wählen neues HTML-Element
wählen.
Wenn man Texte neu eintippt, drückt man meistens die
Eingabetaste ohne danach Textstellen zu markieren. Das funktioniert
aber (auch wenn sich kein Break <br> im Textblock befindet) nur in besonderen Fällen fehlerfrei:
Bei bestehenden Textblöcken <p>, <h1> … <h5> und
wenn im Textelement kein Break <br> existiert, genügt es wenn die
Einfügemarke innerhalb des Textelements steht, das ganze Element
wird entsprechend geändert.
Bei bestehenden Textblöcken <pre>, <address> wird nur auf den ersten
Blick das ganze Element entsprechend geändert, sobald man jedoch
weiteren Text eintippt, wird ein unerwünschtes HTML-Element <span>
mit einer Formatierung eingefügt, die der ursprünglichen optischen
Darstellung entspricht. Daher ist bei <pre> und <address> der ganze
Textblock zu markieren oder die Methode "Menü: Einfügen
| HTML 5 Element" zu verwenden.
Bei bestehenden Textblöcken
<blockquote> kann man mit der Eingabetaste nur Breaks <br>
einfügen bzw. mit "Symbolleiste oben: Absatzformat wählen"
werden nur die Textelemente im <blockquote> zusätzlich
eingefügt und nicht geändert. Daher ist bei <blockquote> nur die Methode "Menü: Einfügen
| HTML 5 Element" zu verwenden.
Anmerkung: "Inhalt Text" bedeutet: keine der oberen Auszeichnungen, z.B. für Text in einer Liste
<br>: Umschalt+Eingabetaste
Anmerkung: BlueGriffon fügt zeitweise überflüssige breaks ein. Diese kann man automatisch mit Menü: Extras | Markup aufräumen wieder löschen.
<hr>:
Menü Einfügen | Horizontale Leiste
Menü Einfügen | HTML 5 Element | <hr>
Am Besten die Einfügemarke ans Ende eines Textblockes platzieren. (Es
macht in der Praxis keinen Sinn, innerhalb eines Absatzes oder ähnliches
eine Trennlinie einzufügen.)
Dann Menü Einfügen | Horizontale Leiste oder Menü Einfügen | HTML 5
Element | <hr> verwenden.
Bei Menü Einfügen | Horizontale Leiste erscheint ein Dialogfenster.
Nichts eingeben sondern nur bestätigen, da alle Punkte "veraltet" sind.
| Elemente | Menü | Symbolleiste | Tastenkombination |
|---|---|---|---|
| alle | Einfügen | HTML 5 Element | Element |
nein | keine definiert |
Dreamweaver
<p>, <h1> … <h5>, <pre>: Menü: Text | Absatzformat; oder Fenster: Eigenschaften | Format
<blockquote>: Menü: Einfügen | HTML | Textobjekte | Blockzitat; oder leider Menü: Text | Einzug
<br>: Umschalt+Eingabetaste; oder Menü: Einfügen | HTML | Sonderzeichen | Zeilenumbruch
<hr>:
Menü Einfügen | HTML | Horizontale Linie
