HTML Tags

HTML-Dateien bestehen aus Text, der wiederum in einzelne Elemente unterteilt ist. Um den Quelltext eines HTML-Dokuments auszuzeichnen, werden HTML Tags verwendet. Die Art der verwendeten Tags entscheidet darüber, wie das Dokument zum Beispiel in einem Browser dargestellt wird.

Aufbau

Einleitende HTML Tags werden immer in spitze Klammern gesetzt.

 <einleitendes HTML Tag>

Abschließende HTML Tags beinhalten noch einen Schrägstrich innerhalb der Klammer.

 </ abschließendes HTML Tag>

HTML Tags, die keinen abschließenden Teil benötigen, nennt man Standalone Tags. Grundsätzlich wird empfohlen alle Tags klein zu schreiben. Auf diese Weise entstehen keine Probleme mit XHTML, wo nur Kleinbuchstaben erlaubt sind.

Ergänzende Angaben zu HTML Tags stehen in Anführungszeichen und werden ohne Komma eingeführt.

Aufbau-Beispiel

 <img src=“Bild-URL“ align=“left“> 

Dieses Bild stammt von einer Online-Quelle und wird linksbündig in das Dokument eingefügt.

Header-Elemente

Strukturierende HTML Tags

Diese HTML Tags strukturieren einen Text.

•  <h1-6>…</h1-6> 

Mit diesem Tag wird eine Überschrift ausgezeichnet. In einem HTML-Dokument sollte die Reihenfolge der Überschriften-Tags chronologisch in aufsteigender Größe erfolgen. Es sollte also keine mit h1 getaggte Überschrift nach einer mit h2 getaggten Überschrift stehen.

•  <p>...</p> 

Hiermit wird ein kompletter Absatz innerhalb eines Textes definiert.

•  <div>…</div> 

Damit kann ein allgemeines Blockelement ausgezeichnet werden.

•  <hr ….>

Auf diese Weise wird eine horizontale Trennlinie in das HTML-Dokument eingefügt. Mit zusätzlichen Angaben können die Größe und die Dicke der Linie sowie deren Position bestimmt werden. Beispiele:

 <hr align=“left“> 

horizontale Trennlinie linksbündig

 <hr align=“center“ width=“150“ size=“2“ color=“#FBFBEF“> 

zentrierte Trennlinie in der Länge 150 Pixel und der Dicke von zwei Pixeln in Weiß

•  <div>…</div> 

Dabei handelt es sich um ein komplettes Blockelement, das innerhalb dieser Tags eingefügt wird. Die Tags stehen normalerweise nicht alleine, sondern der User kann die Formatierung des gesamten Blocks noch spezifizieren.

Beispiel:

 <div class style="font-family:sans-serif; font-size:11pt" align=“left“> 

Die Schriftgröße dieses Blocks ist 11, die Schriftart Sans-Serif. Der gesamte Text ist linksbündig ausgerichtet.

•  </br>

Mit diesem Tag wird ein Zeilenumbruch eingefügt. Zusätzlich lässt sich das Tag auch erweitern.

Beispiel:

 <br clear=“left“> 

So wird bei eingefügten Bildern dafür gesorgt, dass der Text linksbündig darumfließt.

•  <pre>…

Auf diese Weise kann ein vorformatierter Text exakt übernommen werden.

Tags für Texte und Schriftarten

Diese Tags formatieren die Schrift. Damit lassen sich unter anderem einzelne Wörter fett oder kursiv darstellen.

•  <span>…</span>

Damit lassen sich Inline-Elemente, wie zum Beispiel fett geschriebene Wörter, per CSS definieren.

Beispiel:

 <span style="font-weight: bold;">fett geschriebenes Wort</span>

•  <blockquote>…</blockquote>

Der Text innerhalb dieser Tags ist ein Zitat einer anderen Quelle.

•  <font>…</font>

Dieses Tag konfiguriert die Schriftfarbe, die Schriftart sowie die Größe nach dem alten HTML-Standard.

Beispiel:

<font face=“Arial“ size=“2“>…</font>

Der Text innerhalb des Tags ist dann in Arial in der Schriftgröße 2 geschrieben.

• <b>…</b>

Dieses Tag wird für fettgeschriebene Wörter verwendet.

•  <dfn>…</dfn>

Damit wird eine Definition markiert.

•  <cite>…</cite>

Damit wird der Titel einer Arbeit zitiert.

•  <code>…</code>

So lässt sich Computercode grafisch darstellen.

•  <i>…</i>

Text, der innerhalb dieser Tags steht, wird kursiv ausgegeben.

•  <u>…</u>'''  oder '''<ins>…</ins>

Damit lassen sich Wörter unterstreichen.

•  <tt>...</tt>

Wer die Schrift einer Schreibmaschine imitieren möchte, nutzt diese Tags.

•  <big>...</big>

Damit wird die Schrift sehr groß ausgegeben.

•  <em>…</em>

Diese Tags heben einen Text hervor.

•  <small>...</small>

Werden diese Tags gesetzt, ist die Schrift klein.

•  <q>…</q>

So können kurze Zitate ausgezeichnet werden.

•  <strike>...</strike>''' oder '''<del>...</del>

Damit lassen sich Wörter durchstreichen. In Blogs ist dies ein häufig verwendetes Stilmittel, um das zuvor geschriebene hervorzuheben oder um zu zeigen, dass die durchgestrichenen Wörter nicht mehr gültig sind.

•  <sub>...</sub>''' oder '''<sup>...</sup>

Mit diesen Tags können Wörter tief gestellt werden.

Bilder Tags

Auch Bilder lassen sich mit HTML-Tags in Dokumente einbinden und formatieren.

•  <img src="URL">

Dieser Tag gibt die Bildquelle an. Für die Formatierung gibt es weitere Parameter, welche die Bildwiedergabe und die Auszeichnung des Bildes regeln.

•  alt="..."

Gibt den Bildinhalt wieder, wenn ein Browser keine Bilder lädt

•  border=“…“ 

Gibt dem Bild einen Rahmen

•  height=“...“ und width=“...“ 

Diese Größenangaben können dabei helfen, dass Bilder schneller geladen werden.

•  hspace=“...“ und vspace=“...“

Definieren den Abstand des Bildes zum Text

•  align=["top"|"middle"|"bottom"|"left"|"right"] 

Ordnet das Bild im Verhältnis zum Folgetext an

•  ismap/usemap="..."

Damit lassen sich Hyperlinks in ein Bild einbetten (verweissensitive Grafiken)

•  area=“…“ 

Gibt die Bereiche des Bildes an, wo Links eingefügt werden

•  shape=“…“ 

Hiermit wird die Form des anklickbaren Bereichs angegeben

•  <map name="...">

Gibt den Namen einer verweissensitiven Grafik an.

Tags für Hyperlinks

Auch Hyperlinks werden mit HTML Tags ausgezeichnet.

•  <a href="URL">...</a>

Diese Tags verlinken einen Text, ein Bild oder ein anderes Element des HTML-Codes. Wenn das Dokument in einem neuen Fenster geöffnet werden soll, wird das Tag ergänzt mit target=“_blank“.

•  <a name="...">...</a>

Mit diesem Text wird ein Zielanker innerhalb eines Dokumentes verlinkt.

•  <a href="#...">...</a>

Hier wird im Quellcode hinterlegt, dass der Link auf einen Anker im gleichen Dokument verweisen soll.

•  <a href="URL#...">...</a>

Ein so getaggter Hyperlink verweist auf eine spezifische Textstellen in einem anderen HTML-Dokument oder einer Webseite.

•  <a href="mailto:...@...">...</a>

Hyperlink auf E-Mail-Adresse. Z.B.

 <a href="mailto:MeinName@MeinProvider.de">E-Mail</a>

Tags für Listen und Tabellen

Mit Hilfe von HTML Tags lassen sich komplette Listen anzeigen.

•  <dl><dt>...</dt><dd>...</dd><dt>...</dt><dd>...</dd></dl>

Diese Tags werden für Glossare und Definitionslisten genutzt.

•  <li>…</li>

Diese Tags umklammern einzelne Elemente einer Liste und markieren einzelne Zeilen innerhalb der Liste.

•  <ol type=["1"|"I"|"A"|"a"] start=...> <li>...</li><li>...</li></ol>

Auf diese Weise lässt sich eine geordnete Liste erzeugen, die jeweils mit Zahlen, römischen Zahlen, Großbuchstaben oder Kleinbuchstaben geordnet wird. Mit start wird der Startwert der Liste definiert.

Beispiel:

 <ol type=["1"] start=3> <li>...</li><li>...</li></ol>

Hierbei handelt es sich um eine geordnete Liste, die mit der Zahl drei startet.

•  <ul type=["square"|"disc"|"circle"]><li>...</li><li>...</li></ul>

So wird eine ungeordnete Liste markiert. Alle Unterpunkte erhalten das gleiche Aufzählungszeichen (type).

•  <table>…</table>

Diese Tags fügen eine Tabelle in das Dokument ein. Für die Definition der Tabelle stehen weitere Möglichkeiten wie bei Bildern zur Verfügung. Darüber hinaus kann mit background=“…“ ein Bildhintergrund eingefügt werden. Mit cellpadding/cellspacing=“…“ können Rahmenbreite und Zellenabstände definiert werden.

•  <tr>...</tr>

Diese Markierung betrifft alle Inhalte einer Tabellenzeile.

•  <td>...</td>

Diese Tags definieren eine einzelne Zelle einer Tabelle.

Weitere HTML Tags in alphabetischer Reihenfolge

•  <!--...-->

Mit diesen Tags kann ein Kommentar in ein HTML-Dokument gefügt werden.

•  <!DOCTYPE>

Darüber kann der Dokumenttyp definiert werden

•  <abbr>

Damit lässt sich eine Abkürzung angeben.

•  <address>

Dieses Tag liefert Informationen zum Ersteller oder Besitzer des HTML-Dokuments.

•  <article>

Mit diesem Tag lässt sich ein Artikel definieren.

•  <aside>

Mit diesem Text kann Content unabhängig vom Inhalt des Dokuments ausgezeichnet werden.

•  <audio>

Damit werden Audio-Elemente markiert.

•  <base>

Dieses Tag markiert die Basis-URL für alle relativen URLs innerhalb des Dokuments.

•  <body>…</body>

Diese Tags definieren den Dokumentenkorpus.

•  <button>…</button>

Damit kann ein anklickbarer Button im Dokument markiert werden.

•  <canvas>…</canvas>

Diese Tags werden verwendet, um Grafiken über JavaScript einzubinden.

•  <datalist>…</datalist>

Damit lassen sich vordefinierte Optionen für Eingaben einfügen.

•  <details>…</details>

Diese Angaben kann der Nutzer ansehen oder verstecken.

•  <dialog>…</dialog>

Mit diesen Tags wird eine Dialogbox definiert.

•  <embed>…</embed>

Damit lassen sich andere Elemente einer externen Quelle (zum Beispiel Videos von YouTube) in ein HTML-Dokument einbinden.

•  <footer>…</footer>

Diese Tags definieren den Footer-Bereich einer Webseite.

•  <form>…</form>

Mit diesen Tags wird ein Formular definiert, in das ein User Zahlen oder Texte eingeben kann.

•  <head>…</head>

Zwischen diesen Tags stehen Informationen über das Dokument. Diese Elemente werden auch Meta Tags genannt.

•  <header>…</header>

Darüber lässt sich ein Header für ein Dokument definieren.

•  <html>…</html>

So kann der Root eines HTML-Dokuments fixiert werden.

•  <iframe>…</iframe>

Damit können Dokumente mit Inhalten aus iframes angereichert werden.

•  <link>…</link>

Darüber wird die Verbindung zwischen einem Dokument und einer externen Quelle definiert.

•  <main>…</main>

So lässt sich der Hauptinhalt einer Webseite markieren.

•  <meta>

Dieser Tag markiert die Meta-Angaben eines HTML-Dokuments.

•  <nav>…</nav>

Damit können Navigationslinks ausgezeichnet werden.

•  <noscript>…</noscript>

So lassen sich alternative Inhalte für Nutzer hinterlegen, deren Browser bestimmte Skripte nicht laden können.

•  <object>…</object>

So können eingebettete Objekte definiert werden.

•  <script>…</script>

Damit wird ein client-seitiges Skript ausgezeichnet.

•  <source>…</source>

Auf diese Weise können verschiedene Multimedia-Ressourcen definiert werden.

•  <time>…</time>

Diese Tags markieren ein Datum und/oder eine Uhrzeit für das Dokument.

•  <title>…</title>

Damit wird ein Titel für die Webseite hinterlegt.

Nutzen für Suchmaschinenoptimierung

Für die Onpage-Optimierung von Webseiten sind HTML Tags wichtig. Denn mit textstrukturierenden Tags lassen sich die Usability und der Lesefluss einer Webseite steigern. Hierzu dienen vor allem die textstrukturierende HTML Tags. Doch zugleich sorgt eine übersichtliche Auszeichnung des Contents dafür, dass Bots die Webseite besser und schneller crawlen können.

Elemente wie der Seitentitel sind auch rankingrelevant. Aus diesem Grund sollte diesem Tag bei der Optimierung besondere Aufmerksamkeit verliehen werden.

Weblinks

• Umfangreiche Liste mit HTML Tags