Omslag van 'Webtechniek voor niet-techneuten'

12. Tekst invoeren met je CMS-editor

De meeste mensen zullen content invoeren via een editor. Dat is heel handig, maar sommige dingen moet je wel even weten. Want het kan ook heel erg mis gaan ... Met copy & paste vanuit Word heb je meestal nog geen goed opgemaakte tekst in je site.

12.1 Semantisch opmaken

Als je een tussenkop in je CMS invoert kun je deze even vet maken. Voor het oog ziet dit er uit als een kop, maar er is in de code niets dat aangeeft dat het een kop is. Daardoor weten zoekmachines en mensen die jouw tekst niet kunnen zien, zoals blinde mensen, niet dat het een kop is. Bij het opmaken heb je dus geen betekenis – of semantiek – meegegeven aan de tekst.

Als je de tussenkop opmaakt met bijvoorbeeld een Kop 2 (heading 2 of h2), dan krijgt het de betekenis van 'kop' wel mee. Kop 2 is een opmaakprofiel en in vrijwel elke editor zit een knop voor het toevoegen van opmaakprofielen.

Opmaakprofilelen in de editor van een CMS

Doordat de tussenkop nu ook opgemaakt is als kop, weten zoekmachines en screenreaders dat de tekst een kop is. En op deze manier is de structuur die jij in de tekst aanbrengt duidelijk voor iedereen.

Semantiek is een kernbegrip van het moderne internet. Het semantische web wordt ook wel Web 3.0 genoemd.

Met semantisch opmaken bedoelen we dat de betekenis die jij aanbrengt in teksten ook opgenomen is in de onderliggende HTML-code.

Voorbeelden van semantische HTML-elementen:

  • Kopopmaakprofielen (headings) voor titels van pagina's en tussenkoppen
  • Opsommingen
  • Tabelkop
  • Legend-element van een fieldset in een formulier
  • Blockquote voor citaten

12.2 Scheiden van opmaak en content

Naast semantiek is de scheiding van opmaak en content ook een kernelement van het web. Bij vorokeur staat alle content in de HTML en alle opmaak in de CSS. Dat is in lijn met de genoemde opmaakprofielen. Bij het gebruik van een opmaakprofiel – zoals kop 2 voor een tussenkop – maak je namelijk niet op, maar geef je de betekenis mee dat de tekstregel een tussenkop is. Via de CSS wordt dit vervolgens opgemaakt zodat het er ook uitziet als een kop. (Meer over HTML en CSS in het hoofdstuk over HTML en CSS.)

Bij het invoeren van teksten en afbeeldingen zorgen we dan ook voor een vrij strikte scheiding van content en opmaak. Dat betekent:

  • Meer ruimte tussen alinea's maak je niet met een extra lege regel, maar door de CSS van de alinea's te wijzigen.
  • Een kop maak je niet gewoon vet via je editor, maar geef je een kopopmaakprofiel mee.
  • Bij het plaatsen van een afbeelding geef je deze niet extra witruimte via het aanpassen van de witruimte om de afbeelding, maar door het juiste opmaakprofiel te kiezen. (zie ook het hoofdstuk over Afbeeldingen).

Een woord vet of cursief maken kan wel, want ook daar geef je in feite semantiek mee aan: dat woord heeft extra nadruk.

12.3 WYSIWYG-modus en tekstmodus

Tegenwoordig heeft elk CMS een zogenaamde What-You-See-Is-What-You-Get-modus (WYSIWYG) voor zijn editor. WYSIWYG is een term die komt uit de Oudheid en is bedoeld om aan te geven dat wat jij op je scherm ziet ook zo uit de printer rolt. (Ja, dat is lang geleden toen ze die term uitvonden.) Je kunt dit vergelijken met Word.

Naast de WYWISYG-modus hebben de meeste editors (gelukkig) ook een tekstmodus of een HTML-modus.

WYSIWYG-modus met knop HTML
In de tekstmodus zie je de volledige HTML-code. Dit is vooral handig als er per ongeluk allemaal HTML-rommelcode meegekomen is bij het kopiëren en plakken vanuit Word.

Tekstmodus of HTML-modus

Kijk even hoe het in eigen CMS zit. Voor het opruimen van die rommelcode is de tekst- of HTML-modus noodzakelijk!

12.4 Rommelcode

Als je werkt met een CMS zul je regelmatig een stukje tekst ergens vandaan halen om die te plaatsen op je eigen site. Dan heb je ook vast wel eens gemerkt dat het niet eenvoudig copy & paste is. Als je dat doet, komt er allerlei rommelcode mee. Wegkrijgen is vaak 'a hell of a job, om gek van te worden, want die rotcode blijft er maar in staan. Hieronder leggen we uit hoe je die ongewenste code kunt voorkomen en kunt verwijderen.

Eerst even een uitleg over die ongewenste HTML-code. Als voorbeeld nemen we onderstaande tekst:

Doel van sociale media

Het doel van sociale media is om zichtbaar te zijn als gemeente, maar vooral om snel online met specifieke doelgroepen in contact te komen, informatie/kennis uit te wisselen en signalen op te pikken uit de samenleving.

We kopiëren dat vanuit Word en plakken dat direct in een CMS-pagina. Als we vervolgens de HTML-code van de pagina bekijken, zien we het volgende:

<p><span style="color: #4f81bd;"><span style="font-family: Cambria,serif;"><span style="font-size: medium;"><b><span style="color: #00000a;"><span style="font-family: Arial,serif;"><span style="font-size: small;">Doel van sociale media</b></span></span></span><br /></p>
<p>Het doel van sociale media is om zichtbaar te zijn als gemeente, maar vooral om snel online met specifieke doelgroepen in contact te komen, informatie/kennis uit te wisselen en signalen op te pikken uit de samenleving.</p>

Wat je ziet is dat er allerlei opmaakcode is meegekomen. Voor de duidelijkheid hebben we die even vet en rood gemaakt. In HTML staat liever geen opmaakcode, want die hoort in de CSS (zie het hoofdstuk over HTML en CSS). Maar nog belangrijker, die opmaak wil je waarschijnlijk helemaal niet.

12.5 Voorkomen van ongewenste code

Er zijn een paar manieren om deze ongewenste meeliftende code te voorkomen. Het is afhankelijk van de editor in je CMS welke methode werkt. De opties, van makkelijk naar moeilijk:

  1. In de WYSIWYG-modus van je editor: plak de tekst met Ctrl-Shift-V (Shft-⌘-V voor Mac-gebruikers)
    • Ga naar de HTML-modus van je editor
    • Plak daar de tekst
    • Ga dan weer terug naar de WYSIWYG-modus.
    • Plak de tekst in Kladblok
    • Kopieer deze
    • Plak deze in je invoerveld in je CMS

Je begrijpt dat optie 3 nogal omslachtig is, en optie 1 het makkelijkst. Probeer het in eens in je CMS. Als optie 1 werkt, ben je een blij mens.

Sommige editors hebben ook een goed werkende schoonmaakfunctie (gummetje: ). Is de rommelcode er toch ingekomen, probeer dit gummetje.

12.6 Controleren op ongewenste HTML-code

Hoe weet je nu of er ongewenste code in je pagina's is geslopen? Je kunt dit checken per pagina of in 1 keer voor de hele site

Bekijk je dit per pagina, bekijk dan de broncode van de pagina. Bij de meeste browsers kun je hiervoor de rechtermuisknop gebruiken. Kies dan "Broncode bekijken" of een vergelijkbare tekst.

Wil je je in 1 keer de hele site controleren, dan kan dat perfect met de tool ScreamingFrog. Zie daarvoor het volgende hoofdstuk Tools om je website te testen.

top

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.