XHTML Online Lernen - Block-Elemente

Block-Elemente definieren Text-Blöcke, das heißt Text, der auf einer Seite als Block erscheint und von anderen Text-Blöcken durch Zeilenumbrüche getrennt ist.
Absätze, Überschriften, Listen, Tabellen und Formulare sind Block-Elemente.

address (Adresse)
Verwenden Sie das Element address für Informationen wie z.B. Adressen, elektronische Unterschriften oder Autoren-Listen. Software, die Indizes erstellt, durchsucht Dokumente und kann in den address-Elementen automatisch die Information finden. Autoren kennzeichnen üblicherweise Dokumente mit ihrem Namen.
address darf ausser p keine anderen Block-Elemente enthalten. Browser stellen address-Elemente üblicherweise in Kursiv-Schrift dar.
Beispiel

blockquote (Zitat im Blocksatz)
Das Element blockquote eignet sich zur Darstellung von Zitattexten mit mindestens einem Absatz. Browser zeigen blockquote-Abschnitte jeweils vom linken und rechten Rand eingerückt und mit einer Zeile Abstand von vorhergehenden Block-Elementen an.
In XHTML darf Text nicht direkt in blockquote geschrieben werden, sondern nur in anderen Elementen innerhalb von blockquote. blockquote kann alle anderen Block-Elemente enthalten.
Beispiel

div (division = Abschnitt)
Das Element div markiert einen bestimmten Bereich des Dokumentes als logische Gruppe oder Abschnitt. Formatierungsvorschriften können Sie auf eine ganze Gruppe von Elementen einheitlich anwenden, indem Sie sie einem übergeordneten div-Element zuweisen.
div erzeugt eine neue Zeile, jedoch keinen Abstand wie die anderen Block-Elemente.
div kann beliebige andere Block-Elemente enthalten.
Beispiel

Tipp: Dynamisches HTML verwendet häufig Layer als bewegliche Objekte in Webseiten, die mit JavaScript gesteuert werden. Layer werden mit div-Elementen und CSS-Angaben definiert.

h (heading = Überschrift)
Die Elemente h1 bis h6 sind für Überschriften reserviert. Wenn Sie Software einsetzen, die aus den Überschriften in Ihren XHTML-Dokumenten Inhaltsverzeichnisse erstellt, dann sollten Sie h1 bis h6 konsequent verwenden und dabei keine Gliederungsebene auslassen.
Browser zeigen h-Elemente unterschiedlich an. Im Allgemeinen werden sie linksbündig und fett dargestellt sowie von h1 bis h6 in abnehmender Schriftgröße.
Verwenden Sie Überschriften nicht dazu, um einfach nur Text größer zu formatieren. Hierfür eignet sich besser das Inline-Element span.
h1 bis h6 sind nur innerhalb der folgenden Elemente erlaubt: body, div, blockquote und form.
Beispiel

hr (horizontal rule = waagrechte Linie)
Das leere Element hr erzeugt eine waagrechte Linie innerhalb einer Seite. Es wird gerne benutzt, um Abschnitte voneinander zu trennen oder eine Fußnote optisch vom Hauptteil einer Seite abzusetzen. Die Linie wird standardmäßig grau und reliefartig hervorgehoben dargestellt.
Beispiel

Tipp: Ausrichtung, Breite, Dicke und Farbe der Linie können Sie mit CSS-Angaben weiter verändern. Nicht alle Browser unterstützen CSS-Farbangaben für das Element hr.
Das Attribut noshade soll in XHTML nicht mehr verwendet werden.

p (paragraph = Absatz)
Das Element p markiert einen Text-Absatz und wird von Browsern üblicherweise mit einer Zeile Abstand von anderen Block-Elementen dargestellt.
p darf keine anderen Block-Elemente enthalten. Beachten Sie, dass im Gegensatz zu HTML in XHTML das schließende -Tag immer erforderlich ist.
p-Elemente ohne Inhalt, z.B. sind nicht erlaubt. Um mehr Abstand vor dem Text im p-Element einzufügen, schreiben Sie ... Text ... . Die Markierung   wird von Browsern zwar richtig als leere Zeile dargstellt, von XML-Anwendungen jedoch als Element ohne Inhalt gelesen und deshalb ignoriert.
Beispiel

pre (preformatted text = vorformatierter Text)
Mit dem Element pre markieren Sie Text, der genau so dargestellt wird, wie Sie ihn in Ihrem XHTML-Code geschrieben haben. D.h. im Browser erscheint er in einer Schrift mit fester Schrittweite (wie z.B. Courier) und genau mit den Abständen und Zeilenumbrüchen wie im XHTML-Code. Sie sollten in Ihrem Editor keine Tabulatoren verwenden, um Abstände und Einzüge zu erzeugen, da diese von Browsern unterschiedlich interpretiert werden können.
pre darf keine anderen Block-Elemente enthalten. Verwenden Sie Inline-Elemente wie span, um Text innerhalb des pre-Elementes hervorzuheben.
Beispiel

<?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 Block-Elemente</title>

</head>

<body>

<h1>Überschrift 
                                  1. Ordnung</h1>

<h2>Überschrift 
                                  2. Ordnung</h2>

<h3>Überschrift 
                                  3. Ordnung</h3>

<h4>Überschrift 
                                  4. Ordnung</h4>

<h5>Überschrift 
                                  5. Ordnung</h5>

<h6>Überschrift 
                                  6. Ordnung</h6>

<blockquote>

<h3>Überschrift 
                                  3. Ordnung</h3>

                                  <p>Ein Absatz und eine vorausgehende 
                                  Überschrift innerhalb des Elements blockquote, 
                                  die vom rechten und vom linken Rand eingerückt 
                                  dargestellt werden. Zusätzlich entsteht 
                                  eine neue Zeile und ein Abstand im Textfluss.</p>

</blockquote>

<div style="color:red; 
                                font-weight:bold; text-align:center; text-decoration:underline;">

<p>Ein Absatz innerhalb 
                                eines mit div gruppierten Abschnittes. Im style-Attribut 
                                für dieses div-Element ist folgendes notiert: 
                                style="color:red; font-weight:bold; text-align:center; 
                                text-decoration:underline;"</p>

                                <address>Auch das Element address übernimmt 
                                die Formatierung innerhalb des Abschnittes und 
                                wird in fetter roter Schrift, zentriert und unterstrichen 
                                angezeigt.</address>

</div>

<pre>
Beispiel für einen mit pre abgesetzten Bereich.
Der Text wird in Schreibmaschinen-Schrift dargestellt.
Einrückungen,    leere Stellen
     und Zeilenumbrüche werden wie im Original-
		     Code vom Browser angezeigt.
pre eignet sich besonders zur Darstellung von Code-
Beispielen innerhalb eines XHTML-Dokumentes.
<i><b>Dieser Satz ist zusätzlich mit den Elementen i und b
als kursiv und fett hervorgehoben.</b></i>
</pre>


								<p> <br /> 
                                  <br />Ein Absatz, der mehrere Zeilenumbrüche 
                                  (<br />) vor dem Text enthält 
                                  und so einen größeren Abstand zum 
                                  vorhergehenden Absatz erzeugt.</p>

<p>Ein Absatz, 
                                  gefolgt von einer normalen waagerechten Linie.</p>

<hr /> 

                                  <p>Ein Absatz, gefolgt von einer 
                                  waagerechten Linie, die mit Style-Angaben formatiert 
                                  ist: keine Schattierung (border-style: solid;), 
                                  rot (color:red;), Dicke 1 Pixel (height:1px;)</p>

                                <hr style="border-style:solid; color:red; 
                                height:1px;" />

<address>Verwendung 
                                  des Elementes address in einer Fußzeile: 
                                  Autor XY</address>

</body>

</html>