diedVIPs
diedVIPs

html knowhow

Division/Abschnitt - <span>






DivSpanUnterschied zwischen DIV und SPAN:
DIV ist ein Block-Element. Ein DIV nimmt die komplette Breite ein, sofern nichts anderes in CSS umdefiniert wurde. Ein DIV nimmt die komplette Breite ein, sofern nichts anderes in CSS umdefiniert wurde.
SPAN ist ein Inline-Element. Es kann innerhalb eines Bereiches angewendet werden.

Die zwei Befehle  werden erst durch CSS extrem nützlich.

Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Über die Attribute der Elemente, kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei können die Elemente geschachtelt werden.
Ein -Element innerhalb eines übergeordneten ? Diese Frage wird häufig gestellt. Die einfache Antwort: Ja, es ist ohne Weiteres möglich und auch valide, -Elemente beliebig zu verschachteln. Allerdings muss auf Folgendes geachtet werden:
 • Der -Tag darf als Inline-Element, welches für die CSS-Formatierung von Text und anderen Inhalten gedacht ist, nur weitere Inline-Elemente, wie etwa <span>, <strong>, <em>, <img>,  <a>,  <br> etc. enthalten.
• Block-Elemente wie <div,>, <p>, <table>, <form>, <blockquote>, <h1> etc. sind hingegen nicht erlaubt.



span
Befehl Beschreibung Wert Beispiele
<span> Verschachtelung Die Elemente können ineinander geschachtelt werden (egal ob SPAN oder DIV). Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.
  <span style="background-color: yellow;">
        <span style="color: red;">Textmarker </span>
</span>
<span> SPAN dagegen kann innerhalb eines Bereiches angewendet werden – SPAN ist ein Inline-Element.   <span style="background-color: yellow;" </span>
<span> Verschachtelung Die Elemente können ineinander geschachtelt werden (egal ob SPAN oder DIV). Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.
  <span style="background-color: yellow;">
        <span style="color:red;">Textmarker </span>
</span>




Bereiche

Tags  Beschreibung

<header> ... </header>

Bereich für Kopf (nicht verwechseln mit <head>!)

<nav> ... </nav>

Bereich Navigation (Steuerung)

<section> ... </section>

Gruppiert Elemente

<article> ... </article>

Bereich für Inhalt

<aside> ... </aside>

Bereich für Zusatzinformationen zum Inhalt

<footer> ... </footer>

Bereich für Fuß

<div id="NAME">BEREICH</div>

Über DIV wird ein Bereich definiert. Diesen Bereich kann man über CSS dann ein Design „überstülpen“. Angesprochen wird der Bereich über seinen ID-Namen. Bei DIV handelt es sich um ein Blockelement - das Blockelement nutzt die komplette Bildschirmbreite.

<div class="NAME">XYZ</div>

Der DIV-Bereich kann per CSS über seinen Klassen-Namen angesprochen werden.

<span id="NAME">XYZ</span>

Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht.

<span class="NAME">XYZ</span>

Kann über den Klassennamen und CSS mit Design versehen werden.










Kontakt    Datenschutz   Impressum