CSS, HTML UND JAVASCRIPT MIT {STIL}

HTML-Tags dürfen ineinander verschachtelt werden: In einem body-Tag liegen viele p-Tags, in einem p-Tag darf ein a-Tag liegen. Nicht jedes HTML-Tag darf in jedem HTML-Tag stehen. Öffnende und schließende Tags dürfen sich nicht überkreuzen.

HTML: Block-Tags und Inline-Tags

Das saubere Verschachteln der HTML-Tags ist wichtig für die Strukturierung und das Layout von Webseiten und in Skripten. Wer das Konzept von Block- und Inline-Tags versteht, erspart sich viele Fehler – nicht nur beim HTML, sondern auch bei CSS und Javascript.

HTML-Tags bilden vier Grundtypen:

• HTML Block-Tags | HTML-Tags zur Strukturierung von Texten wie h1, p und div erzeugen einen Zeilenumbruch und werden auch als „Blockelemente“ bezeichnet, da sie einen visuellen Block aufziehen. Einige Blockelemente können selber wieder Blockelemente enthalten – z.B. das div-Tag.
• HTML Inline-Tags | Inline-Tags wie a und em erzeugen keinen Zeilenumbruch und dürfen keine Blockelemente enthalten. Insbesondere dürfen Inlineelemente nicht direkt in einem body- oder form-Tag liegen, sondern müssen immer in einem HTML-Block liegen.
• Empty Tags | Leere Elemente enthalten keinen Inhalt, können aber über ihre Attribute Inhalt anzeigen, der nicht im Dokument selber liegt (z.B. das img-Tag). Zu den leeren Elementen zählen HTML Inline-Tags wie img, aber auch Block-Tags wie br und hr.
• Flow-Tags | Flow-Elemente sind HTML-Tags, die nur innerhalb von bestimmten Elementen einen Sinn ergeben – z.B. tr-Tags (Tabellenreihen), die nur innerhalb eines table-Tags stehen und selber nur td- oder th-Tags enthalten dürfen.

HTML Block-Tags

Block-Tags belegen ohne Formatierung durch CSS immer die gesamte Breite des umfassenden Blocks – des HTML-Tags, in dem sie liegen. In den simplen Beispielen ist das body-Tag der Block, in dem die Elemente <h1>, <p>, <ul>, <ol> und <table> liegen.

• Die Höhe eines Blocks wird durch seine Inhalte bestimmt.
• Block-Tags beginnen immer eine neue Zeile.
• Block-Tags dürfen sowohl Block-Tags als auch Inline-Tags enthalten.
• Mit CSS kann die Höhe, die Zeilenhöhe, margin-top und margin-bottom von Block-Tags vereinbart werden.

Dieser Block wird durch ein p-Tag gebildet. Wenn Bilder als Inline-Elemente ohne weitere CSS in den Text gesetzt werden, verhalten sie sich wie ein einzelner Buchstabe und vergrößern die Zeile, in der sie stehen.

Geordnete und ungeordnete Listen sind die kleinen Revoluzzer unter den Block-Tags und fallen aus dem Rahmen.

• Browser kennzeichnen geordnete und ungeordnete Listen ohne CSS mit einem Listensymbol.
• Das Listensymbol wird eingezogen und das li-Tag wird um den Einzug verlängert, wenn kein Stylesheet diese Darstellung verändert.

Tabellen erzeugen zwar einen Block im HTML-Dokument, aber anders als andere Block-Tags laufen Tabellen nicht über die gesamte Breite des umfassenden Blocks, sondern nehmen nur den Platz ein, den sie für die Darstellung der Inhalte brauchen.

Zeile 1 Spalte 1	Zeile 1 Spalte 2
Zeile 2 Spalte 1	Zeile 2 Spalte 2

Das sind HTML Block-Tags

<address>	<blockquote>	<br />	<div>	<dl>	<form>
<h1>	<hr>	<ol>	<p>	<pre>	<table>
<ul>

Die folgenden Tags können als Blocktags angesehen werden, da sie selber wieder Blocktags enthalten können:

<dd>	<dt>	<frameset>	<li>	<tbody>	<td>
<tfoot>	<th>	<thead>	<tr>

HTML Inline-Tags

<a href="…">, <em>, <strong>, <img src="…" … /> und <code> hingegen sind Inline-Tags bzw. leere Tags.

• Inline-Tags nehmen nur den Platz ein, den ihr Inhalt braucht. Inline-Tags dürfen nicht direkt innerhalb des body-Tags liegen, sondern müssen immer innerhalb von Block-Tags wie p, div oder h2 liegen.
• Inline-Tags starten nicht auf einer neuen Zeile. Die Höhe, die Zeilenhöhe, top-margin und bottom-margin von Inline-Tags können nicht geändert werden.
• Inline-Tags können keine Block-Tags enthalten.

Mit CSS kann allerdings ein Inline-Element in ein Block-Element umgewandelt werden. Die Umkehrung funktioniert auch: Block-Elemente können durch CSS als Inline-Elemente dargestellt werden.

p { display: inline; } oder a { display: block; }

<abbr>	<acronym>	<b>	<bdo>	<big>	<cite>
<code>	<del>	<dfn>	<em>	<i>	<iframe>
<img>	<ins>	<kbd>	<q>	<samp>	<small>
<span>	<strong>	<sub>	<sup>	<tt>	<input>
<select>	<option>	<textarea>	<button>	<label>	<legend>
<optgroup>