Skip to main content

Gebruik van span- en div HTML-elementen met CSS in Web Design

Overlap on the Web, Graphic Design Made Easy with CSS Grid (Juni- 2026)

Overlap on the Web, Graphic Design Made Easy with CSS Grid (Juni- 2026)
Anonim

Veel mensen die nieuw zijn in webontwerp en HTML / CSS gebruiken de en

elementen uitwisselbaar door het opbouwen van webpagina's. De realiteit is echter dat elk van deze HTML-elementen verschillende doelen dienen. Leren om elk te gebruiken voor het beoogde doel, zal u helpen schonere webpagina's te ontwikkelen die in het algemeen gemakkelijker te beheren zijn.

De … gebruiken
Element

Het div-element definieert logische delen op uw webpagina. Het is eigenlijk een vak waarin je andere HTML-elementen kunt plaatsen die logisch samengaan. Een divisie kan meerdere andere elementen bevatten, zoals alinea's, kopjes, lijsten, koppelingen, afbeeldingen, enzovoort. Het kan zelfs andere divisies bevatten om uw HTML-document extra structuur en organisatie te geven.

Om het div-element te gebruiken, plaatst u een open

tag vóór het gebied van uw pagina dat u wilt als een afzonderlijke divisie en een afsluiting
label erna:

inhoud van div

Als het gebied van uw pagina extra informatie nodig heeft die u later met CSS wilt opmaken, kunt u een id-selector toevoegen (bijv.

id = "myDiv">

), of een klassenkiezer (bijv.

class = "bigDiv">

). Beide attributen kunnen vervolgens worden geselecteerd met behulp van CSS of via JavaScript worden gewijzigd. De huidige beste werkwijzen leunen op het gebruik van klasse selectors in plaats van ID's, deels vanwege de manier waarop specifieke ID selectors zijn. In werkelijkheid zou je er echter één kunnen gebruiken en zelfs een indeling zowel een ID als een klassenkiezer kunnen geven. Wanneer te gebruiken
Versus

Het div-element verschilt van het HTML5-sectieelement omdat het de ingesloten inhoud geen semantische betekenis geeft. Als u niet zeker weet of het inhoudsgedeelte een div of een sectie moet zijn, bedenk dan wat het doel van het element en de inhoud is om u te helpen beslissen wat u wilt gebruiken:

  • Als u het element eenvoudigweg nodig hebt om stijlen toe te voegen aan dat gedeelte van de pagina, moet u het div-element gebruiken.
  • Als de inhoud die moet worden opgenomen een andere focus heeft en op zichzelf kan staan, wilt u mogelijk het sectie-element gebruiken.

Uiteindelijk gedragen beide divs en secties zich behoorlijk op dezelfde manier en kun je een van beide attribuutwaarden geven en ze met CSS stijlen om het uiterlijk van je site te krijgen dat je nodig hebt. Beide zijn blokniveau-elementen.

De … gebruiken Element

Het bereikelement is standaard een inline-element. Dit onderscheidt het van de div- en sectie-elementen. Het span-element wordt vaak gebruikt om een ​​specifiek stuk inhoud, gewoonlijk tekst, in te pakken om het een extra "haak" te geven die later kan worden gestileerd. Gebruikt met CSS, kan het de stijl van de tekst wijzigen die het omsluit; maar zonder enige stijlattributen heeft het spanelement alleen geen enkel effect op de tekst.

Dit is het belangrijkste verschil tussen de span- en de div-elementen. Zoals hierboven vermeld, bevat het div-element een alinea-einde, terwijl het bereikelement de browser alleen vertelt om gekoppelde CSS-stijlregels toe te passen op wat wordt ingesloten door de alinea. tags:

Gemarkeerde tekst en niet-gemarkeerde tekst.

Voeg de toe

class = "highlight"

of een andere klasse om het spanelement te gebruiken om de tekst met CSS (bijv.

class = "highlight">

). Het bereikelement heeft geen vereiste kenmerken, maar de drie die het nuttigst zijn, zijn dezelfde als die van het div-element:

  • stijl
  • klasse
  • ID kaart

Gebruik spanwijdte wanneer u de stijl van inhoud wilt wijzigen zonder die inhoud te definiëren als een nieuw blokniveau-element in het document.

Als u bijvoorbeeld wilt dat het tweede woord van een h3-kop rood is, kunt u dat woord omringen met een spanelement dat dat woord zou opmaken als rode tekst. Het woord blijft nog steeds onderdeel van het h3-element, maar wordt nu ook in rood weergegeven:

Dit is mijn geweldige kop