HTML-Elemente: div, span neutrale HTML-Elemente
Details, Bearbeiten in Web-Editoren
Neutrale HTML-Elemene div und span.
Überblick Elemente
Folgende Elemente kann man verwenden, um …:
| Tag | Elementname original | deutsche Übersetzung |
|---|---|---|
| <div> | division | Bereich, Gliederung |
| <span> | span | Spanne, Bereich, Abschnitt |
Typische Darstellung
Bewirken in HTML nichts, werden daher nur in Verbindung mit CSS benutzt.
| Tag | Beispiel, wie es dargestellt wird |
|---|---|
| <div> | Wird nicht dargestellt, da es für HTML neutral ist. |
| <span> | Wird nicht dargestellt, da es für HTML neutral ist. |
Beschreibung
Div und span sind (X)HTML-Elemente. Sie bewirken in der Darstellung von (X)HTML
nichts, man kann sie daher als "neutrale" (oder auch "allgemeine"
im Gegensatz zu spezifischen) (X)HTML-Elemente
bezeichnen. Im Original werden sie "generic language/style
container" genannt.
Sie ermöglichen jedoch, den (X)HTML-Text zusätzlich zu strukturieren.
Somit werden weitere Möglichkeiten geschaffen, um mit CSS Bereiche
oder Textstellen gezielter zu formatieren.
Beide Elemente schaffen auch zusätzliche "Schachteln", die mit dem
Boxmodell von CSS angesprochen und damit formatiert werden können.
div (division = Bereich, Gliederung)
div ist ein Blockelement. Mit div kann man (ein oder) mehrere andere Blockelemente zusammenfassen und eine umgebende Box erzeugen. Somit ist es z.B. möglichen einen Rahmen um mehrere Absätze darzustellen; indem man ein div um die Absätze herum einfügt und für dieses dann mit CSS einen Rahmen deklariert.
Anmerkung zu CSS: Divs können auch mit einem Tag-Selektor formatiert werden. Macht man aber kaum, da selten gemeinsame Einstellungen vorhanden sind, da meist zu unterschiedliche, vielfältige Inhalte umschlossen werden.
span (span = Spanne, Bereich, Abschnitt)
Span ist ein Inlineelement. Mit span kann man einen Bereich innerhalb einer
oder mehrerer Zeile herausgreifen (und somit strukturieren). Dieser
Bereich
ist typischerweise eine Textstelle, auch
mit Bildern, und kann mit CSS mit Hilfe einer Klasse
gesondert formatiert werden.
Anmerkung: Gibt es für diese Textstelle schon eine Strukturierung
mit einem (X)HTML-Element, z.B. em oder strong, so kann dieses
für die Klasse verwendet werden und es braucht keine span eingefügt
werden.
Spans dürfen nicht über die Grenzen eines Blockelementes gehen, da sonst die Regeln für die Verschachtelung von HTML-Elementen verletzt werden würde. Soll eine Textstelle, die in einem Absatz beginnt und im nächsten Absatz endet, mit Hilfe von span speziell formatiert werden, müssen zwei spans verwendet werden. Das erste am Ende des ersten Absatzes, wobei das End-Tag des spans vor dem End-Tag des Absatzes ist. Das zweite am Anfang des zweiten Absatzes, wobei das Start-Tag des spans nach dem Start-Tag des Absatzes ist.
Web-Editoren
Web-Editoren
Expression Web | BlueGriffon | Dreamweaver 8
Dreamweaver
<div>
Die häufigste Anforderung ist, mehrere Blockelemente zusammen
zu fassen. Dazu markiert man die Blockelemente, und wählt
im Menü: Einfügen -> Layoutobjekte -> Div-Tag. Es öffnet
sich ein Dialogfenster mit einem Kombinationsfeld "Einfügen".
Hier wählt man: "Um die Auswahl herum".
Weiters kann auch gleich eine Klasse (oder eine Id) zugeordnet
werden.
<span>
Es gibt keinen eigenen Befehl, mit dem ein span eingefügt
werden kann. Ein span wird über den Umweg des Zuordnens
einer CSS-Klasse (Fenster Eigenschaften, Kombinationsfeld
Stil) von Dreamweaver "automatisch" eingefügt.
Dazu muss man einfach die entsprechende Textstelle markieren und die gewünschte
Klasse zuordnen.
Möchte man ein span um den gesamten Text innerhalb eines Blockelementes einfügen, so geht dies mit den Dreamweaver-Möglichkeiten nicht. Markiert man den gesamte Text innerhalb eines (X)HTML-Elementes, so ordnet Dreamweaver die ausgewählte Klasse diesem zu. Daher kann man in solch einem Fall das span nur händisch in der Code-Ansicht einfügen.
<h1>bis<h5>Fenster: Eigenschaften | Format<p>Fenster: Eigenschaften | Format<blockquote>Menü: Einfügen | HTML | Textobjekte | Blockzitat
um Blockelemente herum, Das blockquote-Element wird gerne verwendet, um Einrückungen zu realisieren. Da es sich jedoch um eine logische Textauszeichnung handelt, die keine bestimmte Art der Formatierung vorschreibt, ist der Einrück-Effekt nicht garantiert.
[cite: gibt den URI der Zitatquelle (nach RFC 2396) an; bewirkt jedoch meistens nichts]
Beispiel:
Die Energie des Verstehens
<blockquote cite="http://de.selfhtml.org/">
<p>Die Energie des Verstehens</p>
</blockquote>
<address> ? <pre>Fenster:
Eigenschaften | Format