Div's en overspanningen zijn niet uitwisselbaar bij het bouwen van webpagina's. Elk heeft verschillende doelen, en als u weet wanneer u ze moet gebruiken, kunt u schone, gemakkelijk te beheren websites ontwikkelen.
Het Div-element gebruiken
Div's definieer logische indelingen op uw webpagina. EEN div—afkorting van deling—is in feite een doos waarin je andere kunt plaatsen HTML-elementen die bij elkaar horen. Een divisie kan meerdere andere elementen bevatten, zoals alinea's, kopjes, lijsten, links, afbeeldingen, enz. Het kan zelfs andere afdelingen bevatten om extra structuur en organisatie te bieden.
Om de. te gebruiken div element, plaats een open tag voor het gedeelte van uw pagina dat u als een aparte divisie wilt gebruiken, en een afsluiting
inhoud van div
Als je dit gebied wilt stylen met CSS, kun je een ID kaart selector naar de openings-div-tag:
Of u kunt een klassenkiezer toevoegen:
Met deze elementen kun je vervolgens in CSS of JavaScript aan de slag.
De huidige best practices neigen naar het gebruik van klasseselectors in plaats van ID's, deels vanwege de specifieke ID-selectors. Een van beide is echter acceptabel, en je kunt zelfs een geven
div zowel een ID als een klassekiezer.Div's of secties?
De div element is anders dan de HTML5sectie element omdat het de bijgevoegde inhoud geen semantische betekenis geeft. Als u niet zeker weet of het inhoudsblok een div of een sectie, denk na over het doel van het element en de inhoud.
- Als je het element alleen nodig hebt om stijlen aan dat gedeelte van de pagina toe te voegen, gebruik dan de div element.
- Als de inhoud een duidelijke focus heeft en op zichzelf kan staan, overweeg dan om de sectie element in plaats daarvan.
Uiteindelijk beide div's en secties gedragen zich op dezelfde manier, en je kunt een van beide attributen geven en ze opmaken met CSS. Beide zijn elementen op blokniveau.
Spans gebruiken
Span is standaard een inline element, in tegenstelling tot div en sectie elementen. De span element wordt meestal gebruikt om een specifiek stuk inhoud, zoals tekst, in te pakken om het een extra haak te geven die u kunt gebruiken om stijlen toe te voegen. Zonder enige stijlkenmerken echter, span heeft helemaal geen effect op tekst.
Een ander verschil tussen de span en div elementen is dat de div element een alinea-einde bevat, terwijl de span element vertelt de browser alleen om de bijbehorende CSS-stijlregels toe te passen op wat is ingesloten door de labels:
Gemarkeerde tekst en niet-gemarkeerde tekst.
Je zou kunnen toevoegen.
class = "hoogtepunt"
of vergelijkbaar met de span element om de tekst op te maken met CSS.
Het span-element heeft geen vereiste attributen, maar de drie die het nuttigst zijn, zijn dezelfde als die van de div element:
- stijl
- klasse
- ID kaart
Gebruik span wanneer u de stijl van inhoud wilt wijzigen zonder die inhoud als nieuw te definiëren element op blokniveau in het document.
Als u bijvoorbeeld het tweede woord van an. wilt, h3 op weg naar rood, je zou dat woord kunnen omringen met een span element dat dat woord zou opmaken als rode tekst. Het woord maakt nog steeds deel uit van de h3 element, maar wordt in het rood weergegeven.