Het blok-element bij uitstek | Inleiding
De div-tag is een zogenaamd blok-element dat één of meer ander div's en andersoortige blok-elementen zoals de p-tag, h1-tag, h2-tag etcetera, ul-tag en ol-tag met de li-tag, dl-tag met de dt-tag en dd-tag, pre-tag, table-tag en form-tag kan bevatten.
De div (letterlijk 'division') of ook wel layer genoemd, is te beschouwen als een eenheid met content die op een apart niveau staat ten aanzien van de standaard-content in de body-sectie van de webpagina.
Div's kunnen als geheel, bestaande uit tekst, tabellen, afbeeldingen en formulieren, opgemaakt worden met een eigen achtergrondkleur, eigen letteropmaak en een (gekleurde) rand.
Daarnaast kenmerkt de div zich ook nog door de positie die hij kan innemen ten aanzien van de standaard-content.
De 'gewone' content krijgt zijn plaats in de webpagina door de plaats die elk blok-element inneemt in de rangorde van alle blok-elementen. Als tekst in een p-tag boven een afbeelding in de broncode staat, dan zal de tekst ook boven de afbeelding worden weergegeven in de browser.
Een div echter kan in de broncode onder alle andere content geplaatst zijn, terwijl de content van die bewuste div boven alle andere content in de browser wordt getoond. In dat geval zijn er kenmerken aan de div toegevoegd die bepalen dat de div helemaal bovenaan alle content wordt getoond.
In de div kan ook het kenmerk float: left en / of float: right worden toegevoegd. Deze kenmerken laten een div respectievelijk links en rechts in beeld zien.
Content die daarboven en / of daaronder moet worden gesitueerd, dient het opmaak-kenmerk clear: left / clear: right / clear: both te dragen.
Tabellen delen de eigenschap van positioneren van content met de div. De div heeft daarentegen een groot voordeel boven de tabel. Er is veel minder HTML-broncode nodig bij div's om hetzelfde effect te sorteren als bij tabellen. Bij tabellen moet elke cel afzonderlijk in de broncode worden gedefinieerd, terwijl bij div's boven en onder, en links en rechts in beeld volstaan kan worden met vier div-tags die opgemaakt worden via een ingevoegd id-kenmerk of class-kenmerk naar de stylesheet. Dit vergroot de overzichtelijkheid in de HTML-broncode.
Opmerking
De kenmerken float: left en float: right kunnen behalve in de div ook in principe bij de andere blok-elementen worden toegepast. Maar als float: left bijvoorbeeld in een p-tag wordt gebruikt, dan is het gebruik van andere blok-elementen daarin enigszins beperkt. In een p-tag kun je geen p-tag, table-tag, hx-tag (h1, h2 etc.) of form-tag plaatsen.
Zie Opties met blok-elementen voor meer informatie over de (beperkende) verhoudingen van blok-elementen ten aanzien van elkaar.
De p-tag laat weliswaar een aantal andere blok-elementen binnen de eigen grenzen toe, maar de div-tag laat ze allemaal toe. Om die reden verdient de div-tag de voorkeur om in combinatie met float: te gebruiken. Met de div-tag kunnen alle blok-elementen én de img-tag (dit is overigens geen blok-element) tot een content-geheel gemaakt worden.
Hieronder wordt een aantal voorbeelden met div's (en met andere tags) in combinatie met float: left en right aangeboden.
Voorbeelden
En hier volgt dan de webpagina met diverse div-voorbeelden (en met andere tags) in combinatie met float: left en right: Voorbeelden met de DIV-tag.
Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: vrijdag 20 december 2024
Deze website past cookies toe voor optimaal gebruik van dit platform | bron |