HTML: Überschriften & Absätze

In HTML gibt es mehrere Textformen/-arten. Diese werden separat bestimmt und unterscheiden sich von den anderen. Neben dem 'normalen' Text gibt es auch noch andere Textformen, die wir Ihnen hier näherbringen möchten. Grundsätzlich werden alle Textformen von den jeweiligen Tags umschlossen.

Absatz

Absätze werden mit dem p-Element definiert. Dieses Element umschließt dann alle anderen Elemente, die zusammen in einem Absatz zusammengefasst werden sollen. Beispiel:

<p>
	<img src="bild.gif">
	<span>Text</span>
	Sonstige Angaben
</p> 

Überschrift

Allgemein ist eine Überschrift immer mit <hx>...</hx> zu notieren. An Stelle des x kommt dann eine Zahl, welche die Stellung der Überschrift angeben soll. Dabei das man die Reihenfolge genau einhält. ALs Überschrift 1 nimmt man immer nur eine Überschrift. Die direkt dahinter liegende Überschrift kann dann nur eine Überschrift 2 sein.

<h1>Überschrift </h1>
<h2>Überschrift 1</h2>
<h3>Überschrift 1.1</h3>
<h2>Überschrift 2</h2>
<h3>Überschrift 2.0</h3>
<h4>Überschrift 2.0.1</h4>
<h5>Überschrift 2.0.0.1</h5>
<h6>Überschrift 2.0.0.0.1</h6> 

Die Überschriften werden durch ihre Unterschiedlichen Größen voneinander unterschieden. Das heißt, h1 ist die größte, h6 die kleinste Überschrift.

Zitate

Zitate werden mit dem blockquote- oder dem q-Element umschlossen. Diese werden dann vom Browser bei der Darstellung etwas anders dargestellt als normalen Text. blockquote bildet einen eigenen Block. q wird als Zitat innerhalb eines fortlaufenden Textes verwendet und bildet keinen eigenen Block. Beispiel:

<blockquote> normales Zitat </blockquote>
<blockquote><u> unterstrichenes Zitat </u></blockquote> 
<q> normaler Zitattext <strong> fetter Zitattext </strong></q> 

Literaturauszug

Literauturauszüge können Sie mit dem cite-Element einfügen. Dies kann verwendet werden, wenn Sie zum Beispiel Texte aus anderer Literatur herausschreiben. Beispiel:

<cite> Literaturtext </cite> 

Quelltext

Wenn Sie Quelltexte oder Computercode in Ihrem Dokument verwenden möchten, können Sie dazu den code-Element benutzen. Beispiel:

<code> Quelltext </code> 

Adressen

Wenn Sie Adressen in Ihre Seiten einbauen, können Sie das address-Element verwenden. Adressen werden als eigenständiger Block dargestellt. Beispiel:

<adresse> Name,<br>
Straße,<br>
Postfach,<br>
etc.
</adresse> 

Dazu ist zu sagen, dass <br> einen Zeilenumbruch darstellt, der aber auch weggelassen werden kann. Allerdings wird dann auch kein Zeilenumbruch angezeigt und die gesammte Adresse ist hintereinander stehend.

Definition

Um Definitionen in Ihre Seite einzufügen, können Sie das dfn-Element verwenden. Es fügt sich in die vorhergehende Zeile mit ein. Beispiel:

<dfn> Definitionstext </dfn> 

Akronym

Akronyme (aus den Anfangsbuchstaben mehrerer Wörter gebildetes Kurzwort, Initialwort, z.B. AGFA, UNO) können Sie mit dem acronym-Element bestimmen. Beispiel:

<acronym> Akronym </acronym> 

Gelöschter und eingefügter Text

Um die Darstellung von gelöschtem Text zu ermöglichen, können Sie das del-Element verwenden, für die Darstellung von eingefügtem Text das ins-Element. Gelöschter Text wird durchgestrichen, eingefügter Text unterstrichen, dargestellt. Beispiel:

<del> gelöschter Text </del>

<ins> eingefügter Text </ins> 

Präformierter Text

Präformierter Text, also Text der vorformatiert wurde, können Sie mit dem pre-Element notieren. Sämtliche Zeilenumbrüche, Leerzeichen und Sonderzeichen werden dann als solche dargestellt und nicht zusammengefasst. Beispiel:

<pre>
  Ich
    bin 
      formatiert!
</pre> 

Abkürzungen

Abkürzungen können Sie mit dem abbr-Element (abbr = Abbrevation engl. Abkürzung) verdeutlichen. Beispiel:

<abbr> etc.</abbr>
<abbr> usw.</abbr> 

Achten Sie darauf, dass es meist keine sichtbaren/visuellen Unterschiede gibt, ob das Element gesezt wurde oder nicht. Es besteht lediglich eine inhaltliche Vervollkommnung.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Hyperlinks und Anker

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project