Überblick Elemente

Diese Elemente dienen dem Ausdruck der Bedeutung einer Textstelle und kommen innerhalb von Blockelementen vor.

Tag Elementname original Beschreibung Beispiel, wie es dargestellt wird
(kann zwischen Browsern differieren) 		Gehe zu
Betonungen
<em> emphasis Betonung, Nachdruck
Lorem ipsum dolor sit amet
 zur Beschreibung des Elementeszu Expression Web 4zu BlueGriffonzu Dreamweaver 8zu Code (Referenzen)        
<strong> strong emphasis stärkere Betonung, Nachdruck
Lorem ipsum dolor sit amet
          
Kleingedrucktes
<small> small print Kleingedrucktes - Anmerkungen, Kommentare innerhalb von Text
Lorem ipsum dolor sit amet
          
Abkürzungen
<abbr> abbreviation Abkürzung
Lorem ipsum dolor sit amet
          
<acronym> acronym
Hinweis: In HTML5 als "depracated" (missbilligt) eingestuft, verwende: <abbr>		 Akronym - besondere Art der Abkürzung: ein Kunstwort, das aus den Anfangsbuchstaben mehrerer Wörter zusammengesetzt ist (UNO, GmbH, mfg)            
Hoch- und Tiefstellen
<sup> superscript hochgestellt, Exponent
xn, 1st, Fußnote12
          
<sub> subscript tiefgestellt, Index
H2O, VKugel
          
Zitierungen
<q> quote Zitat, Bezugnahme (als Textstelle innerhalb einer Zeile)
Lorem ipsum dolor sit amet
          
<cite> (cite [sait]) citation Zitat - Verweis auf die Quelle
Lorem ipsum dolor sit amet
          
Auszeichnungen für technische Dokumentationen und ähnlichem
<code> program code Code (Kode) einer Computersprache
Lorem ipsum dolor sit amet
          
<samp> sample Ausgabebeispiel eines Programmes oder Scripts
Lorem ipsum dolor sit amet
          
<kbd> keyboard, something user would type Text, der von einem Benutzer auf der Tastatur eingegeben werden soll
Lorem ipsum dolor sit amet
          
<var> variable Variable in einer Computersprache
Lorem ipsum dolor sit amet
          
<dfn> definitional Definition
Lorem ipsum dolor sit amet
          
Auszeichnungen für Änderungen im Schriftstück
<ins> inserted eingefügt
Lorem ipsum dolor sit amet
          
<del> deleted gelöscht
Lorem ipsum dolor sit amet
          

Beschreibung

siehe Typische Darstellung bzw. Web-Editoren

Beispiele für <abbr> und <acronym>

Kleintiere, z.B. Hühner, mache auch Mist.

Quellcode: 
<p>Kleintiere, <abbr>z.B.</abbr> H&uuml;hner, mache auch Mist.</p>

Kleintiere, z.B. Hühner, mache auch Mist.

Quellcode: 
<p>Kleintiere, <abbr lang="de" title="zum Beispiel">z.B.</abbr> Hühner, mache auch Mist.</p>

Am heutigen Tag beschloss die UNO Sanktionen. 

Quellcode: 
<p>Am heutigen Tag beschloss die <acronym>UNO</acronym> Sanktionen. </p>

Am heutigen Tag beschloss die UNO Sanktionen.

Quellcode: 
<p>Am heutigen Tag beschloss die <acronym title="United Nations Organisation" lang="en">UNO</acronym> Sanktionen.</p>

In <title> wird angeführt, was als Tooltip (kleines Kästchen, wenn man mit der Maus auf die Textstelle zeigt) angezeigt werden soll.
Im Dreamweaver entspricht dies "Volltext" im Dialogfenster "Abkürzung" vom Menübefehl: Einfügen | HTML | Textobjekte | Abkürzung bzw. im Dialogfenster "Akronym" vom Menübefehl: Einfügen | HTML | Textobjekte | Akronym

In <lang> wird angeführt, welche Sprache die Abkürzung ist. Dies ist z.B. hilfreich, wenn eine Sprachausgabesoftware den Text vorliest.
Im Dreamweaver entspricht dies "Sprache" im Dialogfenster "Abkürzung" vom Menübefehl: Einfügen | HTML | Textobjekte | Abkürzung bzw. im Dialogfenster "Akronym" vom Menübefehl: Einfügen | HTML | Textobjekte | Akronym

Welche Kürzel verwendet werden können, findet man in SELFHTML unter Sprachkürzel

Beispiele und Infos für Zitierungen

Zitierungen: Jendryschik, W3

Nicht verwenden

Inline-Elemente wie fett <b> und kursiv <i> sollten nicht verwendet werden, da sie physische Auszeichnungen sind: sie beschreiben das Aussehen des Elementes. Das kann man besser mit CSS. Wir verwenden nur logische Auszeichnungen, die die Eigenschaft des Elementes beschreiben. Mehr Infos dazu in SELFHTML Logische Auszeichnungen im Text.

Web-Editoren

Expression Web | BlueGriffon | Dreamweaver 8

Expression Web

  • <em>
    Menü: Format | Schriftart…: Betonung
    Symbolleiste Allgemein: I (Kursiv)
  • <strong>
    Menü: Format | Schriftart…: Fett
    Symbolleiste Allgemein: B (Fett) 
  • <small>
    ?
  • <abbr>
    ?
  • <acronym>
    ?
  • <q>
    ?
  • <sup>
    Menü: Format | Schriftart…: Hochgestellt
  • <sub>
    Menü: Format | Schriftart…: Tiefgestellt
  • <cite>
    Menü: Format | Schriftart…: Zitat
  • <code>
    Menü: Format | Schriftart…: Code
  • <samp>
    Menü: Format | Schriftart…: Beispiel
  • <kbd>
    Menü: Format | Schriftart…: Tastatur
  • <var>
    Menü: Format | Schriftart…: Variabel
  • <dfn> ?
    Menü: Format | Schriftart…: Definition
  • <ins>
    ?
  • <del>
    ?
  • <bdo>
    ?
    (Markiert eine Änderung der Textrichtung bei Sprachen mit anderer Schreibrichtung)
    dir: ltr | rtl; gibt die Schreibrichtung an

Anmerkung: Menü: Format | Eigenschaften…kann auch mit der Tastenkombination Alt+Eingabe-Taste aufgerufen werden.

BlueGriffon

  • <em>
    Menü: Format | Hervorheben
    Symbolleiste oben: ! (Hervorheben)
    Tastenkombination: Strg+I
  • <strong>
    Menü: Format | Stark Hervorheben
    Symbolleiste oben: !! (Stark hervorheben)
    Tastenkombination: Strg+B
  • <abbr>
    Menü: Einfügen | HTML 5 Element | small
    Symbolleiste: nein
    Tastenkombination: nein
  • <abbr>
    Menü: Format | Abkürzung
    Symbolleiste: nein
    Tastenkombination: nein
    Anmerkung: Zur korrekten Funktion fehlt zumindest das HTML-Attribut "title". Dieses muss in BlueGriffon händisch im Quellcode eingegeben werden: den Anfangs-Tag <abbr> folgendermaßen ergänzen: <abbr titel="Text der im Tool-Tip angezeigt werden soll" lang="de"> Das Attribut lang ist nicht unbedingt erforderlich, kann aber bei Texten in anderer Sprache die verbale Wiedergabe verbessern. Die Werte für die möglichen Sprachkürzel werden bei der Eingabe im Quellcode vorgeschlagen bzw. können unter http://de.selfhtml.org/diverses/sprachenlaenderkuerzel.htm inkl.ausgeschriebene Angabe der Sprache nachgeschlagen werden.
    Anmerkung: Bei Eingabe im Quellcode muss man beachten, dass der Text keine Anführungszeichen, & sowie < und > enthalten darf, da sonst der Browser in die Irre gelenkt wird (er interpretiert eine " im Text als Ende des Wertes und interpretiert den nachfolgenden Text als Attribut). Daher müssen diese Zeichen maskiert werden: " ist &quot; & ist &amp; < ist &lt; und > ist &gt;
  • <acronym>
    Menü: Format | Akronym
    ist aus HTML 5 rausgefallen (ansonsten so wie <abbr>)
  • <sup>
    Menü: Format | Hochgestellt
    Am besten Text zuvor eintippen und entsprechende Textstelle markieren.
  • <sub>
    Menü: Format | Tiefgestellt
    Am besten Text zuvor eintippen und entsprechende Textstelle markieren.
  • <q>
    ?
  • <cite>
    Menü: Format | Zitierung
  • <code>
    Menü: Format | Quelltext
  • <samp>
    Menü: Format | Beispielausgabe
  • <kbd>
    ?
  • <var>
    Menü: Format | Variable
  • <dfn>
    ?
  • <ins>
    ?
  • <del>
    ?
  • <bdo>
    ? (Markiert eine Änderung der Textrichtung bei Sprachen mit anderer Schreibrichtung)
    dir: ltr | rtl; gibt die Schreibrichtung an

Dreamweaver

  • <em> Fenster: Eigenschaften | i; Menü: Text | Stil | Hervorhebung (Kurisv)
  • <strong> Fenster: Eigenschaften | B; Menü: Text | Stil | Starke Hervorhebung (Fett)
  • <small> ?
  • <abbr> Menü: Einfügen | HTML | Textobjekte | Abkürzung
  • <acronym> Menü: Einfügen | HTML | Textobjekte | Akronym
  • <q> ?
  • <cite> Menü: Text | Stil | Zitat
  • <code> Menü: Text | Stil | Code
  • <samp> Menü: Text | Stil | Muster
  • <kbd> Menü: Text | Stil | Tastatur
  • <var> Menü: Text | Stil | Variable
  • <dfn> Menü: Text | Stil | Definition
  • <sup> ?
  • <sub> ?
  • <ins> Menü: Text | Stil | Eingefügt
  • <del> Menü: Text | Stil | Gelöscht
  • <bdo> ?
    (Markiert eine Änderung der Textrichtung bei Sprachen mit anderer Schreibrichtung)
    dir: ltr | rtl; gibt die Schreibrichtung an