HTML/Textstrukturierung/div

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • HTML 2.0
  • XHTML 1.0
  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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>
Mit <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.
Beachten Sie:

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!

Siehe auch[Bearbeiten]