Blockorientierte Elemente in HTML

von Thomas Salvador.

  1. Tags, Attribute, Plattformunabhängigkeit
  2. Grundstruktur von HTML-Dateien
  3. Text in HTML
  4. Grundlegende Gestaltungselemente in HTML
  5. Blockorientierte Elemente in HTML
  6. Listen und Glossare in HTML
  7. Verweise und Protokolle in HTML
  8. Grafik in HTML
  9. Farben in HTML
springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Blockorientierte Elemente sind solche, die im Gegensatz zu textorientierten Absätze erzeugen.

D.h. blockorientierte Elemente stellen immer einen eigenen Absatz dar und müssen nicht (und sollten auch nicht) extra als solche erklärt werden.

Wir nennen ein solches Element auch Umgebung, da sie neben ihrer logischen Bedeutung auch Stiländerungen durchführen, etwa Einrückungen oder Schriftänderungen und diese Änderung auf einen (eigenen) Absatz beziehen. Freilich lassen sich diese Änderungen (teilweise) im Inneren überschreiben.

Wir betrachten hier:

Setzen von Autorenangaben

Der address-Tag kapselt Angaben zur Adresse des HTML-Autoren.

Innerhalb des Tag sollten keine weiteren blockorientierten Elemente benutzt werden. Denkbare Angabe sind z.B. Copyright, Name des HTML-Autor, Kontaktadresse, Datum der Erstellung, Datum der letzten Änderung und ähnliches. Beachten Sie, dass textorientierte Elemente zugelassen sind, d.h. Sie können z.B. einen EMail-Verweis setzen.

<address>
  &copy; 1999
  <a href="https://brauchbar.de/contact.php">
  Thomas Salvador</a>
</address>

liefert

Hinweise:

  • Address wird heute kaum noch verwendet und auch ich sehe keinen tieferen Sinn darin. Es genügt meiner Meinung nach, wenn Sie Ihre Kontaktadresse überhaupt angeben.
  • Address gibt diesem Bereich aber zusärtlich die logische Bedeutung.

Setzen von (längeren) Zitaten

Die blockquote-Umgebung ist für längere Zitate z.B. aus fremden Arbeiten gedacht.

Bei der Darstellung wird der Text mit eingerückten Rändern dargestellt.

Heinrich Hertz formulierte:
  <blockquote>
    &quot;Wir machen uns innere Scheinbilder oder Symbole der
    &auml;u&szlig;eren Gegenst&auml;nde, und zwar machen wir
    sie in solcher Art, da&szlig; die denknotwendigen Folgen
    der Bilder stets wieder Bilder seien von den
    naturnotwendigen Folgen der abgebildeten Gegenst&auml;nde.&quot;
  </blockquote>
Hier geht es nach dem Zitat weiter...

Heinrich Hertz formulierte:

"Wir machen uns innere Scheinbilder oder Symbole der äußeren Gegenstände, und zwar machen wir sie in solcher Art, daß die denknotwendigen Folgen der Bilder stets wieder Bilder seien von den naturnotwendigen Folgen der abgebildeten Gegenstände."
Hier geht es nach dem Zitat weiter...

Hinweis: Mitunter wird blockquote auch dazu missbraucht, Einrückungen zu erzeugen. Dieser Mißbrauch ist so verbreitet, dass es Browserherstellern empfohlen wird, blockquote nicht mit Stiländerungen (wie kursiv) zu verbinden. Dies würde nicht zuletzt die Notwendigkeit von Korrekturen an enormen Anzahlen bestehender Seiten verursachen. (cite stellt also i.a. kursiv dar, blockquote nicht.)

Ich empfehle Ihnen jedoch, dass Sie, wenn es irgendwie geht, von solchen Aktionen absehen. Es gibt auch andere Möglichkeiten, Einrückungen zu erzeugen, zu denen wir noch kommen werden.

Eine Zeckentfremdung von Tags führt zu extremen Problemen bei Benutzern mit nicht-graphischen Browsern.

So existieren akustische Browser, wo ein blockquote durch Veränderungen in der synthetischen Stimme oder durch explizite Erwähnung ('es folgt ein Zitat') verirsachen könnte.

Steht im Source nun ein zweckentfremdeter blockquote, so erfolgt die Kennzeichnung fälschlich.

Man sollte niemals Tags benutzen, nur weil sie gerade passend aussehen oder einen passenden Effekt erzeugen, sondern ausschließlich, weil sie logisch passend sind.

Setzen von vorformatiertem Text

Innerhalb der pre-Umgebung wird der automatische Zeilenumbruch der HTML-Browser abgeschaltet.

D.h. die Umbrüche erscheinen dort, wo sie auch in der HTML-Datei stehen. Auch werden Leerzeichen so wie angegeben dargestellt, d.h. mehrfache Leerzeichen entsprechen hier nicht mehr einem einzelnen Leerzeichen.

Die pre-Umgebung realisiert damit eine Umgebung zur Darstellung vorformatierten Textes. Die Darstellung wird üblicherweise in Schreibmaschinenschrift vorgenommen.

Wichtig: Die pre-Umgebung realisiert (nur) vorformatierten Text, keine verbatim-Umgebung. D.h. auch innerhalb der pre-Umgebung müssen Sonderzeichen maskiert werden.

Es wäre also falsch zu sagen, in einer pre-Umgebung wird alles so ausgegeben, wie es in der HTML-Datei erscheint.

Wenn Sie diese Umlaute ä,ö,ü sehen, so ist das reiner Zufall.
Diese &auml;,&ouml;,&uuml; sind jedoch korrekt.

liefert

Wenn Sie diese Umlaute ,, sehen, so ist das reiner Zufall. Diese ä,ö,ü sind jedoch korrekt.

(Hinweis: Der Autor hat einen ASCII-Editor benutzt, unter der verbreiteten ANSI-Oberflächen (wie Windows) werden die Umlaute des ersten Beispieles i.a. falsch gesetzt.

Dies dient der Verdeutlichung der Korrektheit der Behauptung und der Wichtigkeit der richtigenMaskierung.

Betrachten Sie das Beispiel ggf. unter einem DOS-Browser, dort sollten die Umlaute in beiden Fällen richtig gesetzt sein. Das erste Mal - man kann es nicht oft genug sagen - ist Zufall.)

Der enorme Vorteil liegt darin, dass damit auch Verweise und Textstile innerhalb der pre-Umgebung gesetzt werden können.

<pre>
Falsch:  Durch <b> und </b> wird fette Schrift gekapselt.
Richtig: Durch &lt;b&gt; und &lt;/b&gt; wird fette Schrift
         gekapselt.
</pre>

liefert

Falsch:  Durch  und  wird fette Schrift gekapselt.
Richtig: Durch <b> und </b> wird fette Schrift
         gekapselt.

Sie sehen, dass im fehlerhaften Beispiel "und" fett dargestellt wird, anstelle, dass die Stilsteuerung ausgegeben wird. Dies kann nutzbringend eingesetzt werden.

<pre>
  <b>function</b> test(a: string): boolean;
</pre>

liefert

function test(a: string): boolean;

Im Source zur Angabe des Source der Beispiele muss dafür lediglich die Ersatzdarstellung ebenfalls maskiert dargestellt werden.

Wir wissen beispielsweise, dass &uuml; die Ersatzdarstellung für "ü" ist. Um die Ersatzdarstellung vom Browser anzeigen zu lassen, müssen wir auch den Ampersand "&" maskieren. D.h. die im Browser dargestellte Ersatzdarstellung wird mit &amp;uuml; erzeugt.

Dies lässt sich auch alles kombinieren, um etwa Beispiele übersichtlicher zu machen. Betrachten wir noch einmal den HTML-Code zum Beispiel des Zitates, diesmal werden Tag und Ersatzdarstellungen hervorgehoben.

Heinrich Hertz formulierte:

<blockquote>
  &quot;Wir machen uns innere Scheinbilder oder Symbole der
  &auml;u&szlig;eren Gegenst&auml;nde, und zwar machen wir sie in
  solcher Art, da&szlig; die denknotwendigen
  Folgen der Bilderstets wieder Bilder seien von den
  naturnotwendigen Folgen der abgebildeten Gegenst&auml;nde.
  &quot;
</blockquote>
Hier geht es nach dem Zitat weiter...

Der HTML-Code wird in einer pre-Umgebung gezeigt, ist also vorformatiert.

Der blockquote-Tag wurde zusätzlich mit b fett gesetzt.

Die Maskierung der Anführungsstriche bzw. Sonderzeichen wurde rot bzw. blau eingefärbt.

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]