Hoe maak je een huis? HTML-sjabloon

Een woningzoeksectie met zes kaarten voor statische HTML-pagina's

De kop en de herhaalde kaartengroep vormen samen al een gerichte inhoudszone voor een statische HTML-pagina. „Zoeken naar een woning” introduceert het onderwerp, waarna de zes kaarten de uitleg opsplitsen in Uw budget, Type woning, Aantal slaapkamers, Locatie, Garage en Terras of vlonder. Doordat elke kaart hetzelfde patroon volgt van een cirkelvormig pictogram, een titel en een beschrijvende alinea, kan de sectie verschillende criteria presenteren zonder voor elk criterium een aparte pagina te vereisen.

De visuele opzet is op sectieniveau evenzeer zelfvoorzienend. De helderblauwe achtergrond omlijst de inhoud, de witte kaarten steken helder af tegen die achtergrond en de donkere tekst houdt elke beschrijving goed leesbaar. Twee rijen van drie vormen een stabiel raster dat prima tussen andere statische paginasecties past en tegelijkertijd zijn herkenbare rol voor woningzoeken behoudt. De royale tussenruimte en subtiele schaduwen zorgen voor een duidelijk onderscheid tussen aangrenzende kaarten, zonder dat carrousel-, tab- of accordeonfunctionaliteit nodig is.

Binnen een statische HTML-context kan dit blok het criteriagedeelte van een bredere pagina verzorgen, terwijl de omliggende markup andere inhoudsgebieden voor zijn rekening neemt. De sectie hoeft geen complete pagina of website te zijn om waardevol te zijn: ze biedt al een harmonieus geheel dat kan worden geplaatst naast inleidende secties, woningaanbod, contactblokken of andere onderdelen. De voornaamste meerwaarde is een kant-en-klare, herbruikbare uitleg van voorkeuren bij het zoeken naar een woning.