HTML eerste stappen – Les 9 – Een menu maken

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

Extra Block Types (EBT) - gestileerde, aanpasbare bloktypes: Slideshows, Tabs, Cards, Accordions en vele andere. Ingebouwde instellingen voor achtergrond, DOM Box, javascript-plugins. Ervaar vandaag al de toekomst van layout building.

Demo EBT-modules Download EBT-modules

10/10/2025, by Ivan

Het belangrijkste onderdeel van een website is het menu (navigatie). Via het menu navigeert de gebruiker tussen de pagina’s van de site. Ook is het menu belangrijk voor de indexering van de website door zoekmachines — zonder onderlinge koppelingen tussen pagina’s kan een zoekrobot niet alle pagina’s vinden. Laten we eens kijken waaruit een menu bestaat.

Voor een menu wordt meestal een niet-genummerde lijst gebruikt (de tags ul en li). Op die manier is elk menu-item een lijstonderdeel:

...
<ul>
  <li></li>
  <li></li>
</ul>
...

Binnen de li-tag worden meestal links naar pagina’s geplaatst:

...
<ul>
  <li>
    <a href="page1.html">Eerste pagina</a>
  </li>
  <li>
    <a href="page2.html">Tweede pagina</a>
  </li>
</ul>
...

Vaak worden ook klassen en id’s toegevoegd aan het menu en de menu-items:

...
<ul id="menu-1" class="menu">
  <li class="item-1">
    <a href="page1.html">Eerste pagina</a>
  </li>
  <li class="item-2">
    <a href="page2.html">Tweede pagina</a>
  </li>
</ul>
...

Let er ook op dat de pagina’s waarnaar wordt gelinkt (page1.html, page2.html) daadwerkelijk moeten bestaan; anders weet de browser niet waarheen hij de gebruiker moet sturen.

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

HTML eerste stappen – Les 9 – Een menu maken