In veel gevallen kan het handig zijn een aantal elemementen in een webpagina te groeperen zodat de groep in een stijlblad als geheel te behandelen is. De mogelijkheid tot groeperen is gegeven met het HTML-element div, de afkorting van division (= indeling, afscheiding).

Door elementen binnen de tags <div> en </div> te plaatsen ontstaat een apart gedeelte binnen de webpagina. Binnen de HTML-pagina heeft een div-gedeelte geen echte functie; als we een div toevoegen, verandert er niets aan de weergave van de pagina. Het nut van een div blijkt pas bij cascading style sheets (= opmaak) zichtbaar. Daar komen ze goed van pas!

<div class="kader"> 
<h1v Berentje Botje </h1> 
<pv Berentje Botje ging uit varen <br /> 
Met zijn scheepje naar Zuidlaren, <br /> 
De weg was recht, <br /> 
De weg was krom, <br /> 
Nooit kwam Berentje Botje weerom.
</p> 
</div> 

Het is in de browser niet zichtbaar of de kop en de tekst samen zijn ondergebracht in een division. Door de div een klasse of een identificatie mee te geven, kunnen we ernaar verwijzen in een stijlblad. We brengen de kop en de alinea samen in een division met de klasse kader.

Bij het afsluiten van een div element plaats ik telkens commentaar welke klasse of id ik afsluit. Na veel divs wordt dit anders onoverzichtelijk!

Oefening

Open opnieuw de index.html pagina. Plaats alle inhoud tussen volgende tags: <div id="container"> inhoud ... </div>. We gaan deze later vormgeven en in het midden van de browser plaatsen.

<body>
<div class="container">
<a name="top"> </a>

<ul>
... alle inhoud ...
</div>
</body>

Voor het groeperen van een of meer woorden beschikt html over het element span. Span is een inline-element (uitleg 5.2.2 Inline-element) of op de site http://www.w3schools.com/html/html_blocks.asp. De div tag is een block-element.

		

De groep speelt onder andere <span class="song"> Such a Cad </span>, de single die tegelijk met de film uitkomt. De single die samen met de film <span class="film"> Les Baroques </span> uitkomt.

Wilt u in een stijlblad niet alle span-elementen dezelfde vormgeving geven, maar onderscheid maken tussen verschillende soorten span-elementen, dan kan je ze voorzien van een klasse aanduiding (zie later hoofdstuk vormgeven met CSS).

HTML5 kent in tegenstelling tot HTML4 geen frames meer. Het fenomeen frame is geschiedenis, maar het inline frame is nog springlevend. Het wordt ook wel zwevende frame genoemd. Een frame is kort weg een webpagina binnen een andere webpagina.

<iframe src="http://www.w3schools.com" name="framenaam" height="200"
width="300" scrolling="yes" frameborder="0"> </iframe>
<p> <a href="http://www.w3schools.com" target="framenaam">
W3Schools.com </a> </p>
<p> <a href="http://www.handleidinghtml.nl/html/elementen/iframe.html"
target="framenaam"> Handleidinghtml.nl </a> </p>

Het belangrijkste attribuut is src=' ' en verwijst naar het absoluut of relatief pad. Met het width en heigth attribuut bepaal je de breedte en hoogte van het inline frame. Met het scrolling attribuut kan vastgelegd worden of in het betreffende frame scrollbars worden weergegeven. De volgende waarden kunnen gebruikt: yes, no en auto. De standaardwaarde is auto.

Met het frameborder attribuut kan bepaald worden of wel (1) of geen (0) framerand weergegeven moet worden. Beide links worden geopend in de bovenste iframe. De framenaam verwijst naar de iframe met het attribuut name='framenaam'.

Veel websites, waarvan uw video of audio kunt invoegen in uw eigen website, gebruiken het inline-frame.

Youtube

Ga naar Youtube > Delen > Insluiten. Als je klikt op meer weergeven kan je het formaat en extra opties meegeven. Kopieer de <iframe> tag.

<iframe width="560" height="315" src="https://www.youtube.com/
embed/0UUw7XgQxO0" frameborder="0" allowfullscreen> </iframe>

Googlemaps

Ga naar Googlemaps > Delen > Kaart insluiten. Als je het formaat wilt wijzigen kan je normaal wijzigen naar aangepast formaat. Kopieer opnieuw de <iframe> tag.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2
519.9568286131375!2d4.013276015804107!3d50.83196356768215!2m3!1f0!2f0!3
f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3bb316a204e99%3A0x85b8465571
eec5ee!2sRichtpunt%20campus%20Ninove%20(voorheen%20PTI%20Ninove)!5e0
!3m2!1sen!2sbe!4v1597223633727!5m2!1sen!2sbe" width="600" height="450"
frameborder="0" style="border:0;" allowfullscreen=""
aria-hidden="false" tabindex="0"></iframe>