XHTML-Elemente: Logische Auszeichnung

sura1 — Thu, 21 Aug 2008 08:29:37 +0000

LOGISCHE AUSZEICHNUNG:

Erklärung zu den Beispielen:

Klicken Sie bitte auf den Link BESCHREIBUNG und Sie erhalten eine ausführliche Erläuterung des betreffenden XHTML-Elementes (entnommen aus http://de.selfhtml.org/ ).

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und
http://www.w3schools.com/

<abbr> </abbr>

Abkürzung ( Beschreibung )

Das <abbr>-Element definiert eine Abkürzung. Diese sind gut, wenn man weiß, was sie bedeuten. Wenn man sich nicht sicher ist, ob die Bedeutung allen Lesern bekannt ist, kann man die Bedeutung im so genannten alternativen Text sichtbar machen.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>abbr-tag: Abkürzung</title>
</head>
<h1>Definition Abkürzung</h1>
<body>

<abbr title="et cetera" style="cursor:help;">etc.</abbr><br />
<abbr title="und so weiter" style="cursor:help;">usw.</abbr>

</body>
</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_abbr.asp
http://htmlplayground.com/#tag_abbr

<acronym> </acronym>

Akronym ( Beschreibung )

Das <acronym>-Element ist ein Sonderfall der Abkürzung. Es gibt zwei konkurrierende Definitionen des Begriffs.

Der Duden definiert ein Akronym als Kunstwort, das aus den Anfangsbuchstaben mehrerer Wörter zusammengesetzt ist, und nennt EDV (elektronische Datenverarbeitung) als Beispiel. “Aus den Anfangsbuchstaben oder -silben einer Wortgruppe oder eines Kompositums gebildete Abkürzung”. Nach dieser Definition sind Wörter wie “LKW” oder “PKW” ebenfalls als Akronyme aufzufassen.

Eine ebenfalls verbreitete Bedeutung definiert Akronyme als Abkürzungen, die als eigenes Wort gesprochen werden, zum Beispiel „DESY“ oder „AIDS“. Statt der Anfangsbuchstaben werden auch häufig Wortteile verwendet z. B. „Stasi“, „KaDeWe“, „Gestapo“ etc.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>acronym-tag: Definition Acronym</title>
</head>

<body>
<h1>Definition Acronym</h1>
<acronym title="Elektronische Datenverarbeitung"
style="cursor:help;">EDV</acronym>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_acronym.asp
http://htmlplayground.com/#tag_acronym

<address> </address>

Adresse ( Beschreibung )

Das <address>-Element zeichnet einen Textabschnitt als Adresse aus. Die meisten Browser stellen eine Adresse in Kursivschrift dar. Der Text zwischen den <address>-Tags kann beliebige HTML-Tags enthalten.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>address-tag: Definition Adresse</title>
</head>

<body>
<h1>Definition Adresse</h1>
<address>
Franz Mustermann<br />
Musterstrasse Nr. 250<br />
12456 Musterstadt
</address>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_address.asp
http://htmlplayground.com/#tag_address

<bdo> </bdo>

Textrichtung (bidirectional overwrite) ( Beschreibung )

Das <bdo>-Tag ändert die Richtung des Textes von links nach rechts (der Vorgabe) zu rechts nach links und umgekehrt.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>bdo-tag: Definition Textrichtung</title>
</head>

<body>
<h1>Definition Textrichtung</h1>
<bdo dir="rtl">Dies ist ein hebräischer Text</bdo>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_bdo.asp
http://htmlplayground.com/#tag_bdo

<blockquote> </blockquote>

Zitat (Quellangabe mit Attribut <cite> ( Beschreibung )

Das <blockquote>-Element erzeugt einen eigenen Absatz mit einer besonderen Auszeichnung und ist für Zitate gedacht.

Der Text im <blockquote>-Bereich ist meistens eingerückt und wird oft in einer anderen Schriftart dargestellt (je nach Browser des Betrachters).

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>blockquote-Element: Definition Zitat</title>
</head>
<body>

<h1>Definition Blockquote</h1>
<p>Über die Krähen und den Himmel schreibt Franz Kafka:</p>
<blockquote>
  <p>Die Krähen behaupten, eine einzige Krähe könne den Himmel
  zerstören; das ist zweifellos, beweist aber nichts gegen
  den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von
  Krähen.</p>
</blockquote>
<p>Der Absatz des Blockquote-Elements wird eingerückt dargestellt!</p>

</body>
</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_blockquote.asp
http://htmlplayground.com/#tag_blockquote

<br />

Zeilenumbruch ( Beschreibung )

Text innerhalb von normalen Absätzen, Listen, sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umbrochen. Durch das <br />-Element können Sie jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen.

<br /> wird als inhaltsleer gekennzeichnet und hat kein Ende-tag.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>br-Element: Defintion Zeilenumbruch</title>
</head>

<body>
<h1>Definition: Zeilenumbruch</h1>
<p>Im Walde sitzt ein Auerhahn,<br />
der schaut mich ganz schön sauer an.<br />
Das stört mich nicht, weil ich jetzt penne -<br />
und zwar auf seiner Auerhenne!
</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_br.asp
http://htmlplayground.com/#tag_br

<cite> </cite>

Quelle (Autor) eines Zitates ( Beschreibung )

Das <cite>-Element bestimmt, dass der Text als Zitat anzusehen ist und besonders hervorgehoben werden soll (meistens kursiv). Es wir für die Verwendung von kurzen Zitaten empfohlen.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>cite-Element: Definition Quelle (Autor) eines Zitates</title>
</head>

<body>
<h1>Definition Quellangabe</h1>
<p>Das &lt;cite&gt;-Element bestimmt, dass der <cite>Text als Zitat</cite>
anzusehen<br />ist und besonders hervorgehoben werden soll (meistens kursiv).<br />
Es wir für die Verwendung von kurzen Zitaten empfohlen.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_cite

<code> </code>

Text als Computercode ( Beschreibung )

Das <code>-Element definiert einen kurzen Abschnitt als Computercode (erscheint üblicherweise als Schreibmaschinenschrift).

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>code-Element: Definition Computercode</title>
</head>

<body>
<h1>Definition Computercode</h1>
<p>Das code-Element definiert einen kurzen Textabschnitt als Computercode<br />
und wird vom Browser üblicherweise in Schreibmaschinenschrift dargestellt:<br />
Beispiel: <code>Das ist ein Textabschnitt, das ist ein Textabschnitt....</code></p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_code

<del> </del>

Gelöschter Text ( Beschreibung )

Das <del>-Element markiert einen Text als gelöscht. Der Text wird mit einer horizontalen Linie dargestellt, die mitten durch den Text verläuft. Es wird üblicherweise mit dem <ins>-Element zusammen verwendet (Text nachträglich ergänzt).

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>del-Element: Defintion gelöschter Text</title>
</head>

<body>
<h1>Definition gelöschter Text</h1>
<p>Beispiel: <del>durchgestrichener Text</del></p>
<p>Der Text wird mit einer horizontalen Linie dargestellt, die mitten durch den Text verläuft.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_del.asp
http://htmlplayground.com/#tag_del

<dfn> </dfn>

Text als Definition ( Beschreibung )

Das <dfn>-Element zeichnet einen Text aus mit der Bedeutung “dies ist eine Definition”.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>def-Element: definiert Text als Definition</title>
</head>

<body>
<p>Normaler Text.<br />
<dfn>definierter Textabschnitt</dfn>, welcher kursiv dargestellt wird.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_dfn

<div> </div>

Container (allgemeiner Abschnitt) ( Beschreibung )

Das <div>-Element ist ein HTML-Element, mit dem man andere Elemente wie Absätze, Listen und Grafiken zu einem gemeinsamen Bereich (div= division) zusammenfasst.

<div> ist also ein Container (Box), in der mehrere andere Kisten aufbewahrt werden. Diese können später per CSS gemeinsam gestaltet werden.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>div-Element: Definition allg. Abschnitt</title>
</head>

<body>
<h1>Definition div-Bereich</h1>
Das div-Element ist ein HTML-Element, mit dem man andere Elemente wie Absätze,<br />
Listen und Grafiken zu einem gemeinsamen Bereich (div= division) zusammenfasst.
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_div.asp
http://htmlplayground.com/#tag_div

<em> </em>

Betonter Text ( Beschreibung )

Das <em>-Element bedeutet emphases: (Betonung, Nachdruck); ein so definierter Textwird kursiv dargestellt.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>em-Element: Definition hervorgehobener Text</title>
</head>

<body>
<h1>Definition hervorgehobener Text</h1>
<p>
Das ist ein <em>Textabschnitt mit dem em-Element</em>;<br>
und wird kursiv dargestellt.
</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com

< h 1 - h 6 > < / h 1 - h 6 >

Überschrift 1. bis 6. Ordnung ( Beschreibung )

Die <h>-Elemente erzeugen die Überschriften in einem Dokument. Sie stellen einen Text in sechs verschiedenen Größen dar, wobei h1 die größte und h6 die kleinste Schrift benutzt.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>h1-h6-Elemente: Definition Überschriften 1.-6.Ordnung</title>
</head>

<body>
<h1 style="color:#0000FF;">Definition Überschriften 1. bis 6. Ordnung</h1>
<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
<h3>Überschrift dritter Ordnung</h3>
<h4>Überschrift vierter Ordnung</h4>
<h5>Überschrift fünfter Ordnung</h5>
<h6>Überschrift sechster Ordnung</h6>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_hn.asp
http://htmlplayground.com/#tag_h1

<hr />

Horizontale Linie ( Beschreibung )

Das <hr />-Element erzeugt eine horizontale Linie.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>hr-Elemente: Definition horizontale Linie</title>
</head>

<body>
<h1>Definition horizontale Linie</h1>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr />
<p>Und hier beginnt etwas Neues.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_hr.asp
http://htmlplayground.com/#tag_hr

<ins> </ins>

Nachträglich ergänzter Text ( Beschreibung )

Das <ins>-Element markiert einen Text als nachträglich ergänzt. Der Text wird mit einer horizontalen Linie dargestellt, die den Text unterstreicht. Es wird üblicherweise mit dem <del>-Element zusammen verwendet (Text gelöscht).

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>ins-Element: Text als nachträglich ergänzt</title>
</head>

<body>
<h1>Definition nachträglich ergänzter Text</h1>
<p>Goethe wurde im Jahre <del>1768</del> <ins>1749</ins> geboren
und war ein begnadeter <del>Sportler</del> <ins>Schriftsteller</ins>.
</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_ins.asp
http://htmlplayground.com/#tag_ins

<kbd> </kbd>

Text als Tastatureingabe ( Beschreibung )

Das <kbd>-Element signalisiert, dass der gekennzeichnete Text vom Benutzer über die Tastatur eingegeben werden soll.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>kbd-Element: Definition als Tastatureingabe</title>
</head>

<body>
<h1>Definition Text als Tastatureingabe</h1>
<kbd>Das ist ein Textabschnitt und soll zeigen, wie das kbd-Element funktioniert.</kbd>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_kbd

<p> </p>

Textabsatz (paragraph) ( Beschreibung )

Das wahrscheinlich am häufigsten verwendete HTML-Element ist <p> ( paragraph ; Deutsch: Absatz). Jeder normale Fließtextabsatz wird mit dem <p>-Element eingeleitet und mit </p>-Element beendet.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>p-Element: Definition neuer Textabsatz</title>
</head>

<body>
<h1>Definition Textabs&auml;tze definieren</h1>
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_p.asp
http://htmlplayground.com/#tag_p

<pre> </pre>

Vorformatierter Text ( Beschreibung )

Das <pre>-Element definiert den Text als vorformatiert. Der Text wird exakt in der gleichen Art und Weise, wie Sie ihn eingeben, im Browser dargestellt (mit allen Zeilenumbrüchen).

Hauptanwendungsgebiet: Darstellung von Computercode

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>pre-Element: Defintion vorformatierter Text</title>
</head>
<body>
<h2>Definition vorformatierter Text</h2>
<h1>Ostern mit Pascal</h1>

<pre>
 <code>
  FUNCTION Osterberechnung(year : INTEGER) : INTEGER;
  VAR  a, b, c, d, e, f, g, h, i, k, l, m : INTEGER;
  BEGIN
     a  :=  year MOD 19;
     b  :=  year DIV 100;
     c  :=  year MOD 100;
     d  :=  b DIV 4;
     e  :=  b MOD 4;
     f  :=  ( b + 8 ) DIV 25;
     g  :=  ( b  f + 1 ) DIV 3;
     h  :=  ( 19 * a + b  d  g + 15 ) MOD 30;
     i  :=  c DIV 4;
     k  :=  c MOD 4;
     l  :=  ( 32 + 2 * e + 2 * i  h  k ) MOD 7;
     m  :=  ( a + 11 * h + 22 * l ) DIV 451;
     Easter :=  h + l - 7 * m + 22;
  END{FUNC};
 </code>
</pre>

</body>
</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_pre.asp
http://htmlplayground.com/#tag_pre

<q> </q>

Kurzes Zitat ( Beschreibung )

Das <q>-Element definiert ein kurzes Zitat und wird in oben stehenden, doppelten Anführungszeichen dargestellt.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>q-Element: Definition kurzes Zitat</title>
</head>

<body>
<h1>Definition kurzes Zitat</h1>
<p>Das q-Element definiert ein <q>kurzes Zitat</q> und wird in
oben stehenden, doppelten Anführungszeichen dargestellt.</p>
<p>Für Benutzer der Internet Explorers: hier funktioniert dieses Element
nicht (!).</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_q.asp
http://htmlplayground.com/#tag_q

<samp> </samp>

Text als Beispiel ( Beschreibung )

Das <samp>-Element definiert eine betonte Zeichenfolge. Der eingeschlossene Text wird in einer Teletype-Schrift oder einer nicht proportionalen Schrift dargestellt.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>samp-Element: Definition Textbeispiel</title>
</head>

<body>
<h1>Definition Text als Beispiel</h1>
<p>
Das ist ein normal Text.<br />
<samp>Dies ist ein Beispiel als Computer-Code.</samp>
</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_samp

<span> </span>

Allgemeiner Abschnitt ( Beschreibung )

Das <span>-Element ist ein HTML-Element, mit dem Sie bei Bedarf beliebigen Fließtext markieren können, wobei Sie im Browser keine Veränderung sehen werden. Erst durch den Einsatz von CSS wird die so markierte Textstelle formatiert und kann danach im Browser dargestellt werden.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>span-Element: Definition allgemeiner Abschnitt</title>
</head>

<body>
<h2>Definition allgemeiner Abschnitt</h2>
<p>Das span-Element ist ein HTML-Element, mit dem Sie bei Bedarf beliebigen<br />
Fließtext markieren können, wobei Sie im Browser keine Veränderung sehen<br />
werden. Erst durch den Einsatz von CSS wird die so markierte Textstelle<br />
formatiert und kann danach im Browser dargestellt werden.</p>
<p>Das Beispiel zeigt eine Überschrift 1. Ordnung, die selbst bereits mit
CSS<br />formatiert ist und dadurch auf 500% Schriftgröße gebracht wird.
Innerhalb der<br /> Überschrift sind die drei Buchstaben ABC notiert.
Jeder davon ist in ein span-Element<br /> eingeschlossen, und bei jedem
span-Element wird mit Hilfe von CSS eine andere Schriftfarbe zugewiesen.</p>

<h1 style="font-size:500%">
<span style="color:blue">A</span>
<span style="color:red">B</span>
<span style="color:green">C</span>
</h1>

</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_span.asp
http://htmlplayground.com/#tag_span

<strong> </strong>

Stark hervorgehobener Text ( Beschreibung )

Das <strong>-Element definiert, dass der Text stark hervorgehoben und meist fett gedruckt dargestellt wird.

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>strong-Element: Definition stark hervorgehobener Text</title>
</head>

<body>
<h1>Definition stark hervorgehobener Text</h1>
<p>Das ist ein normaler Textabschnitt.</p>
<p><strong>Das ist ein stark hervorgehobener Textabschnitt.</strong></p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_strong

<var> </var>

Textabschnitt als Variante ( Beschreibung )

Das <var>-Element definiert, dass der eingegebene Textabschnitt als Variable ausgegeben wird (meist in kursiver Schrift).

Beispiel:
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>var-Element: Definition Textabschnitt als Variable</title>
</head>

<body>
<h1>Definition Textabschnitt als Variable</h1>
<p>Das var-Element definiert, dass der<br />
<var>eingegebene Textabschnitt</var><br />
alsVariable ausgegeben wird (meist in kursiver Schrift).</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_phrase_elements.asp
http://htmlplayground.com/#tag_var

dfn « WordPress.com Tag Feed

Alyssa Monks

How to support the causes we beleive in

XHTML-Elemente: Logische Auszeichnung

Erklärung zu den Beispielen:

Klicken Sie bitte auf den Link BESCHREIBUNG und Sie erhalten eine ausführliche Erläuterung des betreffenden XHTML-Elementes (entnommen aus http://de.selfhtml.org/ ).

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und http://www.w3schools.com/

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und
http://www.w3schools.com/