HTML/Textstrukturierung/div
Aus SELFHTML-Wiki
< HTML | Textstrukturierung
Das div-Element ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können. div bedeutet division, etwa Abteilung oder Bereich.
Beispiel
ansehen …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Allgemeines Block-Element</title>
<style>
div { border: 1px solid; float: left; }
</style>
</head>
<body>
<h1>Allgemeines Blockelement</h1>
<div>
<h2>Listenüberschrift</h2>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
</div>
</body>
</html>
Beachten Sie:
- Verwenden Sie das div-Element nur dann, wenn es keinen sinnvollen Ersatz für die Aufgabe gibt.
- inline-Elemente, die die passende semantische Bedeutung hätten, lassen sich ggf. per CSS wie Block-Elemente darstellen.
- Verschachtelungen von div-Elementen sollten weitestgehend vermieden werden, mehr dazu: Guter HTML-Stil.
Wrapper und Container[Bearbeiten]
Häufig werden div-Elemente als wrapper (englisch für Verpackung) oder Container-Element verwendet. Dabei wird die semantische Struktur um ein weiteres, semantisch leeres Element ergänzt, dessen einziger Zweck beispielsweise die Zentrierung oder die Formatierung mit einer Randlinie ist.
Beispiel: div als wrapper
<html>
<head>....</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
Empfehlung: Verzichten Sie weitgehend auf den Einsatz von Wrapper- und Container-Elementen und ordnen Sie die CSS-Regelsätze den semantischen Elementen zu.
So wird Ihr HTML-Markup einfacher und übersichtlicher!
So wird Ihr HTML-Markup einfacher und übersichtlicher!
Siehe auch[Bearbeiten]
- Referenz: div
<div>leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Elemente einschließen können. Alles, was zwischen diesem Tag und dem abschließenden</div>steht, wird als Teil des Bereichs interpretiert.