XHTML

XHTML - Grundlagen

XHTML - Textstruktur

Jede XHTML-Seite besteht hauptsächlich aus Text und Bildern.

Den Text gut und genau zu strukturieren ist wohl die wichtigste Sache, damit Sie ordentliche Webseiten erstellen.

Nachfolgend einige Beispiele, Sie bilden jedoch nicht die gesamten Möglichkeiten, es ist lediglich ein Auszug daraus.

Beispiele:

Zeilenumbruch

<br /> Sie erzeugen einen Textumbruch, es handelt sich dabei um ein leeres Inline-Element. Inline-Element deswegen, weil es ja keinen Absatz macht. Leeres Element weil, dieses Element kein Anfang- und Ende-Tag besitzt. Anders als in HTML schreiben Sie in XHTML, ein leeres Element, indem Sie es nach einem Leerzeichen mit dem Slash beenden, es besteht nur aus diesem Tag.

Absatz

<p>... </p> Es handelt sich hier um ein Blockelement, mit dem Sie einen Absatz erzeugen.

Anmerkung:
Leerzeichen, Zeilenumbrüche und Einrückungen im Quelltext sollten Sie zur besseren Übersicht machen. Zeilenumbrüche im Quelltext haben keine Auswirkung auf den Sichtbaren Inhalt im Browser. Mehrere Leerzeichen werden zu einem zusammengefaßt.

Überschriften

<h1>...</h1> bis <h6>...</h6> Sie sind eine der wichtigsten Komponenten der Textauszeichnung und Struktur. Hier kategorisieren Sie Ihre Überschrift, h steht für header und die Nummer für die Gewichtung.

Nummerierte Listen

<ol><li>...</li></ol> Hier handelt es sich um eine geordnete Liste, mit Listeneinträgen. Das ol wird mit ordered list übersetzt, li mit list item. Die Einrückungen und Listennummern erfolgen automatisch. Auch eine Verschachtelung ist möglich.

Beispiel:

Bild zum Beispiel 1

Schaut im Internet so aus!

Aufzählungen

<ul><li>...</li></ul> Bei einer Aufzählung handelt es sich auch um eine Liste, jedoch hat diese Liste keine Reihenfolge. Das ul steht hier für unordered list. Sie dienen der übersichtlichen Darstellung, werden viel genutzt.

Bei Navigationsleisten in Webseiten, die mit CSS formatiert werden, verwendet man ebenso eine unsortierte Liste, es handelt sich ja lediglich um eine Liste von Links.

Auch Aufzählungen können Sie verschachteln.

Weitere Elemente

Vorangegange sowie die nachfolgenden Elemente dienen zur Auszeichnung des Textes, dass will heißen, sie strukturieren den Text, mit logischen Auszeichnungen. Wie dann der Inhalt im Browser aussieht, ist dabei nicht beschrieben, es hängt vom Browser ab. Sie als Author von Webseiten steuern das Aussehen mit CSS.

Beispiel em, em steht für betonten Text, Sie geben einem Textteil die Betonung mittels des Element, wie aber dies dann im Browser betont wird, sprich das Aussehen, bestimmen Sie mittels CSS. Diese Elemente werden auch als logische Elemente bezeichnet.

Elementname	Formatierung
em	betont
strong	stärker betont als em
cite	Zitat oder Verweis auf eine andere Quelle
dfn	Definition
code	Codefragment
samp	Output von Script oder einem anderem Programm
kbd	Benutzereingabe
var	Variable
abbr	Abkürzung
acronym	Akronym
sub	Text hochgestellt
sup	Text tiefgestellt

Darüber hinaus gibt es mehrere XHTML-Elemente mit denen Sie direkt Text formatieren können. Solche Elemente nennt man physikalische Elemente. Viele, aber nicht alle dieser Elemente sind vom W3C als "deprecated" (veraltet) eingestuft. Sie sollten sie aber trotzdem durch CSS ersetzen.

Elementname	Formatierung
tt	steht für Teletyp, d.h. eine Schrift, bei der alle Buchstaben gleich breit sind (diktengleich). Besser ist aber stattdessen die Schriftart über die CSS-Eigenschaft font-family festzulegen
i	italic - kursiv. Ersetzen durch CSS-Eigenschaft font-style: italic.
b	bold - fetter Text. Ersetzen durch CSS-Eigenschaft font-weight: bold.
big	größere Schrift. Besser stattdessen Schriftgröße über CSS (font-size) festlegen.
small	kleinere Schrift. Besser stattdessen Schriftgröße über CSS (font-size) festlegen.
strike	deprecated: durchgestrichener Text. Ersetzen durch CSS-Eigenschaft text-decoration: line-through.
s	deprecated: strike-through - durchgestrichener Text. Ersetzen durch CSS-Eigenschaft text-decoration: line-through.
u	deprecated: underlined - unterstrichener Text. Ersetzen durch CSS-Eigenschaft text-decoration: underline.

Verwenden Sie keine als "deprecated" gesetzten Elemente in Ihren Dokumenten. Beim Dokumententyp strickt sind sie gar nicht erlaubt!

<vorwärts>
<zurück>
<nach oben>