XHTML Online Lernen - Seitenstruktur und Syntax

Jedes XHTML-Dokument besteht aus einem html-Element, das genau ein head-Element und ein body-Element enthält (vgl. Abbildung in Lektion Dokumentstruktur).
Streng konformes XHTML enthält zusätzlich die XML-Deklaration und die DOCTYPE-Deklaration.

Das body-Element enthält alle Elemente, die vom Browser angezeigt werden sollen. Sie unterteilen den Inhalt in logische Teile.
Block-Elemente zeigen den Inhalt als Text-Blöcke an, die typischerweise durch leere Zeilen voneinander getrennt sind (z.B. p, h1, h2, blockquote).
Inline-Elemente definieren Eigenschaften von Text, der innerhalb von Block-Elementen erscheint (z.B. b, i, em, strong).

Browser und andere HTML-anzeigende Software haben die Standard-Regeln zur Darstellung der Elemente bereits fest eingebaut (z.B. h1 ist fett und in einer großen Schrift, em ist kursiv, strong ist fett). Wenn Sie den Elementen ein anderes, eigenes Aussehen geben wollen, schreiben Sie eigene Regeln in Stylesheets oder style-Elemente.

<?xml version="1.0" encoding="ISO-8859-1" 
                              ?>

                                <!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 
                                1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
                                

                                <html xmlns="http://www.w3.org/TR/xhtml1">

                                <head>
                                <title>Beispiel 
                                für das XHTML-Grundgerüst</title>
                                </head>
                                <body>

<h1>Ein 
                                XHTML-Dokument</h1>
                                <p>Hier sehen Sie 
                                die Grundstruktur eines XHTML-Dokuments. p-Elemente 
                                werden als Text-Blöcke dargestellt. h1-Elemente 
                                sind Überschriften und werden fett und in 
                                größerer Schrift dargestellt. Zwischen 
                                p-Elementen und allen h-Elementen ist automatisch 
                                immer eine Zeile frei.<br />
                                 
                                Einen Zeilenumbruch wie hier 
                                  innerhalb eines Block-Elements erzeugen Sie 
                                  mit dem Elemen br (ein "leeres" Element!).</p>
                                <blockquote>Das 
                                Element blockquote wird zur Darstellung von Zitaten 
                                verwendet. Text wird standardmäßig 
                                links und rechts eingerückt dargestellt. 
                                Auch hier ist eine Zeile zwischen den Elementen 
                                frei.</blockquote>
                                
                              <h2>Inline-Elemente</h2>
                                <p>Innerhalb von 
                                Text-Blöcken formatieren Sie Bereiche als 
                                <em>Hervorhebung</em> mit 
                                dem Element em, als <strong>starke 
                                Hervorhebung</strong> mit dem 
                                Element strong. Abstände zwischen Wörtern 
                                oder Einrückungen, die den Code leichter 
                                lesbar machen, werden vom Browser unterdrückt 
                                und immer auf ein einziges Leerzeichen verkürzt.</p>

</body>
</html>

Tipp: Üblicherweise gestalten Programmmierer ihren Code übersichtlicher, indem sie untergeordnete Elemente jeweils eingerückt darstellen. So sehen Sie besser auf einen Blick, wo ein Element aufhört und welche anderen Elemente es enthält. Leerzeilen sind ebenfalls ein gutes Mittel, um Code-Blöcke optisch voneinander zu trennen.