DIV- und SPAN-Elemente in HTML

In HTML gibt es zwei besondere Tags, die universell für vielerlei Zwecke verwendet werden können. Das ist der DIV- und SPAN-Tag. Das Besondere an diesen Tags ist, dass sie keine semantische Bedeutung haben, wie das z.B. beim H1-Tag (Überschrift der 1. Ebene), P-Tag (Absatz) oder STRONG-Tag (wichtiger Text) der Fall ist. Sie dienen als leere Container und werden daher auch häufig leere Elemente genannt.

Nutzen von DIV- und SPAN-Tags

Dadurch, dass diese Tags keine semantische Bedeutung haben, werden sie hauptsächlich dafür verwendet, um bestimmten Elementen einer Website CSS-Stile zu zuzuweisen. Sie haben somit eine wichtige, gestalterische Funktion. Beispielsweise wird der DIV-Container in der Regel dafür eingesetzt, um die Bereiche eine Website aufzuteilen, z.B. in Header, Navigationsleiste, Inhaltsbereich oder Fußleiste. Der SPAN-Tag wird häufig verwendet, um in einem Textfluss bestimmte Textstellen mit einer anderen Formatierung anzuzeigen, z.B. andere Schriftfarbe, Größe etc.

DIV- und SPAN-Tags

Unterschied zwischen DIV- und SPAN-Tag

Da HTML-Elemente in Block- und Inline-Elemente unterschieden werden, benötigte man für beide Elementtypen ein leeres Element. So kann man je nachdem, ob man ein Inline- oder Block-Element benötigt, den entsprechenden Tag verwenden.

  • Der DIV-Tag ist ein Block-Element
  • Der SPAN-Tag ist ein Inline-Element

Das ist auch der Grund, weshalb der DIV-Tag eher für die Positionierung von Elementen verwendet wird und der SPAN-Tag für die Formatierung von Texten, ohne dass dabei der Textfluss unterbrochen wird. Denn, Inline-Elemente müssen müssen in Block-Elementen platziert werden und dürfen keine Block-Elemente enthalten. Block-Elemente können dagegen andere Block-Elemente enthalten und können direkt unterhalb des BODY-Tags platziert werden. Ein Beispielcode, um die Bereiche der Website wie auf der Abbildung anzuordnen. Die einzelnen Container sind zur besseren Sichtbarkeit mit einer Hintergrundfarbe belegt.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<style type="text/css">
<!--
.header {
height: 150px;
background-color: #6666cc;
}
.nav {
width: 250px;
background-color: #339966;
float: left;
}

.content {
background-color: #ff6666;
float: left;
}
-->
</style>
</head>
<body>

<div class="header">HEADER</div>

<div class="nav">
NAVIGATION
</div>

<div class="content">
<h1>Überschrift</h1>
<p>Absatz mit einem <span style="color: green;">SPAN-Element</span> im Textfluss.</p>
</div>

</body>
<html>

Erläuterung zum Code

Der Code ist sicherlich nicht vollständig und soll nur zur Veranschaulichung der Container dienen. Den beiden Klassen "nav" und "content" wurde die Eigenschaft float: left; zugewiesen, damit sie nebeneinander positioniert werden. Der Klasse "header" wurde sie nicht zugewiesen. In dem Fall wird das nächste Element unterhalb des positioniert, da DIV-Container Bock-Elemente sind. Durch das Zusammenspiel mit float: left; und ohne der Eigenschaft erhält man eine typische Aufteilung in Header, linke Spalte für Navigation und einen Content-Bereich.

Dem SPAN-Tag kann natürlich ebenfalls eine Klasse zugewiesen werden und die Formatierung kann mit der entsprechenden Zuweisung im HEAD-Bereich innerhalb des STYLE-Tags erfolgen. Außerdem können die DIV-Container weitere DIV-Container oder sonstige Inline- und Block-Elemente enthalten. Der SPAN-Tag kann dagegen nur Inline-Elemente enthalten.