HTML-modus in een cms: onmisbaar voor de webredacteur
Even iets fixen in HTML. Dat kan niet in ieder contentmanagementsysteem (cms). Soms halen webbureaus deze mogelijkheid weg. Ze willen voorkomen dat webredacteuren er ‘verkeerde’ code mee kunnen invoeren. Ten onrechte. 10 redenen waarom een goed cms wel een HTML-modus nodig heeft.
Even vooraf: wat is de HTML-modus?
Vrijwel alle websites hebben tegenwoordig een contentmanagementsysteem (cms), waarmee webredacteuren content kunnen onderhouden. Vaak gaat het tekstonderhoud via een zogenaamde wysiwyg-editor. Wysiwyg staat voor 'What You See Is What You Get', vergelijkbaar met hoe een programma als Word werkt. Daarnaast bieden veel cms-en ook de mogelijkheid om direct de HTML-code te bewerken. Dat is de HTML-modus.
Reden 1. Rommelcode verwijderen
Als webredacteur heb je vast wel eens rare opmaak gezien in een pagina. Dat komt meestal doordat iemand tekst vanuit Word of een webpagina gekopieerd heeft en in het cms heeft geplaatst. Helaas komt er dan soms ook ongewenste opmaakcode mee. Dat zorgt voor een verkeerde opmaak van de tekst.
Het kan gaan om allerlei rare code die meekomt, bijvoorbeeld om code zoals hieronder:
<p><font color="#000000" face="Times New Roman" size="3">Wanneer u de verblijfsvergunning</font> asiel voor onbepaalde tijd&160;aanvraagt hangt af van uw situatie.&160;</p></p><p>
<h3>Hebt u nog nooit eerder  uw  verblijfsvergunning  verlengd?    </h3>
<p>Laat officiële buitenlandse documenten <a href="/Paginas/Legalisatie-en-vertaling-van-documenten.aspx"><font color="#0066cc">legaliseren en vertalen</font></a> naar het Nederlands, In dit voorbeeld hierboven staan ook zogenaamde 'non-breaking spaces', in het Nederlands vaste spaties of ook wel 'plakspaties' genoemd. De HTML-code daarvoor is   of . Een vaste spatie tussen 2 woorden zorgt ervoor dat de woorden niet op verschillende regels komen, maar aan elkaar 'vastgeplakt' blijven. Vaak komt deze code onterecht mee bij het kopiëren en plakken van een tekst. Dit zorgt ervoor dat tekst vreemd wordt afgebroken. Je kunt deze het beste verwijderen.
Met de wysiwyg-editor zie je deze foute code meestal niet en weghalen is vaak ingewikkeld. Met de HTML-modus daarentegen zie je de verkeerde code direct en kun je deze eenvoudig verwijderen.
Reden 2. Tabel opmaken met rij- en kolomkoppen
Voor het toegankelijk opmaken van een tabel is de HTML-modus heel handig en soms echt nodig. We gaan even uit van een tabel met kolomkoppen en rijkoppen. Voor de opmaak moeten deze koppen de tag <th> krijgen. Behalve de 1e cel linksboven: dat moet een <td> blijven. De meeste cms-en bieden een tool om een toegankelijke tabel te maken, maar die maken meestal van de 1e cel een <th>.
Een ander probleem doet zich voor als je achteraf nog een rij of kolom moet toevoegen aan een tabel. De tools kunnen dat vaak niet goed, dus moet je de tabel helemaal opnieuw maken. Dat is vaak nogal wat werk.
Veel makkelijker is het als de redacteur via de HTML-modus de code eenvoudig kan aanpassen. Want de HTML-code van een tabel is niet ingewikkeld.
Reden 3. Tabel gebruiken voor lay-out
In sommige situaties kan het handig zijn om een tabel te gebruiken om tekst netjes uit te lijnen, bijvoorbeeld bij openingstijden:
Aan deze tabel moet je echter wel toevoegen dat deze gebruikt is voor presentatie, namelijk met de rol presentatie:<table role="presentation">
Dit kan de redacteur alleen toevoegen in de HTML-modus.
Reden 4. Embedded code aanpassen van YouTube of Vimeo
Als je een video embedt vanuit YouTube, krijg je een stukje embedded code van YouTube, die je zo in je cms kunt plakken. Helaas is die code niet optimaal. Er ontbreekt onder andere een goede tekst in het title-attribuut. Via de HTML-modus is deze eenvoudig aan te passen. Ook code om de video responsive te maken kun je zo toevoegen.
Reden 5. Opsomming in opsomming
Dit is iets waar redacteuren soms gek van worden: een opsomming in een opsomming. Want veel cms-en maken hier een rommeltje van. Dan krijg je opsommingen als deze:
- Huisdieren
-
- Hond
- Kat
Het probleem is dat de 2e opsomming moet starten in een geopende <li>. Lukt dit niet met de wysiwyg-modus, dan kan dat alleen met de HTML-modus. En goed opgemaakt ziet het er dan zo uit:
- Huisdieren
- Hond
- Kat
Reden 6. Code testen op testpagina
Soms wil je als redacteur even wat uitproberen op een testpagina, bijvoorbeeld extra marges bij de kopstijlen. Dat kan alleen met de HTML-modus, want je wilt ook CSS-code toevoegen. Dan weet je precies hoe je het gewijzigd wilt hebben en kun je met een duidelijk voorstel naar de webbouwer.
Reden 7. Taalwissel toepassen
Een taalwissel is nodig als je een kort stukje tekst in een andere taal hebt. Dat ziet er in de code als volgt uit:
<p><span lang="en">'Never waste a good crisis'</span> is een bekende uitspraak van Winston Churchill.</p>
Sommige cms-en bieden deze mogelijkheid. Heb je deze niet, dan kan dat in de HTML-modus.
Reden 8. Bedragen koppelen aan het euroteken
Soms wil je juist wel dat 2 woorden aan elkaar geplakt blijven, bijvoorbeeld het euroteken en het bedrag. Of een telefoonnummer. Dat kan met de volgende code:
<span style="white-space: nowrap;">€ 123,12</span>
Ook dit kan alleen met de HTML-modus.
Reden 9. HTML-code plakken
Voor complexere teksten en tabellen kan het handig zijn om de HTML eerst in een teksteditor of ander programma te maken. Of je hebt een applicatie die code genereert. In beide gevallen is het handig om deze code direct via de HTML-modus in je cms te kunnen plakken.
Reden 10. Er is geen reden om de HTML-modus weg te halen
Met deze reden had ik beter kunnen beginnen: er is mijns inziens geen reden om deze HTML-modus weg te halen. Waarom doen webbureaus dat dan toch? Argumenten die ik gehoord heb:
| Argument: | "We willen niet dat mensen gevaarlijke JavaScripts invoegen." |
| Tegenargument: | Dat kan heel makkelijk voorkomen worden door JavaScripts direct weg te filteren, zodra de pagina wordt opgeslagen. |
| Argument: | "We willen niet dat redacteuren er een rommeltje van maken." |
| Tegenargument: | Ten 1e lijkt mij dat iets voor de organisatie om te beslissen. Ten 2e zou ik dan niet bij voorbaat iets onmogelijk maken, maar eerst kijken of die vrees terecht is (gebeurt dit überhaupt?). Ten 3e ga ik uit van een professioneel webteam dat weet waar zij mee bezig is. Webteams zijn tegenwoordig centraal, niet zoals vroeger decentraal. |
Nog andere argumenten voor of bezwaren tegen een HTML-modus? Of kloppen bepaalde redenen die ik noem niet? Ik hoor het graag.
Reacties zijn welkom op LinkedIn.
Nagekomen tips
Bijschrift bij afbeelding
Het is opvallend hoe weinig overheden gebruik maken van een bijschrift bij een foto. De reden? Hun CMS biedt de mogelijkheid niet! Vandaar dat het voor de redacteur belangrijk is om in de HTML-code zelf een bijschrift te kunnen plaatsen.
De code voor een afbeelding met een bijschrift is:
<figure> <img src="img/wysiwyg2.png" alt="zie bijschrift"> <figcaption>Wysiwyg-editor met HTML-modus</figcaption> </figure>
Vaak is de opmaak niet goed. Vraag je webbouwer om deze figcaption nog verder te stijlen met css. Wij gebruiken de volgende css voor captions:
figcaption { text-align: center; color: #555; }
Afbreken van lange woorden
Sommige woorden zijn zo lang dat ze op de mobiele versie van een website niet op 1 regel passen.
Je kunt dit oplossen met een klein beetje extra code. Op een plek waar het lange woord afgebroken kan worden zet je de code '­', zoals in het voorbeeld hieronder:
Echtscheidings­procedure
Op desktop zie je dan gewoon 'Echtscheidingsprocedure' en op mobiel 'Echtscheidings-procedure'.