SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Allgemeine Elemente für Textbereiche
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche HTML-Elemente es gibt, die selber keine oder fast keine Wirkung haben und die dazu dienen Behälter für andere Elemente zu sein und mit CSS formatiert zu werden.
Keywords: SELFHTML, HTML, Behälter-Elemente, Container-Elemente, Inline-Elemente, Block-Elemente, Textbereiche, div, center, span
Date: 2005-10-31T12:25:34+01:00

| # Allgemeine Elemente für Textbereiche
| Allgemeines Block-Element Älteres Block-Element für zentrierte Bereiche Allgemeines Inline-Element Allgemeine Elemente formatieren mit CSS Weitere Informationen

## Allgemeines Block-Element

Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Allgemeines Block-Element</title>
    </head>
    <body>

    <div align="center">
    <h1>Alles zentriert</h1>
    <ul>
    <li>alles zentriert</li>
    <li>alles?</li>
    <li>alles!</li>
    </ul>
    </div>

    <div align="right">
    <h1>Alles rechts am Rand</h1>
    <ul>
    <li>alles rechts am Rand</li>
    <li>alles?</li>
    <li>alles!</li>
    </ul>
    </div>

    </body>
    </html>

### Erläuterung:

Mit `<div>` leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden `</div>` steht, wird als Teil des Bereichs interpretiert.

Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem Attribut `align` im einleitenden `<div>`-Tag ausrichten. Mit `align="center"` richten Sie den Bereich mit allen seinen Elementen zentriert aus (align = Ausrichtung, center = zentriert), mit `align="right"` rechtsbündig (right = rechts). Mit `align="justify"` werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit `align="left"` erzwingen Sie die linksbündige Ausrichtung von Elementen (Voreinstellung).

### Beachten Sie:

Das `div`-Element wird weiterhin zum HTML-Standard gehören. Das Attribut `align` ist jedoch als deprecated eingestuft und soll künftig entfallen. Statt dessen sollten Sie mit Stylesheets arbeiten.

Konqueror und Safari zentrieren bzw. positionieren im Beispiel zwar die Listeninhalte, nicht jedoch das davor stehende Bullet-Zeichen.

## Älteres Block-Element für zentrierte Bereiche

Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw. gemeinsam zentriert ausrichten. Dieses Element ist jedoch als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen (z.B. Abwärtskompatibilität zu Netscape 1.1) benutzt werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>&Auml;lteres Block-Element f&uuml;r zentrierte Bereiche</title>
    </head>
    <body>

    <center>
    <h1>Zentrierter Kunsttext</h1>
    <pre>.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.</pre>
    </center>

    </body>
    </html>

### Erläuterung:

Mit `<center>` leiten Sie einen Bereich ein, in dem alles, was folgt, zentriert ausgerichtet wird (center = zentriert). Das können z.B. Überschriften, Text, Grafiken oder Tabellen sein. Mit dem abschließenden Tag `</center>` beenden Sie die Zentrieranweisung.

### Beachten Sie:

Konqueror zentriert im Beispiel zwar die Überschrift, aber nicht das `pre`-Element.

## Allgemeines Inline-Element

Analog zum `div`-Element, das andere Block-Elemente enthalten kann, gibt es ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Allgemeines Inline-Element</title>
    </head>
    <body>

    <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>

### Erläuterung:

`<span>` leitet einen allgemeinen Inline-Bereich ein. `</span>` beendet diesen Bereich. Das Beispiel zeigt eine Überschrift 1. Ordnung, die selbst bereits mit CSS formatiert ist und dadurch auf 500% Schriftgröße gebracht wird. Innerhalb der Überschrift sind die drei Buchstaben ABC notiert. Jeder davon ist in ein `span`-Element eingeschlossen, und bei jedem `span`-Element wird mit Hilfe von CSS eine andere Schriftfarbe zugewiesen.

### Beachten Sie:

In der "Strict"-Variante dürfen Inline-Elemente nur innerhalb von Block-Elementen notiert werden. Im obigen Beispiel ist das der Fall, da die `span`-Elemente innerhalb eines Überschriftenelements vorkommen.

## Allgemeine Elemente formatieren mit CSS

Allgemeine Elemente für Textbereiche erwachen durch Formatierung erst zum Leben. Mit Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:

Schriftformatierung
Ausrichtung und Absatzkontrolle
Außenrand und Abstand
Innenabstand
Rahmen
Hintergrundfarben und -bilder
Positionierung und Anzeige von Elementen

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Allgemeine Elemente formatieren mit CSS</title>
    </head>
    <body>

    <div style="text-align:center; padding:20px; border:thin solid red; margin:25px">
    <h1>Alles zentriert</h1>
    <ul>
    <li>alles zentriert</li>
    <li>alles?</li>
    <li><span style="font-weight:bold; color:red">alles!</span></li>
    </ul>
    </div>

    <div style="text-align:right; padding:20px; border:thin solid blue; margin:25px">
    <h1>Alles rechts am Rand</h1>
    <ul>
    <li>alles rechts am Rand</li>
    <li>alles?</li>
    <li><span style="font-weight:bold; color:blue">alles!</span></li>
    </ul>
    </div>

    </body>
    </html>

### Erläuterung:

Das Beispiel bewirkt eine ähnliche Ausgabe wie das im Abschnitt Allgemeines Block-Element, diesmal jedoch mit Stylesheets formatiert und damit auch geeignet für die HTML-Variante "Strict". Beide `div`-Bereiche erhalten einen dünnen durchgezogenen Rahmen, der erste rot, der zweite blau. Ein Innenabstand von 20 Pixeln sorgt dafür, dass der Text nicht am Rahmen klebt, und ein Außenabstand von 25 Pixeln stellt sicher, dass links, rechts über und unter den Rahmen Platz entsteht. Der letzte Listenpunkt in beiden Aufzählungslisten wird jeweils mit dem leeren Inline-Element `span` ausgezeichnet und erhält jeweils eine fette Schrift und eine Schriftfarbe zugewiesen.

## Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Behälter-Elemente vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für allgemeines Block-Element (`<div>...</div>`)
Attribut-Referenz für allgemeines Block-Element (`<div>...</div>`)
Element-Referenz für allgemeines zentriertes Block-Element (`<center>...</center>`)
Attribut-Referenz für allgemeines zentriertes Block-Element (`<center>...</center>`)
Element-Referenz für allgemeines Inline-Element (`<span>...</span>`)
Attribut-Referenz für allgemeines Inline-Element (`<span>...</span>`)

| Trennlinien
| Physische Auszeichnungen im Text

© 2007 Impressum