HTML
Div Element
Suche…
Einführung
Das div-Element in HTML ist ein Containerelement, das andere Elemente einkapselt und zum Gruppieren und Trennen von Teilen einer Webseite verwendet werden kann. Ein Div an sich repräsentiert nichts von Natur aus, sondern ist ein mächtiges Werkzeug im Webdesign. Dieses Thema behandelt den Zweck und die Anwendungen des div-Elements.
Syntax
<div>example div</div>
Verschachtelung
Es ist üblich, mehrere <div> in einem anderen <div> . Dies wird normalerweise als "Verschachtelungs" -Elemente bezeichnet und ermöglicht die weitere Unterteilung der Elemente in Unterabschnitte oder die Entwicklung von Entwicklern mit CSS-Stil.
Das <div class="outer-div"> wird verwendet, um zwei <div class="inner-div"> -Elemente zusammenzufassen. jedes enthält ein <p> -Element.
<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>
Dies führt zu folgendem Ergebnis (CSS-Stile werden aus Gründen der Übersichtlichkeit angewendet):
Inline- und Blockelemente verschachteln Beim Verschachteln von Elementen sollten Sie berücksichtigen, dass es Inline- und Blockelemente gibt. Während Blockelemente "einen Zeilenumbruch im Hintergrund hinzufügen", dh andere verschachtelte Elemente werden automatisch in der nächsten Zeile angezeigt, können Inline-Elemente standardmäßig nebeneinander positioniert werden
Vermeiden Sie tiefe <div> -Verschachtelung
Ein tiefes und häufig verwendetes verschachteltes Containerlayout zeigt einen schlechten Codierstil.
Abgerundete Ecken oder ähnliche Funktionen erzeugen häufig einen solchen HTML-Code. Für die meisten Browser der letzten Generation gibt es CSS3-Gegenstücke. Verwenden Sie möglichst wenig HTML-Elemente, um das Verhältnis von Inhalten zu Tags zu erhöhen und die Seitenlast zu reduzieren, was zu einem besseren Ranking in Suchmaschinen führt.
div section Element sollte nicht tiefer als 6 Ebenen verschachtelt sein.
Grundlegende Verwendung
Das <div> -Element hat normalerweise keine spezifische semantische Bedeutung, sondern stellt lediglich eine Division dar und wird normalerweise zum Gruppieren und Einkapseln anderer Elemente in einem HTML-Dokument und zum Trennen dieser Elemente von anderen Inhaltsgruppen verwendet. Daher wird jeder <div> am besten durch seinen Inhalt beschrieben.
<div>
<p>Hello! This is a paragraph.</p>
</div>
Das div Element ist normalerweise ein Element auf Blockebene. Dies bedeutet, dass es einen Block eines HTML-Dokuments trennt und die maximale Breite der Seite einnimmt. Browser haben normalerweise die folgende Standard-CSS-Regel:
div {
display: block;
}
Das World Wide Web Consortium (W3C) empfiehlt dringend, das div-Element als letzten Ausweg anzusehen, wenn kein anderes Element geeignet ist. Die Verwendung geeigneter Elemente anstelle des div-Elements führt zu einer besseren Zugänglichkeit für Leser und zu einer einfacheren Wartung für Autoren.
Ein Blogbeitrag würde beispielsweise mit <article> , einem Kapitel mit <section> , den Navigationshilfen einer Seite mit <nav> und einer Gruppe von Formularsteuerelementen mit <fieldset> .
div-Elemente können aus stilistischen Gründen nützlich sein oder mehrere Absätze innerhalb eines Abschnitts umschließen, die alle auf ähnliche Weise kommentiert werden sollen.