Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


HTML-Attribute

HTML-Elementen können Zusatzinformationen mitgegeben werden, indem im entsprechenden Start-Tag ein oder mehrere Attribute und dazu passende Werte ergänzt werden. Das geschiet nach folgender Syntax. Unbedingt Wortabstände beachten.

<element attribut1="wert" attribut2="wert">Text</element>

Nachfolgend die wichtigsten Attribute im Überblick:

href (Hyper reference)

Definiert die Verlinkung zu einer Datei.

<a href="https://schwarzcode.ch">Text</a>
<link href="styles.css" rel="stylesheet">

target

Öffnet in Kombination mit "_blank" einen Link in einem neuen Tab/Fenster.

<a href="https://schwarzcode.ch" target="_blank">Text</a>

src (Source)

Zeigt die Quellenangabe einer dazugehörigen Datei. (Warum eine Script-Datei mit src und eine CSS-Datei mit href verknüpft wird, ist mir allerdings schleierhaft.)

<img src="bilder/esel.png">
<script src="mein.js"></script>

class

Klassen werden im Zusammenspiel mit CSS und/oder Javascript benötigt, um mehrere HTML-Elemente gemeinsam zu benennen bzw. anzusprechen.

<span class="Details">bla</span>

id (Identifier)

IDs werden im Zusammenspiel mit CSS und/oder Javascript benötigt, um ein HTML-Element eindeutig zu benennen bzw. anzusprechen.

<div id="Navigation">bla</div>

style (Inline style)

Definiert CSS-Eigenschaften direkt im HTML-Element.

<span style="display:block; color:blue;">bla</span>

title

Definiert einen Titel oder eine kurze Beschreibung für das Element und wird in den meisten Browsern bei Mausberührung als «Tooltip» angezeigt. Ideal für Screenreader bei Links ohne Text. Wird oft auch von Javascripts verwendet, um diese Zusatzinfo beispielsweise in Bildgalerien als eigenes HTML-Element zu rendern.

<a href="index.html" title="Zurück"><img src="pfeil.png"></a>

alt (Alternativtext)

Bestimmt einen Alternativtext für den Fall, dass das Bild nicht angezeigt werden kann. Gleichzeitig werten Suchmaschinen und Screenreader diesen Text als Bildbeschreibung aus.

<img src="bilder/esel.png" alt="Foto zweier Esel am Berg">

rel (Relationship)

Definiert die Beziehung zwischen der aktuellen und der verlinkten Datei.

<link href="styles.css" rel="stylesheet">

Wird gelegentlich von Javascripts verwendet, um so markierte Elemente als Auslöser für eine Aktion zu verwenden – manchmal auch mit einem Attributwert in eckigen Klammern.

<a href="esel_gross.png" rel="[lightbox]"><img src="esel.png"></a>

type (Datentyp/Dateityp)

Bestimmt heute «nur noch» die Art von Input-Felder in Formularen.

<input type="text"> <input type="password"> <input type="submit">

cite

Bestimmt die Herkunft eines Zitats oder eines zitatähnlichen Texts.

<blockquote cite="https://schwarzcode.ch">bla</blockquote>

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.