HTML voor Joomla
Open een willekeurige Joomla-pagina, negeer even de kleuren en de bewegende elementen, en kijk naar wat er overblijft: een kop, enkele alinea’s, een lijst, een menu, een formulier. Dat skelet bestaat uit HTML, de taal die aangeeft wat elk stukje inhoud precies is. Joomla is op de server geschreven in PHP, CSS bepaalt hoe de pagina eruitziet en JavaScript zorgt ervoor dat deze reageert, maar aan de basis van dit alles ligt HTML. Het is de structuur die elke browser, zoekmachine en schermlezer als eerste leest.
In dit artikel wordt HTML uit het perspectief van Joomla uitgelegd. Het behandelt de basisbeginselen voor website-eigenaren en redacteuren, de manier waarop Joomla de HTML van een pagina samenstelt voor beheerders, en de ontwikkelaarstools (het template skelet, jdoc:include-tags, template overrides, HTMLHelper en Joomla Forms) voor degenen die templates en extensies bouwen.
HTML is de inhoud en de structuur; CSS is de vormgeving; JavaScript is het gedrag.
Het doel is eenvoudig: je helpen begrijpen hoe Joomla HTML genereert, zodat je schone inhoud kunt schrijven, de opmaak op een manier kunt aanpassen die updates doorstaat, en je pagina’s licht, toegankelijk en gemakkelijk leesbaar voor zoekmachines kunt houden.
1. De basis
1.1 Wat is HTML?
HTML staat voor HyperText Markup Language. Het is de taal die de structuur en betekenis van een webpagina beschrijft: dit is een kop, dit is een alinea, dit is een link, dit is een lijst, dit is een afbeelding. De browser leest de HTML en bouwt de pagina daaruit op, daarna geeft CSS hem opmaak en voegt JavaScript gedrag toe. HTML komt altijd eerst, want de andere twee hebben niets om mee te werken zolang de structuur niet bestaat.
HTML is geen programmeertaal. Het heeft geen logica, geen lussen en geen berekeningen. Het is een opmaaktaal: je verpakt je inhoud in tags die zeggen wat elk onderdeel is. De browser doet de rest.
1.2 Elementen, tags en attributen
De bouwsteen van HTML is het element. Een element bestaat meestal uit een openingstag, wat inhoud en een sluitingstag. Een alinea ziet er bijvoorbeeld zo uit:
<p>Welkom op mijn Joomla-site.</p>Veel elementen hebben ook attributen, dat zijn extra instellingen die je binnen de openingstag schrijft. Een link gebruikt het attribuut href om te zeggen waar hij naartoe wijst, en een afbeelding gebruikt src en alt:
<a href="/about-us">Over ons</a>
<img src="/images/logo.png" alt="Bedrijfslogo">Een handvol attributen kom je overal tegen, dus die zijn het waard om bij naam te kennen:
| Attribuut | Waar het voor is |
|---|---|
class |
Een label waar CSS en JavaScript op mikken. Joomla en Bootstrap leunen er zwaar op. |
id |
Een unieke naam voor een element op de pagina. |
href / src |
Het adres van een link, of de bron van een afbeelding of script. |
alt |
Het tekstalternatief voor een afbeelding. |
aria-* |
Extra toegankelijkheidsinformatie (sectie 14). |
Dat is het hele idee. Inhoud staat tussen tags, instellingen staan in attributen, en elementen nestelen in elkaar om de pagina te vormen.
1.3 Semantische HTML
De allerbelangrijkste gewoonte in moderne HTML is om het element te kiezen dat past bij de betekenis van de inhoud, en niet het element dat er toevallig goed uitziet. Dit heet semantische HTML. Een kop hoort een koptag te zijn (<h1> tot <h6>), een lijst hoort een lijst te zijn (<ul> of <ol>), en de hoofdnavigatie hoort in een <nav> te staan.
Semantische HTML zegt wat inhoud is, niet hoe het eruit moet zien. Het uiterlijk is de taak van CSS.
Dit is belangrijk omdat de betekenis is wat zoekmachines indexeren en wat schermlezers voorlezen. Een kop gemaakt van vetgedrukte tekst in een alinea ziet eruit als een kop maar betekent niets; een echte <h2> vertelt elke machine die de pagina leest dat hier een nieuwe sectie begint.
1.4 Waar Joomla HTML gebruikt
Je hoeft geen letter HTML te schrijven om er profijt van te hebben. Elke Joomla-pagina is van boven tot onder HTML, en Joomla genereert het meeste ervan voor je:
- Het template bouwt het paginaskelet: de
<html>,<head>en<body>. - Componenten geven de hoofdinhoud uit, zoals een artikel of een contactformulier.
- Modules geven de kleinere blokken uit: menu's, inlogvakken, het zoekveld.
- De editor zet de tekst die je typt om in schone HTML wanneer je een artikel opslaat.
- Joomla-formulieren renderen elk formulierveld in de backend en frontend als HTML-invoervelden.
Het meeste HTML op een Joomla-site wordt dus door Joomla voortgebracht. Jouw taak, als je het wilt veranderen, is om het op de juiste plek te veranderen, zodat het schoon laadt en de volgende update overleeft.
Naar boven2. Een korte geschiedenis: van tabel-lay-outs naar semantische HTML5
2.1 Het XHTML- en tabel-lay-outtijdperk
Oudere websites, en oudere Joomla-templates, werden heel anders gebouwd. Lay-outs werden gemaakt met HTML-<table>-elementen, met tabellen in tabellen om kolommen te plaatsen. Witruimte kwam van onzichtbare spacer-afbeeldingen. De markup zei bijna niets over betekenis; het ging alleen om het op zijn plek duwen van pixels. Joomla 1.x- en 2.5-templates stonden vol met deze aanpak, en het maakte sites traag, lastig te onderhouden en onvriendelijk voor schermlezers.
2.2 HTML5 en Joomla
HTML5, de huidige versie van HTML, veranderde het beeld. Het voegde elementen toe die betekenis beschrijven, zoals <header>, <nav>, <main>, <article>, <section>, <aside> en <footer>. Lay-out verhuisde van HTML-tabellen naar CSS (Flexbox en Grid). Vanaf Joomla 4 geeft het standaardtemplate, Cassiopeia, schone, semantische HTML5 uit en gebruikt het CSS voor de lay-out. Joomla 5 en 6 zetten dit voort: tabellen worden alleen gebruikt voor tabelgegevens, en de paginastructuur is opgebouwd uit betekenisvolle elementen.
2.3 Waarom dit voor jou belangrijk is
Het praktische gevolg is dat een moderne Joomla-site al goede HTML voortbrengt. Je hoeft zelden tegen de markup te vechten. Wanneer je wel HTML schrijft, of dat nu in een artikel, een eigen module of een template-override is, is het doel om die moderne, semantische stijl te volgen: gebruik het juiste element voor de taak, houd de structuur schoon, en laat CSS het uiterlijk verzorgen. Plak geen oude tabelgebaseerde lay-outs en kopieer geen markup uit een gereedschap dat alles in betekenisloze <div>-tags wikkelt.
3. Hoe Joomla de HTML van een pagina opbouwt
3.1 PHP rendert, de browser ontvangt
Wanneer een bezoeker een Joomla-pagina opent, draait de server PHP, verzamelt de inhoud uit de database, en stelt een afgewerkt HTML-document samen. De browser ontvangt die HTML, tekent de pagina, past daarna de CSS toe en draait de JavaScript. Tegen de tijd dat je een pagina kunt lezen, is de HTML al compleet en statisch; op de server verandert er niets tot het volgende verzoek.
Dit is het tegenovergestelde van hoe JavaScript werkt (dat draait in de browser nadat de HTML is aangekomen). Weten waar de HTML wordt gebouwd, op de server, in PHP, vertelt je waar je moet zoeken als de markup fout is: in het template, het component of een override, niet in de browser.
3.2 Het document-object
Joomla stelt de pagina die het bouwt voor als een document-object. Voor een gewone webpagina is dit een HTML-document, en het bevat de paginatitel, de metadata, de links naar stylesheets en scripts, en de body-inhoud. Je code bereikt het via de applicatie:
use Joomla\CMS\Factory;
$doc = Factory::getApplication()->getDocument();
$doc->setTitle('Mijn paginatitel');Het document is wat alle losse stukken, het template, het component en de modules, omzet in een enkele HTML-string die naar de browser wordt gestuurd.
3.3 De paginakop (head)
De <head> van een HTML-pagina is niet zichtbaar, maar draagt belangrijke informatie: de paginatitel, de tekenset, de viewport-instelling voor mobiel, de meta-omschrijving, en de links naar CSS en JavaScript. Joomla bouwt de head voor je op uit het document-object, dus je stelt waarden in PHP in in plaats van tags met de hand te typen:
$doc->setDescription('Een korte samenvatting voor zoekmachines.');
$doc->setMetaData('viewport', 'width=device-width, initial-scale=1');Omdat Joomla de head schrijft, krijg je op elke pagina een consistente, geldige head, en kunnen extensies er veilig aan toevoegen zonder elkaar te overschrijven.
3.4 HTML is een van meerdere documenttypes
HTML is de normale uitvoer, maar het is niet de enige die Joomla kan voortbrengen. Dezelfde inhoud kan in verschillende formaten worden geleverd door het documenttype te veranderen, dat je meestal aanvraagt met de parameter format in de URL:
| Type | Wat het uitgeeft |
|---|---|
html |
Een volledige HTML-pagina. De standaard. |
json |
Data zonder markup, gebruikt door de Web Services API en Ajax. |
feed |
Een RSS- of Atom-feed (XML). |
raw |
De ruwe body zonder template eromheen. |
xml |
Een XML-document. |
Dit is goed om te weten omdat het laat zien dat HTML een presentatielaag is, niet de data zelf. Wanneer Joomla de headless Web Services API serveert, brengt het JSON voort en helemaal geen HTML. De inhoud is hetzelfde; alleen het documenttype verandert.
Naar boven4. Hoe de browser HTML leest: de DOM
Joomla's taak eindigt zodra het de HTML verstuurt. De taak van de browser begint daar, en hij bewaart je HTML niet als tekst. Hij zet het om in een levende boom die hij kan opmaken, veranderen en opnieuw tekenen. Die boom begrijpen verklaart waarom schone HTML belangrijk is en waarom de pagina die je inspecteert niet altijd de pagina is die Joomla verstuurde.
4.1 Van HTML naar de DOM-boom
De browser ontleedt je HTML tot de DOM (Document Object Model), een boom van knopen waarin elk element, elk attribuut en elk stukje tekst een object is. De nesting van je tags wordt de vorm van de boom:
HTML-bron → HTML-parser → DOM-boomCSS doorloopt hetzelfde proces tot een parallelle boom, de CSSOM. JavaScript kan de DOM op elk moment na de opbouw lezen en veranderen, en zo gaat een menu open of verschijnt een nieuwe rij zonder dat de pagina herlaadt.
4.2 DOM plus CSSOM is de gerenderde pagina
De browser combineert de DOM en de CSSOM tot een render-boom, berekent waar alles komt (layout), tekent het (paint), en stapelt het op het scherm (composite):
DOM + CSSOM → render-boom → layout → paint → compositeElk element in je HTML wordt een knoop die de browser in het geheugen moet houden, moet opmaken en plaatsen. Een kleine, ondiepe DOM is snel te bouwen en goedkoop bij te werken; een enorme, diep geneste DOM is bij elke stap traag (sectie 15).
4.3 Paginabron bekijken versus element inspecteren
Twee browsergereedschappen tonen je HTML, en het is niet hetzelfde:
- Paginabron bekijken toont de oorspronkelijke HTML precies zoals Joomla die verstuurde, voordat er JavaScript draaide.
- Element inspecteren toont de levende DOM op dit moment, inclusief alles wat JavaScript sindsdien heeft toegevoegd of veranderd.
Het verschil is cruciaal bij het debuggen. Als een menu, slider of module er fout uitziet, vertelt het vergelijken van de twee je of het probleem in de HTML zit die Joomla voortbracht (los het op in een template of override) of in de JavaScript die het daarna veranderde.
Naar boven5. Het template-skelet en jdoc:include
5.1 index.php bevat het paginaskelet
Elk Joomla-template heeft een index.php-bestand dat het HTML-skelet van de pagina definieert: de doctype, het <html>-element met zijn taal, de <head>, en de <body> met zijn lay-outgebieden. Dit bestand is gewone HTML met een paar speciale plaatshouders die Joomla invult. Dat van Cassiopeia staat in templates/cassiopeia/index.php, en de bovenkant ziet er ongeveer zo uit:
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />
</head>
<body>
...
</body>
</html>Het attribuut lang wordt ingesteld op basis van de sitetaal, wat belangrijk is voor toegankelijkheid en SEO. Normaal bewerk je nooit de index.php van een kerntemplate; als je het skelet moet veranderen, gebruik je een child-template (sectie 8).
5.2 De jdoc:include-tags
De <jdoc:include>-tags zijn het hart van een Joomla-template. Elke tag vertelt Joomla om een bepaald stukje gegenereerde HTML op die plek neer te zetten. Het is geen echte HTML; Joomla vervangt ze terwijl het de pagina bouwt. De belangrijkste types zijn:
| jdoc:include-type | Wat het invoegt |
|---|---|
metas, styles, scripts |
De head: metatags, stylesheet-links en scripttags. |
head |
Al het bovenstaande tegelijk (de oudere, gecombineerde vorm). |
component |
De hoofdinhoud van de pagina uit het actieve component. |
modules |
Elke module die op een genoemde positie is gepubliceerd. |
message |
De systeemberichten van Joomla (de meldingsbalk). |
Door de head op te splitsen in metas, styles en scripts (in plaats van een enkele head) kan het template hun volgorde regelen, en daarom gebruikt het moderne Cassiopeia de drie aparte tags.
5.3 Moduleposities en chrome
De modules-tag noemt een positie en een stijl. De positie is een label (zoals sidebar-right) dat je ook kiest wanneer je een module publiceert, en de stijl bepaalt de HTML-wikkel, de module-chrome genoemd, die rond elke module komt:
<jdoc:include type="modules" name="sidebar-right" style="card" />Het template bepaalt dus waar modules kunnen verschijnen en hoe ze worden gewikkeld, terwijl de beheerder beslist welke modules in elke positie komen. Joomla brengt de twee samen en schrijft de uiteindelijke HTML. Een lichtere chrome kiezen (of none) voorkomt extra wikkel-markup die je niet nodig hebt (sectie 15).
6. Semantische structuur: landmarks en koppen
6.1 De HTML5-landmark-elementen
HTML5 geeft een pagina een kleine set structurele elementen die de belangrijkste gebieden beschrijven. Goed gebruikt veranderen ze een platte muur van <div>-tags in een pagina die een schermlezer kan doorlopen en een zoekmachine kan begrijpen:
| Element | Betekenis |
|---|---|
<header> |
Het bovengebied: logo, sitetitel, soms het hoofdmenu. |
<nav> |
Een blok navigatielinks. |
<main> |
De hoofdinhoud, uniek voor de pagina. Een per pagina. |
<article> |
Een op zichzelf staand stuk, zoals een blogbericht. |
<section> |
Een thematische groepering binnen de inhoud. |
<aside> |
Verwante maar aparte inhoud, zoals een zijbalk. |
<footer> |
Het ondergebied: copyright, secundaire links. |
6.2 Een main, een h1, geordende koppen
Twee structurele regels dragen het meeste gewicht. Ten eerste hoort een pagina precies een <main> en een <h1> te hebben, de echte titel van de pagina. Ten tweede horen koppen op volgorde te gaan zonder niveaus over te slaan: een <h2> begint een hoofdsectie, een <h3> een subsectie daarbinnen, enzovoort. Spring niet van <h1> naar <h4> alleen omdat de kleinere tekst er mooier uitziet; kies het juiste niveau en geef het opmaak met CSS.
Precies zo is het artikel dat je nu leest gebouwd: een titel, daarna genummerde <h2>-secties, elk met <h3>-subsecties. De structuur is de betekenis.
6.3 De semantische uitvoer van Cassiopeia
Cassiopeia brengt deze structuur al voort. Het wikkelt de pagina in landmark-elementen, zet de component-uitvoer in een <main>, en voegt bovenaan een "Naar de hoofdinhoud"-link toe zodat toetsenbordgebruikers het menu kunnen overslaan. Wanneer je inhoud schrijft of een override bouwt, is het jouw taak om die structuur intact te houden: zet de artikeltitel in de kop die Joomla aanlevert, en gebruik echte koppen en lijsten in de body in plaats van opgemaakte alinea's.
7. Waar de HTML vandaan komt: componenten, modules, layouts
Om de HTML van een Joomla-pagina te veranderen, moet je eerst weten welk deel van Joomla het voortbracht. De pagina wordt samengesteld uit meerdere bronnen, en elk heeft zijn eigen bestanden.
7.1 Component-uitvoer (de hoofdinhoud)
Het component is wat de URL beantwoordt: com_content toont artikelen en categorieen, com_contact toont het contactformulier, enzovoort. De HTML ervan wordt gegenereerd door view-template-bestanden (ook layouts genoemd), PHP-bestanden die HTML mengen met kleine lussen over de data. Voor een artikel is het relevante bestand:
components/com_content/tmpl/article/default.phpDit bestand bepaalt de markup rond een enkel artikel: waar de titel komt, hoe de auteur en datum verschijnen, en hoe de body wordt gewikkeld. Content-plugins kunnen de HTML in dit stadium ook veranderen door tags in de artikeltekst te vervangen voordat die wordt getoond (zo werken functies zoals de lees-meer-breuk of media-embeds). Het is de HTML die je het vaakst wilt aanpassen, en dat doe je met een override (sectie 8), nooit door dit bestand te bewerken.
7.2 Module-uitvoer en chrome
Elke module heeft ook eigen layout-bestanden die de HTML voortbrengen. Een menumodule bouwt een <ul> van links; een eigen module geeft uit wat je erin zet. Bovenop de eigen HTML van de module zit de chrome, de wikkel die het template toevoegt (het style-attribuut uit sectie 5.3), die elke module in een positie een consistent kader geeft, zoals een kaartje met een kop.
7.3 Layouts: herbruikbare stukjes HTML
Joomla heeft ook een layouts-systeem voor kleine, herbruikbare stukjes HTML die veel plekken delen, zoals een paginabalk, een set iconen, of een formulierveld. Deze staan onder layouts/ en worden vanuit PHP gerenderd met LayoutHelper:
use Joomla\CMS\Layout\LayoutHelper;
echo LayoutHelper::render('joomla.content.icons', $displayData);Voor jou betekent dit dat een stukje herhaalde markup meestal een gedeelde layout is, zodat je het een keer kunt overriden en overal kunt repareren, in plaats van dezelfde HTML in veel bestanden te bewerken.
7.4 De classes in de HTML van Joomla
Kijk naar de uitvoer van Joomla en je ziet veel class-attributen, de meeste van Bootstrap 5, dat Joomla meelevert. Wanneer je de markup verandert, helpt het om te weten wat een class doet voordat je hem weghaalt:
- Visuele classes geven het element alleen opmaak, zoals
text-centerofmt-3. Veilig om te veranderen. - Structurele classes zijn deel van een lay-outsysteem, zoals
rowencol-md-8. Haal er een weg en de grid breekt. - Gedrags-classes zijn haken waar JavaScript naar zoekt, zoals een Bootstrap-modal-trigger. Haal er een weg en het script stopt met werken.
Sommige attributen doen ook dubbel dienst voor toegankelijkheid, zoals role="alert" op een meldingsvak, dat hulptechnologie het doel van het element vertelt. Houd die als je opnieuw opmaakt.
8. Template-overrides: de HTML van Joomla aanpassen
Dit is het belangrijkste Joomla-specifieke idee van het hele artikel. Wanneer de HTML die een component of module voortbrengt niet is wat je wilt, bewerk je niet de extensie. Je maakt een template-override: een kopie van het layout-bestand, geplaatst in je template, waar Joomla het in plaats van het origineel gebruikt. Je kopie overleeft updates, want de update vervangt het kernbestand, niet je override.
8.1 Wat een override is
Een override is een layout-bestand in een speciale map in je template. Joomla kijkt daar eerst; vindt het een passend bestand, dan gebruikt het dat van jou, anders valt het terug op dat van de extensie. Er verandert niets in de extensie, dus een update kan je werk niet wissen (al moet je overrides na een grote update opnieuw controleren, voor het geval de oorspronkelijke markup is veranderd).
8.2 Hoe maak je er een
Je hoeft geen bestanden met de hand te kopieren. Ga in de backend naar Systeem → Site-templates → Cassiopeia Details en bestanden → Overrides aanmaken, kies het component of de module, en Joomla kopieert de layout voor je naar de juiste plek. Het resultaat is een bestand dat je kunt bewerken:
Oorspronkelijke layout:
components/com_content/tmpl/article/default.php
Jouw override (Joomla gebruikt deze):
templates/cassiopeia/html/com_content/article/default.phpOpen de override en verander de HTML: voeg een wikkel toe, voeg een class toe voor je CSS, verplaats de datum onder de titel, of haal een stuk weg dat je niet wilt. De inhoud komt nog steeds van Joomla; jij regelt alleen de markup eromheen.
8.3 Een veelvoorkomend voorbeeld: semantische artikelafbeeldingen
Een veelvoorkomende reden om te overriden is het verbeteren van de markup rond een afbeelding. Standaard is een intro-afbeelding een kale <img>; in je override kun je hem in een <figure> met een onderschrift wikkelen, wat duidelijker en makkelijker op te maken is (sectie 9.4):
<figure class="article-image">
<img src="/images/example.jpg" alt="Voorbeeldafbeelding">
<figcaption>Onderschrift van de voorbeeldafbeelding</figcaption>
</figure>8.4 Module-chrome en layouts overriden
Hetzelfde mechanisme werkt voor module-chrome en voor gedeelde layouts. Modulestijlen staan onder html/layouts/chromes/ in het template, en gedeelde layouts spiegelen hun oorspronkelijke pad onder html/layouts/. Zo kun je veranderen hoe elke module in een positie wordt gewikkeld, of hoe paginering er sitebreed uitziet, door een bestand te overriden. Doe dit in een child-template voor serieus werk, zodat zelfs een verandering aan het bovenliggende template je overrides ongemoeid laat.
9. Moderne HTML-elementen die het kennen waard zijn
HTML krijgt steeds elementen erbij die op eigen kracht taken doen die vroeger JavaScript of een framework nodig hadden. Ze werken in elke huidige browser, dus je kunt ze gebruiken in artikelen (waar het tekstfilter het toelaat), in een Custom-module, of in een template-override. Het juiste ingebouwde element kiezen houdt je pagina's lichter en toegankelijker.
9.1 details en summary voor FAQ's en uitklappers
Het <details>-element maakt een open-en-dicht-paneel zonder enige JavaScript. De <summary> is het deel dat altijd zichtbaar en aanklikbaar is. Het is perfect voor een FAQ-lijst of een "lees meer"-uitklapper:
<details>
<summary>Hoe update ik Joomla veilig?</summary>
<p>Maak eerst een back-up, draai daarna de update vanuit het Systeem-dashboard.</p>
</details>9.2 dialog voor eenvoudige modals
Het <dialog>-element is een ingebouwde pop-up. Het regelt de overlay, de focus en de Escape-toets voor je, wat ooit een bibliotheek nodig had:
<dialog id="contact-dialog">
<p>Neem contact op voor meer informatie.</p>
<button>Sluiten</button>
</dialog>Voor een backend-component is de meegeleverde Bootstrap-modal van Joomla nog steeds de consistente keuze; voor een kleine frontend-pop-up is de ingebouwde <dialog> vaak genoeg.
9.3 picture voor responsieve en moderne afbeeldingen
Met het <picture>-element kan de browser de beste afbeelding kiezen: een modern formaat zoals WebP wanneer dat wordt ondersteund, met een gewone terugvaloptie. Dit verlaagt het afbeeldingsgewicht zonder script:
<picture>
<source srcset="/images/photo.webp" type="image/webp">
<img src="/images/photo.jpg" alt="Ons kantoor">
</picture>Voeg loading="lazy" toe aan afbeeldingen onder de vouw, zodat de browser ze pas ophaalt wanneer ze bijna in beeld komen, wat het eerste zicht op de pagina versnelt.
9.4 figure, figcaption en template
Twee elementen maken dit compleet. <figure> met <figcaption> bindt een afbeelding aan zijn onderschrift als een semantisch geheel (het override-voorbeeld in sectie 8.3). En <template> bevat een stuk markup dat niets doet tot JavaScript het kloont, en dat is de schone manier om een kaartje of een rij te herhalen die een script later vult.
10. HTML schrijven in artikelen: de editor en codeweergave
De meeste mensen die Joomla gebruiken, schrijven HTML zonder het te beseffen: telkens als je een artikel opmaakt, brengt de editor achter de schermen HTML voort. Weten hoe dat werkt helpt je je inhoud schoon te houden.
10.1 TinyMCE en de WYSIWYG-editor
De standaardeditor van Joomla is TinyMCE, een "what you see is what you get"-editor (WYSIWYG). Wanneer je tekst vet maakt, een lijst toevoegt of een link invoegt, schrijft TinyMCE de bijbehorende HTML (<strong>, <ul>, <a>) in de artikelbody, die Joomla vervolgens in de database opslaat. Jij schrijft inhoud; de editor schrijft de HTML.
TinyMCE wordt als plugin geconfigureerd, dus een beheerder kan beslissen welke knoppen redacteuren zien en welke HTML ze mogen voortbrengen. Een nette editorconfiguratie is de makkelijkste manier om artikel-HTML consistent te houden over veel auteurs.
10.2 De codeweergave (ruwe HTML bewerken)
Soms moet je de HTML rechtstreeks zien of bewerken: om een verdwaalde tag te repareren, een embed te plakken, of een class toe te voegen. TinyMCE heeft een codeweergave (de </>-knop) die de ruwe HTML van het artikel toont. Voor volledige controle kun je de editor in je gebruikersinstellingen of globaal omzetten naar CodeMirror of Geen, waarmee je HTML met de hand typt zonder WYSIWYG-laag ertussen.
Wanneer je vanuit een tekstverwerker plakt, plak dan als platte tekst of gebruik de plak-opschoning van de editor, want Office-documenten brengen een massa betekenisloze markup en inline-stijlen mee die de pagina opblazen en tegen je CSS vechten.
10.3 De Custom HTML-module
Wanneer je ergens op de site een blok eigen HTML wilt dat geen deel van een artikel is, gebruik je een Custom-module (mod_custom). Die geeft je dezelfde editor en slaat op wat je schrijft, waarna je hem op een positie publiceert. Het is het juiste gereedschap voor een promovak, een footernotitie of een klein stukje ingesloten inhoud, en het houdt die HTML uit je artikelen waar het niet thuishoort.
11. Tekstfilters: welke HTML Joomla je laat opslaan
Joomla slaat niet klakkeloos elke tag op die je typt. Het haalt artikel- en module-HTML eerst door een tekstfilter, om te voorkomen dat een gebruiker gevaarlijke markup opslaat, zoals een <script> dat andere bezoekers kan aanvallen. Dit is een beveiligingsfunctie, en het is de reden dat een script of een <iframe> dat je plakt soms verdwijnt bij het opslaan.
11.1 Waarom Joomla HTML filtert
Als elke auteur een <script>-tag kon opslaan, zou een enkel gehackt of slordig account code kunnen injecteren die in de browser van elke bezoeker draait (een cross-site-scripting-aanval). Het tekstfilter verwijdert zulke tags voor gebruikers die niet worden vertrouwd om ze te gebruiken, zodat de opgeslagen HTML veilig blijft.
11.2 De filterinstellingen
Je regelt het filter in Systeem → Globale configuratie → Tekstfilters. De instellingen gelden per gebruikersgroep, dus je kunt je beheerders vertrouwen terwijl je publieke of minder ervaren auteurs beperkt. De belangrijkste modi zijn:
| Modus | Wat het doet |
|---|---|
| Standaard zwarte lijst | Verwijdert bekende gevaarlijke tags (zoals script) en staat de rest toe. |
| Aangepaste zwarte lijst | Je eigen lijst van tags en attributen om te verwijderen. |
| Witte lijst | Staat alleen de tags toe die je opsomt, verwijdert al het andere. |
| Geen filtering | Slaat elke HTML op. Gebruik alleen voor volledig vertrouwde groepen. |
| Verboden | Staat helemaal geen HTML-tags toe voor die groep. |
11.3 Het juiste filter per groep kiezen
Standaard staat de groep Super Users op Geen filtering en alle anderen op de Standaard zwarte lijst, wat een verstandig startpunt is. Als redacteuren een extra tag nodig hebben (bijvoorbeeld een <iframe> voor een kaart), zet dan niet een hele groep op Geen filtering; voeg die ene tag toe aan een Witte lijst of haal hem uit de Zwarte lijst voor alleen die groep. Houd het laagste vertrouwensniveau aan waarmee mensen hun werk nog kunnen doen.
12. HTML genereren vanuit PHP: HTMLHelper
Wanneer je een extensie of een override bouwt, moet je vaak een veelvoorkomend stukje HTML uitgeven: een afbeeldingstag, een opgemaakte datum, een link, een lijst met opties. Joomla biedt HTMLHelper (de functie HTMLHelper::_()) zodat je die markup consistent voortbrengt in plaats van elke keer tags met de hand te schrijven.
12.1 Wat HTMLHelper doet
HTMLHelper is een register van kleine functies die elk een getest stukje HTML teruggeven. Je roept er een op bij naam en geeft je data mee; het geeft de markup terug, correct ge-escaped en opgemaakt. Dit houdt de uitvoer consistent over de hele site en bespaart je het opnieuw uitvinden van dezelfde tag overal:
use Joomla\CMS\HTML\HTMLHelper;
echo HTMLHelper::_('image', 'logo.png', 'Bedrijfslogo');
echo HTMLHelper::_('link', $url, 'Lees meer');
echo HTMLHelper::_('date', $article->created, 'F j, Y');12.2 Veelgebruikte helpers
| Helper | Wat het teruggeeft |
|---|---|
HTMLHelper::_('image', ...) |
Een <img>-tag, die het afbeeldingspad voor je oplost. |
HTMLHelper::_('link', ...) |
Een <a>-tag met de juiste attributen. |
HTMLHelper::_('date', ...) |
Een datum opgemaakt in de tijdzone en taal van de site. |
HTMLHelper::_('bootstrap.renderModal', ...) |
Een Bootstrap-modal-dialoog. |
HTMLHelper::_('list.genericordering', ...) |
Een keuzelijst met sorteeropties. |
12.3 Escapen: geef nooit ruwe data uit
Telkens als je een waarde met de hand in HTML afdrukt, escape die dan eerst, zodat een verdwaalde < of een aanhalingsteken in de data de pagina niet kan breken of een tag kan injecteren. In een view-template geeft Joomla je $this->escape(), dat de waarde door htmlspecialchars haalt:
<h2><?php echo $this->escape($article->title); ?></h2>De regel is eenvoudig: data uit de database of van de gebruiker is tekst, geen HTML, totdat je het escapet. Helpers zoals HTMLHelper regelen dit voor je; wanneer je tags met de hand schrijft, is escapen jouw taak.
Naar boven13. Formulieren en HTML in Joomla
Formulieren zijn ook HTML, en ze zijn de plek waar slechte markup gebruikers het meest raakt. Joomla heeft een eigen Form-systeem dat een eenvoudige definitie omzet in toegankelijke HTML-invoervelden, zodat je de HTML van een formulier zelden met de hand schrijft.
13.1 Joomla-formulieren renderen HTML
Een Joomla-formulier wordt in een XML-bestand beschreven als een lijst velden. Joomla leest het en rendert de bijbehorende HTML: het invoerveld, het label en eventuele hulptekst, allemaal correct aan elkaar gekoppeld. Bijna elk formulier dat je in de backend ziet, en veel in de frontend, is zo gebouwd:
<field
name="email"
type="email"
label="COM_EXAMPLE_EMAIL_LABEL"
required="true"
/>Uit die ene regel brengt Joomla een <input type="email">, een bijbehorend <label>, het attribuut required en de validatiehaken voort, allemaal consistent met de rest van de site.
13.2 Veldtypes en hun markup
Elk veld-type wijst naar een specifiek stukje HTML. Een handvol dekt de meeste behoeften:
| Veldtype | HTML die het voortbrengt |
|---|---|
text, email, url |
Een <input> van het bijbehorende type. |
textarea |
Een meerregelig <textarea>. |
list |
Een <select> met <option>-kinderen. |
radio, checkboxes |
Een groep radioknoppen of selectievakjes met labels. |
editor |
Een volledige WYSIWYG-editor (TinyMCE). |
13.3 Labels en toegankelijke formulieren
De grote winst van het Form-systeem is toegankelijkheid. Het koppelt elk label aan zijn invoerveld met de juiste for- en id-attributen, zodat een schermlezer het label voorleest wanneer de gebruiker het veld bereikt, en een klik op het label het invoerveld focust. Mocht je ooit een formulier met de hand schrijven, neem dit dan over: elk invoerveld heeft een echt <label> nodig dat eraan gekoppeld is, niet alleen tekst ernaast.
14. Toegankelijkheid en semantische HTML
HTML bepaalt of een site werkt voor mensen die een schermlezer gebruiken, met het toetsenbord navigeren of op browserzoom leunen. Goede, semantische HTML is het grootste deel van toegankelijkheid; de rest zijn kleine toevoegingen erbovenop. Deze controles overlappen ook met de WCAG-normen waar veel sites aan moeten voldoen.
14.1 Landmarks en skip-links
De landmark-elementen uit sectie 6 (<header>, <nav>, <main>, <footer>) laten een schermlezergebruiker meteen naar een gebied springen. Een skip-link helemaal bovenaan, die Cassiopeia bevat, laat een toetsenbordgebruiker het menu overslaan en naar de inhoud gaan. Houd beide intact wanneer je een template of een override bouwt.
14.2 Koppen en leesvolgorde
Schermlezergebruikers bewegen vaak door een pagina via de koppen, dus een correcte kopvolgorde (sectie 6.2) is een navigatiegereedschap, niet alleen een visuele stijl. Zorg dat de HTML-volgorde ook overeenkomt met de leesvolgorde: gebruik geen CSS om een blok visueel te verplaatsen terwijl het op een andere plek in de HTML blijft staan, want de schermlezer volgt de HTML.
14.3 Afbeeldingen, labels en alt-tekst
Elke betekenisvolle afbeelding heeft een alt-attribuut nodig dat hem beschrijft, zodat mensen die hem niet kunnen zien toch de informatie krijgen. Een decoratieve afbeelding die niets toevoegt hoort een leeg alt="" te hebben zodat de schermlezer hem overslaat. Het mediaveld van Joomla en de editor laten je beide alt-tekst instellen; gebruik het. Formulieren hebben echte labels nodig, zoals in sectie 13.3.
14.4 Gebruik knoppen en links correct
Een link (<a>) gaat ergens heen; een knop (<button>) doet iets. Beide zijn standaard met het toetsenbord bereikbaar. Een veelgemaakte fout is om een <div> met JavaScript aanklikbaar te maken, terwijl een toetsenbordgebruiker die niet kan bereiken:
<!-- Vermijd: niet toetsenbordtoegankelijk, geen rol. -->
<div onclick="submitForm()">Versturen</div>
<!-- Beter: werkt met toetsenbord en kondigt zijn rol aan. -->
<button type="submit">Versturen</button>14.5 ARIA: gebruik het spaarzaam
ARIA-attributen (zoals role en aria-label) voegen toegankelijkheidsinformatie toe wanneer gewone HTML het niet kan. De eerste regel van ARIA is echter om het niet te gebruiken wanneer een echt HTML-element volstaat: een <button> is beter dan een <div role="button">. Grijp naar ARIA alleen om een echt gat te vullen, zoals een off-canvas-menu of een live-gebied dat bijwerkt, en test het, want verkeerde ARIA is erger dan geen.
15. Prestaties: houd de HTML licht
HTML-prestaties gaan niet alleen over bestandsgrootte. Zoals sectie 4 liet zien, wordt elk element een knoop die de browser moet bouwen, opmaken, plaatsen en bijwerken. Een zware pagina kan traag zijn zelfs met kleine afbeeldingen, omdat de DOM zelf te groot is.
15.1 DOM-grootte telt
Een kleine, ondiepe DOM is snel: snel te ontleden, goedkoop te plaatsen, en licht voor JavaScript om te doorzoeken en te veranderen. Een grote, diep geneste DOM vertraagt elk van die stappen, en gereedschappen zoals Lighthouse waarschuwen wanneer een pagina te veel elementen heeft of ze te diep nestelt. Schone HTML is een prestatiefunctie, niet alleen een kwestie van netheid.
15.2 Waar Joomla-bloat vandaan komt
De meeste te grote Joomla-pagina's groeien om een handvol bekende redenen:
- Te veel modules gepubliceerd op een pagina, elk met een eigen wikkel.
- Zware module-chrome of extra geneste wikkels waar een lichtere stijl zou volstaan.
- Page-builder-inhoud die elke regel in meerdere
<div>-tags wikkelt. - Een tweede, verborgen mobiel menu dat het desktopmenu dupliceert.
- Grote tabellen, herhaalde inline-SVG-iconen en zware embeds van derden.
15.3 Snoei de markup
De oplossingen volgen de oorzaken. Depubliceer modules die een pagina niet nodig heeft, kies een lichtere chrome (sectie 5.3) of none, en vereenvoudig de markup in je overrides. Voeg loading="lazy" toe aan afbeeldingen onder de vouw (sectie 9.3) zodat ze alleen laden wanneer dat nodig is. Als je een page builder afweegt, onthoud dan dat het gemak je vaak een veel grotere DOM kost. Goed Joomla-prestatiewerk omvat het bekijken van de gegenereerde HTML, niet alleen het comprimeren van afbeeldingen en het inschakelen van cache.
16. HTML valideren en debuggen
De meeste HTML-problemen zijn makkelijk te vinden zodra je naar de werkelijke markup kijkt die de browser ontving, niet naar de bron waarvan je denkt dat je hem schreef. Een paar gereedschappen doen bijna al dit werk.
16.1 De developer tools van de browser
Druk op F12, of klik met rechts op een element en kies Inspecteren. De browser toont de levende DOM-boom, het element waarop je klikte, en hoe alles nestelt. Zoals sectie 4.3 uitlegde, is dit de DOM nadat JavaScript heeft gedraaid; gebruik Paginabron bekijken ernaast om de ruwe HTML te zien die Joomla verstuurde. De andere panelen helpen ook: het Netwerk-tabblad toont welke bestanden laadden, het Toegankelijkheids-paneel toont rollen en labels, en Lighthouse beoordeelt prestaties en toegankelijkheid in een rapport.
16.2 HTML-validatie
Een validator controleert je HTML tegen de standaard en meldt fouten zoals niet-gesloten tags, dubbele id's, of elementen die op de verkeerde plek genest zijn. De officiele W3C-validator op validator.w3.org kan een live-URL controleren. Geldige HTML is voorspelbaarder over browsers heen en makkelijker te lezen voor zoekmachines en hulptechnologie.
16.3 Veelvoorkomende valkuilen met ongeldige markup
- Niet-gesloten tags: een ontbrekende
</div>verschuift de hele lay-out. De inspector toont waar de nesting misgaat. - Dubbele id's: een
idmoet uniek zijn op een pagina; twee dezelfde breken CSS en JavaScript die erop mikken. Dit is makkelijk te veroorzaken in een override. - Blok in inline: een
<div>in een<a>of een<p>zetten kan verrassende resultaten geven. - Geplakte markup: inhoud geplakt uit Word of een andere site draagt vaak gebroken of betekenisloze tags mee; ruim die op bij het plakken.
17. SEO, metadata en gestructureerde data
Zoekmachines lezen HTML, dus de kwaliteit van je markup beinvloedt rechtstreeks hoe goed een pagina kan ranken. Het meeste van SEO op HTML-niveau is simpelweg goede, semantische structuur.
17.1 Semantische HTML helpt bij de ranking
- Een duidelijke
<h1>per pagina en een geordende kopstructuur vertellen een zoekmachine waar de pagina over gaat en hoe die is ingedeeld. - Beschrijvende linktekst (
<a>met echte woorden, niet "klik hier") helpt zowel gebruikers als crawlers. - Betekenisvolle
alt-tekst laat afbeeldingen in afbeeldingszoekresultaten verschijnen en beschrijft ze wanneer ze niet kunnen laden. - Een responsieve, geldige, lichte lay-out is mobielvriendelijk en snel, beide rankingfactoren.
17.2 Metatags en Open Graph
Joomla schrijft de basis-metatags voor je: de titel, de meta-omschrijving, de viewport en de tekenset. Je stelt de titel en omschrijving per artikel of menu-item in, in de tabbladen Publiceren en Metadata, en Joomla zet ze in de head. Voor delen op sociale media bepalen Open Graph-tags (og:title, og:image) hoe een link op sociale media eruitziet; de kern voegt deze niet standaard toe, dus een plugin, template of een vermelding toegevoegd met $doc->setMetaData() levert ze aan.
17.3 Gestructureerde data (Schema.org)
Gestructureerde data is extra, machineleesbare informatie die je aan een pagina toevoegt om te beschrijven wat het is (een artikel, een product, een evenement, een recept), meestal als een blok JSON-LD in de head. Zoekmachines gebruiken het voor rijke resultaten zoals sterbeoordelingen en FAQ-panelen:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Focus op HTML in Joomla"
}
</script>Joomla geeft niet standaard schema.org-data uit; je voegt het toe met een plugin of template, of door een JSON-LD-script via het document in te voegen. Zorg dat het overeenkomt met de zichtbare inhoud: voeg geen misleidende schema toe, wat zoekmachines kunnen bestraffen.
Naar boven18. Veelgemaakte fouten en valkuilen
18.1 Kernbestanden bewerken in plaats van een override gebruiken
Symptoom: je HTML-wijziging aan een artikel-layout of module verdwijnt na een Joomla-update.
Oplossing: bewerk nooit bestanden in components/, modules/ of een kerntemplate. Maak een template-override (sectie 8), die updates overleeft.
18.2 Niet-semantische, alleen-div-markup
Symptoom: een lay-out werkt visueel maar is lastig te begrijpen voor zoekmachines en schermlezers.
Oplossing: gebruik het element dat past bij de betekenis, een kop voor een kop, een lijst voor een lijst, een <nav> voor navigatie, en geef het opmaak met CSS in plaats van alles in <div>-tags te wikkelen.
18.3 Kopniveaus overslaan
Symptoom: koppen springen van <h1> naar <h4> om een bepaalde grootte te krijgen, en de documentstructuur is gebroken.
Oplossing: kies het juiste kopniveau voor de structuur en stel de grootte in met CSS. Een <h1>, daarna geordende <h2> en <h3>.
18.4 Rommelige HTML uit Word plakken
Symptoom: een artikel draagt vreemde witruimte en inline-stijlen en negeert je stylesheet.
Oplossing: plak als platte tekst of gebruik de plak-opschoning van de editor, en maak daarna op met de knoppen van de editor. Houd opmaak in CSS, niet in geplakte inline-stijlen.
18.5 Een opgeblazen DOM door te veel markup
Symptoom: de pagina voelt traag bij het renderen, ook al zijn de afbeeldingen klein.
Oplossing: verminder het aantal gepubliceerde modules, kies een lichtere chrome, en vereenvoudig page-builder- of override-markup zodat de DOM klein blijft (sectie 15).
18.6 Aanklikbare div's in plaats van knoppen of links
Symptoom: een bediening werkt met de muis maar een toetsenbordgebruiker kan hem niet bereiken of activeren.
Oplossing: gebruik een echte <button> voor acties en een <a> voor navigatie, die standaard toetsenbordtoegankelijk zijn (sectie 14.4).
18.7 Ontbrekende alt-tekst en labels
Symptoom: afbeeldingen hebben geen alt en formuliervelden hebben geen echte labels, dus de site faalt toegankelijkheidscontroles.
Oplossing: voeg betekenisvolle alt-tekst toe aan inhoudsafbeeldingen (leeg alt voor decoratieve), en leun op Joomla-formulieren, die velden correct labelen.
19. Best practices
Als je maar een paar dingen uit dit artikel onthoudt, onthoud dan deze:
- Schrijf semantische HTML: kies het element op betekenis, en laat het uiterlijk aan CSS.
- Houd een
<h1>en een<main>per pagina, en orden je koppen zonder niveaus over te slaan. - Verander de markup van Joomla met een template-override (in een child-template voor serieus werk), nooit door kernbestanden te bewerken.
- Laat Joomla de pagina bouwen: stel de titel en metadata in via het document, en gebruik
<jdoc:include>-gebieden in het template. - Gebruik HTMLHelper voor veelvoorkomende markup en escape altijd data die je met de hand afdrukt.
- Bouw formulieren met het Joomla-Form-systeem zodat labels en invoervelden standaard toegankelijk zijn.
- Grijp naar moderne ingebouwde elementen (
details,dialog,picture,figure) voordat je JavaScript toevoegt. - Houd de DOM licht: minder modules, lichtere chrome, eenvoudigere markup, lazy-geladen afbeeldingen.
- Stel tekstfilters per gebruikersgroep in op het laagste vertrouwen waarmee mensen nog kunnen werken.
- Voeg betekenisvolle
alt-tekst toe, houd de skip-link en landmarks, en gebruik ARIA alleen om echte gaten te vullen. - Help SEO met een schone structuur, goede titels en omschrijvingen, en accurate gestructureerde data.
- Debug met Paginabron bekijken en Inspecteren, en valideer je HTML wanneer iets er fout uitziet.
20. In het kort
WAT HET IS HTML is de inhoud en structuur; CSS het uiterlijk, JS het gedrag
SEMANTISCH Kies het element op betekenis (h2, ul, nav), maak op met CSS
GEBOUWD DOOR PHP op de server; de browser ontvangt afgewerkte HTML
DOM Browser ontleedt HTML tot de DOM-boom; JS kan die daarna wijzigen
BRON vs DOM Paginabron = wat Joomla verstuurde; Inspecteren = levende DOM na JS
DOCUMENT $doc = Factory::getApplication()->getDocument();
TITEL ZETTEN $doc->setTitle('...'); $doc->setDescription('...')
TEMPLATESKELET templates/cassiopeia/index.php (doctype, head, body)
JDOC-TAGS <jdoc:include type="metas|styles|scripts|component|modules|message" />
MODULEPOSITIE <jdoc:include type="modules" name="sidebar-right" style="card" />
LANDMARKS header, nav, main (een), article, section, aside, footer
KOPPEN Een h1 per pagina; orden h2 -> h3, geen overgeslagen niveaus
COMPONENT-HTML components/com_content/tmpl/article/default.php
OVERRIDE templates/cassiopeia/html/com_content/article/default.php
OVERRIDE MAKEN Systeem → Site-templates → Cassiopeia → Overrides aanmaken
MODERNE EL <details>/<summary>, <dialog>, <picture>, <figure>, <template>
RESP. BEELD <picture> + WebP-source; voeg loading="lazy" toe onder de vouw
EDITOR TinyMCE schrijft de HTML; codeweergave (</>) toont ruwe HTML
CUSTOM HTML mod_custom voor een vrij blok HTML op een positie
TEKSTFILTERS Globale configuratie → Tekstfilters, per gebruikersgroep
VANUIT PHP HTMLHelper::_('image'|'link'|'date', ...)
ESCAPE <?php echo $this->escape($value); ?> altijd voor ruwe data
FORMULIEREN XML <field type="..."> rendert toegankelijk invoerveld + label
DOC-TYPES html (standaard), json, feed, raw, xml via &format=
PRESTATIES Kleinere, ondiepere DOM ontleedt en tekent sneller
TOEGANKELIJK alt-tekst, echte labels, skip-link, knop vs link, ARIA als laatste
SEO een h1, goede titels/omschrijvingen, Open Graph, JSON-LD
DEBUG F12 / Inspecteren voor levende DOM; validator.w3.org om te valideren
GEEN CORE-HACK Override, child-template, plugin of extensie - nooit de kern21. Samenvatting
HTML is de basis van elke Joomla-pagina. PHP bouwt het op de server, CSS geeft het opmaak, en JavaScript voegt gedrag toe, maar de HTML-structuur is wat elke browser, zoekmachine en schermlezer als eerste leest. Joomla 6 brengt schone, semantische HTML5 voort en geeft je veilige manieren om die te vormen:
- Semantische structuur: landmark-elementen, een
<h1>en geordende koppen dragen de betekenis waar machines en hulptechnologie op leunen. - Het template-skelet:
index.phpen<jdoc:include>-tags stellen de head, het component, de modules en de berichten samen tot een pagina die de browser omzet in de DOM. - Template-overrides: de juiste manier om de markup van Joomla te veranderen, bewaard in je template zodat updates die nooit wissen.
- Schone inhoudsgereedschappen: de editor, de Custom-module, moderne ingebouwde elementen en tekstfilters per groep houden artikel-HTML consistent en veilig.
- Licht, toegankelijk en vindbaar: een kleine DOM, helpers en formulieren die correcte markup voortbrengen, echte alt-tekst en labels, en goede metadata houden de site snel en makkelijk leesbaar.
De meeste HTML-problemen op een Joomla-site zijn niet moeilijk. Het is markup die in een kernbestand is bewerkt en bij de update verloren ging, een lay-out gebouwd uit betekenisloze <div>-tags, koppen gekozen om hun grootte, rommelige HTML geplakt uit een tekstverwerker, of een DOM zo groot dat de pagina sleept. Elk daarvan is snel te repareren zodra je weet waar Joomla verwacht dat eigen markup thuishoort en hoe het een pagina bouwt.
Als je site rommelige markup uitgeeft, een toegankelijkheidscontrole faalt, je lay-outwijzigingen na elke update kwijtraakt, of zwaarder aanvoelt dan zou moeten, dan zitten de oorzaak en de oplossing meestal in hoe de HTML is gestructureerd en waar die wordt veranderd. Dat is precies het soort Joomla-template- en frontendwerk waarmee ik help, zodat een site jarenlang goed gestructureerd, toegankelijk, snel en makkelijk te onderhouden blijft.
Naar boven
Veelgestelde vragen
HTML vormt de basis van elke Joomla-pagina. Het bepaalt de structuur en betekenis van je inhoud, waaronder koppen, alinea’s, lijsten, afbeeldingen, tabellen, formulieren en navigatie. Joomla genereert HTML op de server met behulp van PHP, waarna CSS de opmaak regelt en JavaScript voor interactiviteit zorgt. Schone HTML verbetert de SEO, de toegankelijkheid en de prestaties van de pagina.
Joomla genereert HTML door inhoud, modules, menu’s, componenten en een sjabloon te combineren. PHP haalt gegevens op uit de database, het sjabloon stelt de pagina samen met behulp van jdoc:include-tags, en de uiteindelijke HTML wordt naar de browser verzonden. Zoekmachines en schermlezers zien alleen deze gegenereerde HTML, niet de onderliggende PHP-code.
Elke technologie heeft een specifieke rol:
- HTML zorgt voor de structuur en de inhoud.
- CSS bepaalt de visuele weergave.
- JavaScript zorgt voor interactief gedrag.
Door deze taken gescheiden te houden, zijn Joomla-websites gemakkelijker te onderhouden, laden ze sneller en zijn ze beter toegankelijk.
Met template overrides kun je de HTML-uitvoer van Joomla componenten en modules aanpassen zonder de Joomla core te wijzigen. Omdat overrides na Joomla updates behouden blijven, zijn ze de aanbevolen manier om de opmaak aan te passen, de toegankelijkheid te verbeteren, SEO te optimaliseren of het ontwerp van je website aan te passen.
Semantische HTML maakt gebruik van elementen zoals koppen, lijsten, navigatie, artikelen en formulieren om het doel van de inhoud te beschrijven. Zoekmachines begrijpen de paginastructuur hierdoor beter, terwijl schermlezers effectiever door de inhoud kunnen navigeren. Goed gestructureerde HTML helpt ook AI-zoekmachines en grote taalmodellen bij het interpreteren van je pagina’s.
Joomla bevat verschillende hulpmiddelen voor het genereren van schone, onderhoudsvriendelijke HTML:
- Template bestanden bepalen de paginastructuur.
jdoc:includevoegt componenten, modules en metagegevens in.- Met template overrides kan de uitvoer veilig worden aangepast.
HTMLHelpermaakt veelgebruikte HTML-elementen op een consistente manier aan.- Joomla Forms genereert veilige, toegankelijke formulieren met een minimum aan code.
Samen helpen deze tools ontwikkelaars bij het maken van snelle, aan de standaarden conforme en SEO-vriendelijke Joomla websites die eenvoudig te onderhouden blijven.
