13. Tekst invoeren met je CMS-editor

13.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 mensen die blind zijn, 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.

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

13.2 Scheiden van opmaak en content

Naast semantiek is de scheiding van opmaak en content ook een kernelement van het web. Bij voorkeur 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.

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.

13.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.

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.

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

13.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:

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:

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.

Als we bovenstaande code opruimen krijgen we dit:

13.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)
2. • Ga naar de HTML-modus van je editor
   • Plak daar de tekst
   • Ga dan weer terug naar de WYSIWYG-modus.
3. • 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.

13.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 in 1 keer de hele site controleren, dan kan dat perfect met de tool Screaming Frog.