Divs und überspannt sind beim Erstellen von Webseiten nicht austauschbar. Jede dient unterschiedlichen Zwecken, und wenn Sie wissen, wann Sie sie verwenden sollten, können Sie saubere, einfach zu verwaltende Websites entwickeln.
Verwenden des Div-Elements
Divs Definieren Sie logische Unterteilungen auf Ihrer Webseite. EIN div—kurz für Division—ist im Grunde eine Box, in die man andere setzen kann HTML-Elemente das gehört zusammen. Eine Abteilung kann mehrere andere Elemente enthalten, z. B. Absätze, Überschriften, Listen, Links, Bilder usw. Es kann sogar andere Abteilungen enthalten, um zusätzliche Struktur und Organisation zu bieten.
Um die zu verwenden div Element, platzieren Sie ein offenes Tag vor dem Bereich Ihrer Seite, den Sie als separate Unterteilung möchten, und einen Abschluss
Inhalt von div
Wenn Sie diesen Bereich mit CSS gestalten, können Sie ein ICH WÜRDE Selektor zum öffnenden div-Tag:
Oder Sie können einen Klassenselektor hinzufügen:
Sie können dann mit diesen Elementen in CSS oder JavaScript arbeiten.
Aktuelle Best Practices neigen dazu, Klassenselektoren anstelle von IDs zu verwenden, teilweise aufgrund der spezifischen ID-Selektoren. Beides ist jedoch akzeptabel, und Sie können sogar eine geben div sowohl eine ID als auch einen Klassenselektor.
Divs oder Sektionen?
Das div Element ist anders als das HTML5Sektion -Element, da es dem eingeschlossenen Inhalt keine semantische Bedeutung verleiht. Wenn Sie sich nicht sicher sind, ob der Inhaltsblock a div oder ein Sektion, denken Sie über den Zweck des Elements und den Inhalt nach.
- Wenn Sie das Element nur benötigen, um diesem Bereich der Seite Stile hinzuzufügen, sollten Sie die div Element.
- Wenn der Inhalt einen klaren Schwerpunkt hat und für sich allein stehen könnte, ziehen Sie in Betracht, die Sektion Element statt.
Letztlich beides div und Abschnitte verhalten sich ähnlich, und Sie können jedem von ihnen Attribute zuweisen und sie mit CSS formatieren. Beides sind Elemente auf Blockebene.
Verwenden von Spannen
Spanne ist standardmäßig ein Inline-Element, im Gegensatz zu div und Sektion Elemente. Das Spanne -Element wird normalerweise verwendet, um einen bestimmten Inhalt wie z. B. Text umzubrechen, um ihm einen zusätzlichen Haken zu geben, mit dem Sie Stile hinzufügen können. Ohne Stilattribute jedoch Spanne hat keine Auswirkung auf den Text.
Ein weiterer Unterschied zwischen den Spanne und div Elemente ist, dass die div -Element enthält einen Absatzumbruch, während das Spanne -Element weist den Browser nur an, die zugehörigen CSS-Stilregeln auf das anzuwenden, was von den Stichworte:
Hervorgehobener Text und nicht hervorgehobener Text.
Sie könnten hinzufügen.
class="hervorheben"
oder ähnlich dem Spanne -Element, um den Text mit CSS zu formatieren.
Das Span-Element hat keine erforderlichen Attribute, aber die drei, die am nützlichsten sind, sind dieselben wie die des div Element:
- Stil
- Klasse
- ICH WÜRDE
Benutzen Spanne wenn Sie den Inhaltsstil ändern möchten, ohne diesen Inhalt als neuen zu definieren Element auf Blockebene im Dokument.
Wenn Sie zum Beispiel das zweite Wort von an. wollen h3 Überschrift rot zu sein, könntest du dieses Wort mit a umschließen Spanne Element, das dieses Wort als roten Text formatieren würde. Das Wort bleibt immer noch Teil der h3 Element, wird aber in Rot angezeigt.