Block- und Inline-Elemente

Block-Elemente (HTML 4.01)

Block-Elemente nehmen stets die

gesamte Fensterbreite

oder die gesamte Breite des übergeordneten Block-Elements ein.

Inline-Elemente (HTML 4.01)

Inline-Elemente nehmen stets den Raum ein, der ihnen innerhalb einer Zeile zur Verfügung steht.

Beispiele für Block-Elemente

Überschrift

<h1>Wichtigste Überschrift der Seite</h1>

Section

<section>Weitere Elemente und/oder Text.</section>

Beispiele für Inline-Elemente

Links

<a href="Linkziel">Linktext</a>

<a href="mailto:email@domain.xy">Linktext</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. E-Mail: schreibtisch@daheim.de 

Bold, italic

<b>Fettdruck (bold)</b>

<i>Kursiv (italic)</i>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Physische und logische Auszeichnungen

Logische Hervorhebungen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

 

<strong>Fettdruck, bedeutet "wichtig"</strong>

 

<em>Kursiv, bedeutet "hervorgehoben, betont"</em>

Physische Hervorhebungen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

 

<b>Fettdruck, keine zusätzliche Bedeutung</b>

 

<i>Kursiv, keine zusätzliche Bedeutung</i>

Elemente "mit Bedeutung"

Inline-Elemente

<strong>(umschließt wichtige Wörter)</strong>

<code>(hebt als Code hervor)</code>

 

... und einige andere

Block-Elemente

<h1> (umschließt die wichtigste Überschrift) </h1>

<h2> (umschließt die zweitwichtigste Überschrift) </h2>

<article> (umschließt eine Textbereich, der aus mehreren Unterbereichen bestehen kann)</article>

 

... und viele andere.

Elemente "ohne Bedeutung"

Die beiden wichtigsten Elemente "ohne Bedeutung":

Inline

<span>Inline-Text</span>

Block

<div>Block-Text</div>

HTML5 Content-Modelle

Flow Content (Fließender Inhalt)

Alle Elemente im Anzeigebereich, also innerhalb des Browserfensters

Metadata Content (Metadaten-Inhalt)

Elemente, die andere Elemente beschreiben, hauptsächlich im Kopfbereich

base command link meta noscript script style title

Sectioning Content (gliedernder Inhalt)

Elemente, die header und footer enthälten können.

article aside nav section

Heading Content (Überschriften)

Elemente, die in Sections Überschriften sein können

h1 h2 h3 h4 h5 h6 hgroup

Phrasing Content (Ausdrücke)

Elemente, die kein zeilenerzeugendes Element umschließen, ähnlich den Inline-Elementen aus HTML 4.01

a abbr area audio b bdi bdo br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text

Embedded (Externer, eingebundender Inhalt)

Elemente, die externen Inhalt in das HTML-Dokument einbinden

audio canvas embed iframe img math object svg video

Interactive (Interaktiver Inhalt)

Elemente, die für User-Aktionen bestimmt sind (sofern jeweils controls vorhanden sind)

a audio button details embed iframe img input keygen label menu object select textarea video