Inline-Elemente in HTML

Nach den Block- Elementen jetzt noch ein paar Dinge zu Inline- Elementen!

Inline- Elemente sind sehr vielseitig zu verwenden. Sie sind dazu gedacht 'inline' (also im Text­fluss, ohne einen Zeilen­umbruch einzu­fügen) die unter­schied­lich­sten Dinge zu erzielen. Sie können beliebig in Block- Elementen verwendet werden, dürfen selber aller­dings keine Block- Elemente enthalten.
Na ja.. auch hier gilt, keine Regel ohne Ausnahme, aber die Details zu den Ver­schachtel­ungs­regeln der einzelnen Elemente findest du wieder bei SelfHTML.

Einige dieser Inline- Elemente fügen ein Element in dein Weseite ein - z.B. einen Hyperlink <a>, einen Button <button>, ein Bild <img>, eine Eingabe <input> und noch einiges mehr.
Andere wirken sich direkt auf die Text­format­ierung aus - z.B. <b>, <cite>, <i> und und und..
Und wieder andere machen eigentlich gar nichts, was man so recht sehen kann. Sie kenn­zeichnen Bereiche für andere Zwecke - z.B. <area>, <script>, <style>... aber was soll ich dir das alles in epischer Breite erzählen - schau es dir in der folgenden Liste einfach selber an!
Durch anklicken des HTML- Tags kommst du direkt zu den Detail­infor­mationen bei SelfHTML!

Die Liste ist alphabetisch sortiert.

<a>

Fügt einen Verweis (Hyperlink) und Anker für Verweise ein

Beispiel: Ein Hyperlink

<abbr>

Kennzeichnet/Formatiert Text als Abkürzung

Beispiel: Eine Abkürzung

<area>

Verweis-sensitiver Bereich in einer Image-Map-Grafik

<b>

Stilistische Hervorhebung im Text ohne dabei eine andere Wertigkeit zu erhalten

Beispiel: Ein Satz mit'b'

<base>

Basis-URL für Referenzen

<bdi>

Definiert einen Bereich für bidirektionalen Text

<bdo>

Richtungsänderung bei bidirektionalem Text

<br>

Fügt einen erzwungener Zeilenumbruch an entsprechender Stelle ein

<button>

Fügt eine Schaltfläche/Button in einem Formular ein

Beispiel: Eine Button

<caption>

Tabellenüberschrift / -Legende

<cite>

Fügt ein Zitat innerhalb eines Absatzes ein

Beispiel: Eine Zitat

<code>

Fügt Quelltext-Auszug innerhalb eines Absatzes ein

Beispiel: so sieht die Darstellung von Quellcode aus

<col>

Tabellenspalte

<colgroup>

Gruppe von Tabellenspalten

<datalist>

Gruppiert die Auswahl­möglichkeiten für die Benutzer­eingabe (nur in HTML 5)

<dd>

Definition, Beschreibung, detaillierter Inhalt zu einem dt-Element

<details>

Beinhaltet zusätzliche Informationen zu einem Doku­menten­inhalt (nur in HTML 5)

<dfn>

Definition innerhalb eines Absatzes

Beispiel: Eine Definition

<dt>

Zu definierender Ausdruck in einer Definitions­liste, Sprechername in einem Dialog usw.

<em>

Darstellung eines Textes der Ausdrucksstärke widerspiegelt - nicht Wichtigkeit (üblicherweise kursiv dargestellt)

Beispiel: Eine Text in 'em'

<embed>

Einbindung von nicht definierten Medien­inhalten (nur in HTML 5)

<i>

Darstellung eines Textes, der einer "anderen Stimme oder Stimmung" entspricht oder in anderer Form von den anderen Inhalten abweichend ist (üblicherweise kursiv dargestellt)

Beispiel: Eine Text in 'i'

<iframe>

Fügt ein eingebettetes Framefenster für beliebige andere Inhalte ein

<img>

Fügt ein Bild ein

<input>

Definiert ein Eingabefeld innerhalb des Dokumentes

Beispiel:

<kbd>

Darstellung von Tastatureingaben im Text

<keygen>

Definiert ein Fromular­feld für die Generierung eines krypto­graf­ischen Schlüssel­paars (nur in HTML 5)

<label>

Beschriftungstext eines Formular­feldes

<legend>

Überschrift für eine fieldset- Gruppe von Elementen in einem Formular

<link>

Logische Beziehungen der aktuellen Web­seite zu anderen Web­seiten

<map>

Bereich für verweis-sensitive Grafiken

<mark>

Hervorhebung von relevanten Informationsteilen (nur in HTML 5)

Beispiel: Eine Text im Format 'mark'

<meta>

Meta-Angabe für Dokument­informationen oder für An­weisungen an den Web­server

<meter>

Darstellung von statistischen Werten (nur in HTML 5)

<nav>

Element zur Aus­zeichnung von Navi­gationen (nur in HTML 5)

<object>

Eingebettetes Objekt, geeignet für spezielle Multimedia- Objekte, Java- Applets usw.

<optgroup>

Gruppe von Auswahl­möglich­keiten in einer Auswahl­liste

<option>

Auswahlmöglichkeit in einer Auswahl­liste

<param>

Parameter eines Objekts bei object- Element

<progress>

Gibt den Fortschritt einer bestimmten Aufgabe wieder (nur in HTML 5)

<q>

Wörtliche Rede in einem Text

Beispiel: Eine wörtliche Rede im Text

<s>

Durchgestrichener Text

Beispiel: Eine durchgestrichener Text

<samp>

Darstellung einer Bild­schirm­ausgabe in einem doku­mentierenden Text

Beispiel: Eine Bildschirmausgabe

<script>

Scriptbereich für JavaScript und andere Scripts­prachen

<select>

Auswahlliste in einem Formular

<small>

Definiert eine kleiner dargestelltem Text als Normalschrift (wie bei Kommentaren)

Beispiel: Eine Text in 'small'

<source>

Definiert unterschiedliche Bezugs­quellen von Medien­inhalten (nur in HTML 5)

<span>

Allgemeiner Bereich innerhalb eines Absatzes

<strong>

Darstellung eines Textes der Wichtigkeit widerspiegelt - nicht Betonung (üblicherweise fett dargestellt)

Beispiel: Eine Text in 'strong'

<style>

Bereich für Stylesheet-Definitionen, z.B. in CSS

<sub>

Tiefgestellter Text

Beispiel: Ein _{tiefgestellter Text mit 'sub'}

<summary>

Stellt rudimentäre Informationen für Details bereit (nur in HTML 5)

<sup>

Hochgestellter Text

Beispiel: Ein ^{hochgestellter Text mit 'sup'}

<tbody>

Tabellenkörper mit den eigentlichen Daten

<textarea>

Mehrzeiliger Eingabebereich in einem Formular

<thead>

Kopfbereich einer Tabelle

<time>

Metaauszeichnung von Zeitangaben zur maschinellen Erfassung (nur in HTML 5)

<title>

Titel eines HTML-Dokuments

<var>

Auszeichnung von Variablen in einem doku­mentier­enden Text

<wbr>

Definiert einen Zeilenumbruch innerhalb eines Wortes (nur in HTML 5)

Auch wieder ganz schön viele - aber keine Sorge, auch hier wirst du schnell die für dich wichtigen Tags identi­fizieren.. vom Rest solltest du wissen, dass es sie gibt und dann im Zweifel­sfall gezielt nochmal nachlesen!

Bei einigen Tags habe ich ja oben in der Liste schon mal 'Anschau­ungs­beispiele' eingebaut - vor allem bei denen, wo dann in deiner Webseite direkt zu sehen ist, was durch den Tag bewirkt wird.
Aber bitte beachten! Was zu sehen ist, hängt auch entscheidend von dem Browser ab, den du verwendest. Zum Einen sind die vor­einge­stellten 'Formatierungen' nicht in jedem Browser gleich und zum Anderen können viele - vor allem ältere Browser - noch nichts oder wenig mit HTML 5 anfangen. Aber auch bei den neuen Browsern ist die Umsetzung des HTML 5 Standards noch nicht vollständig abgeschlossen. Aber das wird schon noch - alles wird gut!

Aber zurück zu den Inline- Elementen. Jetzt ein paar aus­führ­lichere Beispiele von Elementen, die sehr häufig gebraucht werden!

Hyperlinks stehen hier wohl ganz vorne auf der Liste.
Mit Hilfe von Hyperlinks können wir 'Sprünge' zu jeder beliebigen Stelle im Internet oder auch nur inner­halb unserer Web­seite realisieren. Das hast du bestimmt schon X mal gemacht - du klickst auf einen 'Link' und schwupps öffnet sich eine andere Seite... und hier kommt, wie es geht:

Der HTML-Tag, der einen Hyperlink einfügt ist <a></a>, aber damit alleine ist es noch nicht getan, es fehlen noch einige wichtige Angaben, die wir diesem Grund- Tag als Tag- Ergänzung mitgeben müssen.

Aber Stückchen für Stückchen... in dem öffnenden <a>- Tag sind einige Tag- Ergänzungen notiert:

href="eine_internet_adresse"

Zwischen den Anführungszeichen ("") wird die von dem Link zu öffnenden Adresse angegeben.
Diese kann entweder als absolute Adresse in der Form 'http://www.eine_adresse.de' eingegeben werden,
oder auch als relative Adresse in der Form '../verzeichnis/dummy.html!
Wichtig ist, dass die Adresse richtig und vollständig angegeben wird, sonst führt der Link nach 'Nirgendwo' und es erscheint beim Anklicken nur eine ärgerliche Fehlermeldung! Mehr zum Thema 'absolute und relative Adressierung' findest du bei SelfHTML

Mit der 'Target'-Angabe wird festgelegt, wie bzw. wo sich die verlinkte Seite öffnen soll? Hier gibt es mehrere Möglich­keiten:

target="_blank"

Die Seite öffnet sich in einem neuen, leeren (blank=leer) Browser­fenster bzw. Browser­tab.

target="_self"

Die Seite öffnet sich im selben (self=selbst) Browserfenster bzw. Browsertab, von der der Aufruf erfolgt.
Erfolgt der Aufruf mit target="_self" in einem Frame / IFrame, so öffnet sich die Seite in eben diesem Frame / IFrame.

target="_top"

Die Seite öffnet sich in der obersten (top=oben) Ebene eines definierten Framesets. Ein existierender Frameset wird damit also 'aufgelöst'.

target="_parent"

Die Seite öffnet sich in dem Elternelement/Elternframe (parent=Eltern) eines definierten Framesets. Ein existierender Frameset wird damit also teilweise 'aufgelöst'.

target="frame_name"

Die Seite öffnet sich in dem Frame / IFrame, der mit den Namen 'frame_name' definiert wurde.

title="..."

Der hier zwischen den Anführungszeichen ("") eingegebene Text erscheint als 'Sprec­hblase / Tool- Tip' wenn man mit dem Maus­zeiger über den Link fährt und einen Augen­blick still hält.

id="..."

Der hier zwischen den Anführungs­zeichen ("") eingegebene Text gibt dem Link eine eindeutige Identifikation... muss man zwar nicht, aber damit wird der Link mit dieser 'id' als Sprunganker identi­fizier­bar. Es darf jedoch diese 'id' nur ein einziges Mal in diesem Dokument vergeben werden. Die 'id' muss das Element ja eindeutig identifizierbar machen.

Beschreibung

Der zwischen dem öffnenden und schließenden Tag (<a>Beschreibung</a>) einge­gebene Text ist das, was anschließend auf der Webseite zu sehen ist. Man kann hier auch ein Bild einfügen, dass dann beim Anklicken genau so wirkt, wie ein Text.

Es gäbe hier noch ein paar weitere Tag- Ergänzungen, die man verwenden könnte und die auch sinnvoll wären, aber dazu kommen wir später, da dieses nicht nur für den Hyperlink, sondern im Prinzip für alle HTML- Tags zutrifft.

... einen hab ich noch! Bisher haben wir uns ja nur um Texte gekümmert - aber wie sieht denn das mit Bildern aus? Schließlich gehören Bilder und Grafiken ja auch auf eine Webseite.

Zum einfügen von Bildern gibt es natürlich auch einen HTML-Tag und zwar den <img>. Es ist einer von den Tags, der auch keinen Ende Tag hat.. also nur <img> und alles wird gut. In der XHTML Variante würde das wieder mit dem Anfang-, Ende- Tag <img /> gekennzeichnet.

Aber <img> allein fügt noch kein Bild ein, es gehören wieder diverse Tag-Ergänzungen dazu, um etwas sichtbares zu bewirken.

So sieht der Code für ein eingefügtes Bild aus:
<img src="ein_Bild.jpg" style="float: right; width: 272px; height: 150px; border: 0px;" title="Ein Moped" alt="Bild einer Ninja">

Und so sieht er auf deiner Seite aus:

Aber wieder der Reihe nach...

src="ein_Bild.jpg"

Hiermit wird der Speicherort (pfad/dateiname) des Bildes fest­gelegt, wobei 'src' vom englischen source=Quelle/ Herkunft abgeleitet ist. Diese Referenz­ierung kann absolut oder relativ erfolgen.
src ist eine Pflichtangabe und darf nicht weggelassen werden!

style="float: right; width: 272px; height: 150px; border: 0px;"

Hiermit werden die CSS Formatierungen (float , width, height, border) des Bildes fest­gelegt. Ist keine 'style' - Angabe vorhanden, werden die vom Browser vorgegebenen Standardformatierungen verwendet.

float:

Mit float kann die Ausrichtung des Bildes festgelegt werden. Mögliche Werte sind 'left' oder 'right' oder 'none'. Wird float weggelassen oder 'float: none;' festgelegt, wird das Bild 'linksbündig' eingefügt und eventuell vorhandener Text bricht am Bild um - umfließt (float) also nicht das Bild.
In älteren HTML Varianten kann die Ausrichtung des Bildes auch mit align="..." erzielt werden. Dieses Attribut funktioniert in allen HTML- Varianten, ist jedoch im HTML 5 Standard als 'missbilligt' bzw 'veraltet' eingestuft und sollte deswegen durch entsprechende CSS-Formatierungen ersetzt werden.

width: xxx;

Mit width wird die Breite des Bildes festgelegt. Der 'xxx' Wert gibt dabei die Breite an. Als Einheit für die Breite sind alle im CSS zulässigen Angaben (z.B. px, em, %, mm...) möglich.
In älteren HTML Varianten kann die Breite des Bildes auch mit width="xxx" erzielt werden. Dieses Attribut funktioniert in allen HTML- Varianten, ist jedoch im HTML 5 Standard als 'missbilligt' bzw 'veraltet' eingestuft und sollte deswegen durch entsprechende CSS- Formatierungen ersetzt werden.

height:yyy;

Mit height wird die Höhe des Bildes festgelegt. Der 'yyy' Wert gibt dabei die Höhe an. Als Einheit für die Breite sind alle im CSS zulässigen Angaben (z.B. px, em, %, mm...) möglich.
In älteren HTML Varianten kann die Höhe des Bildes auch mit height="xxx" erzielt werden. Dieses Attribut funktioniert in allen HTML- Varianten, ist jedoch im HTML 5 Standard als 'missbilligt' bzw 'veraltet' eingestuft und sollte deswegen durch entsprechende CSS- Formatierungen ersetzt werden.

border: xxx;

Mit border wird festgelegt, ob ein Rahmen um das Bild angezeigt wird. Der Wert '0' sagt - kein Rahmen. Ein Wert größer '0' gibt die Rahmenbreite an. Als Einheit für die Breite sind alle im CSS zulässigen Angaben (z.B. px, em, %, mm...) möglich.
In älteren HTML Varianten kann der Rahmen des Bildes auch mit border="x" erzielt werden. Dieses Attribut funktioniert in allen HTML- Varianten, ist jedoch im HTML 5 Standard als 'missbilligt' bzw 'veraltet' eingestuft und sollte deswegen durch entsprechende CSS-Formatierungen ersetzt werden.

title="Ein Moped"

Der zwischen den Anführungszeichen ("") angegebene Text wird als 'Sprechblase / Tool- Tipp' angezeigt, wenn der Maus­zeiger auf dem Bild ruht.

alt="Bild einer Ninja"

Der zwischen den Anführungs­zeichen ("") angegebene Text ist der Alternativ­text, der angezeigt wird, wenn das Bild aus irgend einem Grund nicht angezeigt werden kann.
alt ist eine Pflichtangabe und darf nicht weggelassen werden!

Zum Schluss noch ein paar Bemerkungen zu Bildern:
Bilder sollten nicht zu groß sein und ihre angezeigte Größe auf der Webseite sollte der realen Größe der Bild­datei entsprechen. Es sollten auch auf jeden Fall Angaben gemacht werden zur Größe (height und width), vorzugs­weise mit CSS!
Es können eigentlich alle gängigen Bild­formate (jpg, jpeg, png, gif, bmp...) in Web­seiten einge­bunden werden - nur bitte an die not­wendigen Lade­zeiten denken, die bei aufwendigen Gif- Animationen und bei größeren Bitmaps durchaus sehr störend sein können.