HTML Elemente

HTML Elemente

HTML Block Elemente

Block Zitate

<blockquote cite="Shakespeare">
	<p>To be, or not to be, that is the question</p>
	<footer><cite>Hamlet</cite> von Shakespeare</footer>
</blockquote>

To be, or not to be, that is the question

Hamlet von Shakespeare

Definitionsliste

<dl>
	<dt>Begriff</dt>
	<dd>Beschreibung</dd>
</dl>
Begriff
Beschreibung

Überschrift erster Ordnung

<h1>Überschrift</h1>

Überschrift

Die Überschrift erster Ordnung sollte als Hauptüberschrift der Seite verwendet werden.

hHeading → Überschrift

Überschrift zweiter Ordnung

<h2>Überschrift</h2>

Überschrift

Überschriften zweiter Ordnung eigen sich beispielsweise für Artikel.

Überschrift dritter Ordnung

<h3>Überschrift</h3>

Überschrift

Überschrift dritter Ordnung z.B. für Kommentare.

Überschrift vierter Ordnung

<h4>Überschrift</h4>

Überschrift

Überschrift fünter Ordnung

<h5>Überschrift</h5>

Überschrift

Überschrift sechster Ordnung

<h6>Überschrift</h6>

Überschrift

Nummerierte Liste

<ol>
	<li>eine einfache</li>
	<li>nummerierte Liste</li>
</ol>
  1. eine einfache
  2. nummerierte Liste

Absatz

<p>Ein einfacher Textabsatz.</p>

Ein einfacher Textabsatz.

pParagraph → Absatz

Quellcode

<pre><code>a &ne; b</code></pre>
a ≠ b

Tabelle


<table>
	<tr>
		<td>Spalte 1</td>
		<td>Spalte 2</td>
	</tr>
	<tr>
		<td>Eintrag</td>
		<td>Eintrag</td>
	</tr>
</table>
Spalte 1 Spalte 2
Eintrag Eintrag

Die oben gezeigte Tabelle ist ein einfaches Beispiel für eine kleine Tabelle. Für größere Tabellen können weitere Elemente verwendet werden, wie im folgenden Beispiel zu sehen ist.

<table>
 <caption>Komfortable Tabelle</caption>
 <thead>
  <tr>
   <th>Attribut</th>
   <th>Funktion</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td colspan="2">Erstellt von <a href="http://lektion1.de">Lektion1.de</a></td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td rowspan="2">Attribute colspan and rowspan</td>
   <td>Verbindet Spalten (colspan)</td>
 </tr>
 <tr>
   <td>Verbindet Zeilen (rowspan)</td>
  </tr>
 </tbody>
</table>

Das Ergebnis sieht dann etwa wie folgt aus.

Komfortable Tabelle
Attribut Funktion
Erstellt von Lektion1.de
Attribute colspan and rowspan Verbindet Spalten (colspan)
Verbindet Zeilen (rowspan)

Aufzählungsliste

<ul>
	<li>eine einfache</li>
	<li>Aufzählungsliste</li>
</ul>

HTML Text Elemente

Text abkürzen

<abbr title='Abkürzungen'>Abk.</abbr>

Abk.

abbrAbreviation → Abkürzung

Text fett darstellen

Ein <b>fett</b> gedruckter Text.

Ein fett gedruckter Text.

Der Text wird lediglich optisch fett dargestellt. Soll z.B. für die Suchmaschinen eine besondere Relevanz mitgegeben werden muss der Text mit <strong> ausgezeichnet werden.

Text referenzieren

Der Ausspruch <q>Gott würfelt nicht</q> wird <cite>Albert Einstein</cite> zugerechnet.

Der Ausspruch Gott würfelt nicht wird Albert Einstein zugerechnet.

Siehe auch Text Zitate <q>.

Text als Code anzeigen

<code>Computercode</code>

Computercode

Text als entfernt markieren

<del>entfernter Text</del>

entfernter Text

Text betonen

Ein <em>wichtiger</em> Text.

Ein wichtiger Text.

Die Bedeutung des Textes wird unter anderem z.B. an Suchmaschinen weiter gegeben. Siehe auch Text stark betonen mit <strong>.

Text als besonderen Text ausgeben

Ein <i>besonderer</i> Text.

Ein besonderer Text.

Der Text wird lediglich optisch kursiv dargestellt. Soll z.B. für die Suchmaschinen eine Relevanz mitgegeben werden muss der Text mit <em> ausgezeichnet werden.

Text als eingefügt anzeigen

<ins>eingefügter Text</ins>

eingefügter Text

Text als Benutzereingabe darstellen

<kbd>Keyboard</kbd>

Keyboard

Text markieren

<mark>Markierter Text</mark>

Markierter Text

Text zitieren

Der Ausspruch <q>Gott würfelt nicht</q> wird <cite>Albert Einstein</cite> zugerechnet.

Der Ausspruch Gott würfelt nicht wird Albert Einstein zugerechnet.

Siehe auch Text Referenz <cite>.

Text als Computerausgabe anzeigen

<samp>Ausgabe</samp>

Ausgabe

Text umfassen

<span>Einzelne Wörter oder Text umfassen</span>

Einzelne Wörter oder Text umfassen

Wird für die Formatierung mit CSS verwendet.

Text stark betonen

Ein <strong>stark betonter</strong> Text.

Ein stark betonter Text.

Die Bedeutung des Textes wird unter anderem z.B. an Suchmaschinen weiter gegeben. Siehe auch Text betonen mit <em>.

Text tief stellen

Sauerstoff O<sub>2</sub>

Sauerstoff O2

Eselsbrücke: sub → subway → U-Bahn fährt tief → Text tief

Text hoch stellen

Quadrat<sup>2<sup>

Quadrat2

Eselsbrücke: sup → superman → fliegt hoch → Text hoch

Text als Variable

<var>Variable</var>

Variable

Navigation