Logische Tags

Auf dieser Seite:

Bei den Tags handelt es sich vor allem um eine logische Auszeichnung, welche ein Dokument in elementare Abschnitte unterteilt, die durch gewisse Inhalte bestimmt wird: Ist dieser Text ein Titel, ein normaler Absatz, etwas zu Betonendes, ein Zitat, eine Liste, befindet er sich in der Navigation, im Artikel oder in einer extra Spalte? Das Konzept der logischen Tags macht Inhalte auffindbar.

Elemente

Es wird zwischen absatzbildenden Block-Elementen (fügen meistens oberhalb und unterhalb ihrer selbst einen Abstand ein) und den Textfluss nicht beeinträchtigenden Inline-Elementen unterschieden. Die Block-Elemente können ineinander verschachtelt werden und können natürlich Inline-Elemente beinhalten (siehe Doctype strict). Die Inline-Elemente müssen immer von Block-Elementen umschlossen sein und können keine Block-Elemente beinhalten.

Tags für Block-Elemente

Ein Artikel besteht aus einer Folge von Absätzen. Es gibt viele unterschiedliche Absatz- oder Block-Tags, die im Folgenden behandelt werden.

Achtung: HTML unterscheidet nicht mit Tags, ob ein Absatz links- oder rechtsbündig, im Blocksatz oder zentriert ist. Stil-Angaben werden mittels (CSS) notiert!

...

Beispiel: Dies ist ein ganz normaler Text-Absatz (paragraph).

Je nach Tag erzeugen die Browser von sich aus z.B. kursiven, fetten, gösseren oder eingerückten Text mit mehr oder weniger Abständen. Diese rudimentäre Darstellung dient aber bloss der Unterscheidung, die Gestaltung muss unbedingt durch CSS erstellt werden.

<h3>...</h3>

Auch Titel sind Absätze. Einen Titel würden Sie grösser und fetter als normalen Text darstellen wollen, aber was Sie damit aussagen möchten ist nicht: Ich bin ein grosser, fetter Text, sondern ich bin ein Titel. Mit den HTML-Tags bezeichnen Sie also die logische Bestimmung, nicht das Aussehen; zur physischen Formatierung werden sie später wie gesagt CSS nutzen wollen.

Es gibt 6 hierarchische Titel, sie sollten konsistent verwendet werden, damit sie (via PHP) für Verzeichnisse ausgewählt werden können (beispielsweise):

h1 (ein einmaliger Seitentitel, entspricht in etwa einem Kapitel-Titel)
h2 (Artikel-Titel, davon kann es schon mehrere je Seite haben)
h3 (Zwischen-Titel oder Untertitel)
h4 (Absatz-Titel)
h5 (z.B. Zitat-Titel)
h6 (z.B. Bild-Titel)

Als Beispiele sehen Sie die auf dieser Seite verwendeten Titel der Ordnung h1 (Seitentitel), h2 (Zwischentitel) und h4 (Tagtitel).

<blockquote>...</blockquote>

Ein Absatz kann als Zitat-Block ausgezeichnet werden.

<address>...</address>

Das Adressen-Element darf keine Absätze oder Zeilenumbrüche enthalten.
Beispiel:

Marcel Biefer, info@biefer.com

<figure>Bilder<figcaption>Legende</figcaption></figure>

Das 'figure'-Element und die dazugehörige Überschrift 'figcaption' wurden in HTML 5 hinzugefügt, um z.B. Abbildungen mit einer Bildunterschrift als ein zusammengehöriges Element zu behandeln. Es braucht sich nicht nur um Bilder zu handeln, und die Legende kann auch darüber positioniert werden. Ohne HTML 5 Kompatibilität wird alles in einer Zeile dargestellt.
Beispiel:

<details><summary>Teaser</summary>Text</details>

Das 'summary'-Element und das dazugehörige 'details' sind auch erst in HTML 5 hinzugekommen. Während der Inhalt von 'summary' immer angezeigt wird, erscheinen die 'details' erst auf Verlangen (wie ein Ausklappmenü) bei einem Klick auf 'summary'. Ohne das 'summary'-Element erscheint über dem 'details'-Element eine Taste auf der "Details" steht und die angeklickt werden kann, um die Details zu öffnen.
Beispiel:

Ich bin ein Teaser (mehr ...)

Ich bin ein langer Text, der ausgeklappt wird, wenn auf den Teaser geklickt wird. Browser, die nicht HTML 5 können, stellen mich einfach nach dem Teaser dar.

Container Tag

<div>...</div>

Der div-Tag, ist für diverse Zwecke verwendbar, er generiert keine Abstände, lediglich einen Zeilenumbruch, dennoch ist er ein Block-Element.

Das div-Tag wird durch CSS zu einem frei positioniebaren Bereich (Container oder auch Box genannt). Mit Hilfe von JavaScript wurde der Container repositionierbar; DHTML (dynamisches HTML) wurde möglich und propagiert.
Das div-Tag mit class- oder id-Attribut und CSS ist zum beherrschenden Element der Webseiten-Struktur geworden und hat die bis dahin als Layoutraster missbrauchte Tabelle abgelöst. Nun wird es seinerseits durch die strukturierenden Elemente in HTML 5 abgelöst.

Strukturierende Tags in HTML 5

'header', 'footer', 'nav', 'aside', 'hgroup', 'article', 'section'

Diese in HTML 5 hinzugefügten Elemente strukturieren eine Seite, indem sie zusammengehörige Absätze gruppieren. Was bei den div-Boxes mittels class- oder id-Attributen zugeordnet wurde, wird durch ein strukturierendes Element direkt benannt, welche Art von Inhalt sich in ihm befindet. Zum Beispiel bezeichnet 'nav' ein Menü, 'article' einen Artikel, 'section' einen Abschnitt eines Textes, 'header' den Seitenkopf oder 'footer' den Seitenfuss.

Die horizontale Trennlinie

<hr />

Dies ist ein waagerechtes Trennelement (horizontal ruler), die Linie hat nur ein Opentag, denn sie beinhaltet ja nichts (allerdings muss sie im strict mode als 'leer' gekennzeichnet werden durch den Slash am Ende). Die Linie ist ziemlich hässlich, aber sie sollte eigentlich bloss aneinandergereihte Unterstriche unnötig machen. Inzwischen lässt sie sich durch Stilangaben (CSS) beliebig verändern.

Es gibt strukturierende Tags und Absatz-Tags (beide blockbildend) und es gibt Inline-Tags.

Tags für Inline-Elemente

Es folgen hier die Tags zur Auszeichnnung von Zeilen oder Teilen davon, also keine ganzen Absätze.

und

Nach einem Tag (break) wird eine neue Linie begonnen, es hat ausnahmsweise kein Endtag.
Das Tag soll eine weiche Trennung erzeugen (Sollbruchstelle).
Wärend ein Tag den Umbruch erzwingt, wird der Tag ignoriert, wenn die Zeile Platz hat. (Dieses Tag existiert schon, gilt aber erst in HTML 5 als standardkonform!)

...

Die ... Tags unterdrücken einen Zeilenumbruch in Fällen, wo eine Wortkombination zusammen bleiben soll (Fenster stark verbreitern und verkleinern zum Spielen). (Dieses Tag existiert in XHTML nicht mehr und auch in HTML 5 ist er obsolete! Der CSS style='white-space: nowrap' in einem span-Tag wird als Ersatz benutzt.)

...

Um Inline (innerhalb der Zeile) etwas Auszuzeichnungen steht dieser Tag zur Verfügung, er generiert gar keinen whitespace, so kann mit ihm sogar ein einzelner Buchstabe in einem Wort gesondert bearbeitet werden.

<abbr>...</abbr>

Eine Abkürzung wie ABBR kann auffindbar gemacht werden, indem sie im Code gekennzeichnet wird.

<cite>...</cite>

Ich bin etwas Zitiertes (z.B. ein Buchtitel), ich bin aber kein Absatz, welcher in Zitat und Verfasser gegliedert wäre.

<samp>...</samp>

Ich bin ein Beispiel.

<code>...</code>

Ich bin ein Code Ich werde normalerweise nicht gelb hinterlegt, der gelbe Hintergrund ist in einem CSS definiert.

<dfn>...</dfn>

Ich beinhalte eine Definition

<var>...</var>

Ich bin ein variabler Text.

<kbd>...</kbd>

Ich kennzeichne eine erwartete/empfangene Tastatureingabe: j/n . Ich bedeute KeyBorD, aber meine Eselsbrücke ist KälBerDarm. (In gewissem Sinne bin ich ein Formular-Element.)

<del>...</del>

Ich ~~bin ein ungültiger Text, ich~~ wurde deletet und ersetzt.

<ins>...</ins>

Ich bin ein eingefügter Text, ich habe deletet ersetzt.

<bdo>...</bdo>

bdo steht für Bi-directional Override, das bdo-Tag bestimmt die Textrichtung. Das bdo-Tag hat das Attribut 'dir' mit den Werten 'rtl' oder 'ltr' (von rechts nach links oder von links nach rechts), einer davon muss gesetzt sein.
Beispiel <bdo dir='rtl'>Marcel</bdo>: Marcel

Doch noch Tags für Formate?

...

Ich bin eine Hervorhebung (empatisch oder emotional).

...

Ich bin eine (starke) Betonung. Auch Sprachausgabegeräte betonen mich! Würde man stattdessen einfach fett schreiben, wäre das rein optisch nicht unterscheidbar.

Inline-Tags seit HTML 5

Da HTML 5 erst 2014 ein offizieller Standard wird, werden hier noch nicht alle geplanten Tags aufgelistet.

...

Eine Markierung eines Textabschnitts, braucht keine Hervorhebung zu sein, könnte auch als Sprungziel dienen.

<time>...</time>

Für Zeitangaben, die dynamisch auffindbar werden (ohne Beispiel).

<progress>...</progress>

Für dynamisch berechnete Statusangaben wie Ladezustand (ohne Beispiel).

(Die HTML 5 Tags verhindern natürlich eine korrekte Validierung als XHTML 1.0.)

Attribute

Ein Element kann Attribute haben. Die Attribute sind Namen/Wert-Paare und geben Auskunft oder Anweisungen zu den Eigenschaften eines Elements. Es wird unterschieden in globale Attribute (Attribute, welche in jedem Tag vorkommen können) und proprietäre Attribute (Attribute, welche nur in diesem Tag Sinn ergeben oder erforderlich sind). Proprietäre Attribute sind häuffig obligatorisch (siehe bei den jeweiligen Tags), globale Attribute können bei Bedarf angegeben werden. Die wichtigsten globalen Attribute sind:

name: der Name des Elements
id: die exklusive Identität
class: die Zugehörigkeit zu einer CSS Stiel-Gruppe
title: ein Text, der beim Mouseover in einem kleinen Tooltipp-Fenster oder in der Statusleiste erscheint
style: der zugeordnete inline-Siel
lang: Sprachangabe
itemprop: Eigenschaft aus einem Datenset von Mikrodaten

title='...'

Das Tag-Attribut 'title' ist global, d.h. es ist in jedem Tag einsetzbar. Title erzeugt einen interaktiven Bereich, welcher bei Mausberührung einen beliebigen Text einblendet:
title="Ich bin der zu erscheinende Text." Das Title-Attribut macht in einigen Inline-Elementen besonders viel Sinn (z.B. in ABBR, wo es sogar zwingend ist).

Weitere Tags

Einige Tags sind komplexer und bedürfen einer eingehenderen Beschreibung auf eigenen Seiten.

Verschachtelte Tags

Einige blockbildende Tags werden ineinader verschachtelt und können nicht unabhängig voneinander verwendet werden. Sie erzeugen z.B. Listen, Tabellen, Formulare, etc. und werden auf eigenen Seiten behandelt.

<a>...</a>

Das Anker-Tag ist ein Inline-Tag welches Interaktivität herstellt, Links werden nicht nur gekennzeichnet, sondern eine Funktionalität wird erzeugt (siehe eigene Seite).
Das Anker-Element benötigt zwingend das Attribut href="...".

<img>...</img>

Das Image-Tag ist auch ein Inline-Tag, es stellt Bilder dar (siehe eigene Seite). Die Zeile wird dabei so hoch, wie das grösste Bild in ihr.
Das Image-Element benötigt zwingend die Attribute src="..." und alt="...".

Check den Code.

Formatierende Tags >> << Quellcode und Browser

Ich bin hier: > HTML Lehrling >> Logische Tags