Iedereen met enige achtergrond van HTML kent de b, strong, i en em elementen. De b en i zijn algemeen bekend omdat deze staan voor ‘bold’ en ‘italic’. In dit artikel leer je alles wat je moet weten over deze HTML elementen, hoe WordPress dit toepast in hun WYSIWYG-editor en hoe je dit het beste kunt toepassen voor SEO.
In dit artikel:
- Bold en Italic in de WordPress editor
- Het strong element
- Het b element
- Het em element
- Het i element
- Vetgedrukte tekst en SEO
Bold en Italic in de WordPress editor
Je ziet ‘bold’ en ‘italic’ in de WordPress editor, zie onderstaande afbeelding.
Je zult dit vast wel eens gebruikt hebben om enkele woorden in je tekst een ander uiterlijk te geven. De ‘b’ gebruik je om iets vetgedrukt te maken en de ‘i’ gebruik je om iets schuingedrukt weer te geven. Dit is echter ook meteen de reden om hier een artikel over te schrijven. Normaal gesproken gebruik je HTML elementen voor de opbouw en structuur van een webpagina en niet om iets een ander uiterlijk te geven. Voor het laaste gebruiken we immers CSS. En heb je bovendien gezien welke HTML code gegenereerd word door WordPress als je iets vetgedrukt of schuingedrukt maakt?
Vetgedrukt
SchuingedruktHad je hier niet stiekem onderstaande verwacht?
Vetgedrukt
SchuingedruktBeide geven qua uiterlijk hetzelfde resultaat in onze browsers, namelijk vetgedrukt en schuingedrukt. Dus wat is nou het verschil?
Het strong element
In de Beginnershandleiding voor zoekmachineoptimalisatie (SEO) van Google wordt het volgende vertelt over het strong element.
Een HTML-tag die sterke nadruk aangeeft (strong emphasis). Volgens de standaard wordt deze nadruk aangegeven door de tekst vetgedrukt weer te geven.
Natuurlijk raadplegen we ook de W3C Editor’s Draft van 22 oktober 2013. Zij geven de volgende betekenis aan een strong element.
The strong element represents strong importance for its contents.
The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
De conclusies zijn:
- de inhoud van een strong element is erg belangrijk;
- je kunt strong elementen nesten, waardoor de inhoud van een genest strong element nog meer toeneemt;
- het gebruik van strong elementen veranderd niet de betekenis van de zin.
Het b element
Voor de betekenis van het b element zijn we alleen toegewezen op de W3C Editor’s Draft van 22 oktober 2013. Wat betreft de SEO startersgids lijkt dit element dus niet te bestaan.
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
Het hoge niveau van Engels maakt het niet altijd eenvoudig om alles te begrijpen. ‘Utilitarian purposes‘ duidt op praktische redenen en ‘document abstract‘ is een kort document dat de interesse moet wekken voor het lezen van een volledig artikel.
De conclusies zijn:
- een b element kun je gebruiken voor tekst waar, om praktische redenen, de aandacht naar toe getrokken moet worden;
- een b element maakt de tekst niet belangrijker en geeft geen reden om te tekst op een andere toon uit te spreken;
- voorbeelden voor gebruik zijn productnamen in reviews of een introducerende paragraaf van een artikel.
Hoewel elke browser de tekst vetgedrukt weergeeft is het niet noodzakelijk dit zo te houden. Het uiterlijk van een b element mag gewoon aangepast worden middels CSS.
Style sheets can be used to format b elements, just like any other element can be restyled. Thus, it is not the case that content in b elements will necessarily be boldened.
Op SEO vlak doet het verhaal de ronde dat je belangrijke woorden van je tekst vetgedrukt moet weergeven. Nu weten we dat om semantische redenen het strong element niet altijd de beste keuze is. WordPress gebruikt echter wel altijd het strong element. Ik ben overigens van mening dat je alleen woorden vetgedrukt moet maken voor de lezer van het artikel, zodat het de leesbaarheid van de tekst bevorderd. De tekst vetgedrukt maken is dan een praktische reden. Zoals we net geleerd hebben is het b element daar het meest geschikt voor. De button in WordPress maakt de tekst vetgedrukt met het strong element, nu blijkt dit semantisch dus niet de beste keuze te zijn.
Het em element
In de Beginnershandleiding voor zoekmachineoptimalisatie (SEO) van Google wordt het volgende vertelt over het em element.
Een HTML-tag die nadruk aangeeft (emphasis). Volgens de standaard wordt deze
nadruk aangegeven door de tekst cursief weer te geven.
Natuurlijk raadplegen we ook de W3C Editor’s Draft van 22 oktober 2013. Zij geven de volgende betekenis aan een strong element.
The em element represents stress emphasis of its contents.
The level of stress that a particular piece of content has is given by its number of ancestor em elements.
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.
De conclusies zijn:
- het em element wordt gebruikt om iets te benadrukken;
- je kunt em elementen nesten, waardoor de nadruk van een genest em element nog meer toeneemt;
- het em element veranderd wel degelijk de betekenis van een zin.
Hoe het em element de betekenis van een zin veranderd komt nogal exact. Ik verwijs je hiervoor graag naar W3.org, ik brand mijn vingers er niet aan. Al met al lijkt het erop dat het i element meer geschikt is voor schuingedrukte tekst zoals het meestal in de praktijk wordt toegepast.
The em element isn’t a generic “italics” element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.
Eén van mijn klanten maakte laatst gebruik van de i knop in WordPress om op een vragende zin extra nadruk te leggen. Dit valt bij mij onder ‘a different mood or voice’. WordPress past automatisch het em element doet, terwijl het i element hier meer van toepassing zou zijn geweest. Sterker nog, het gebruik van het em element komt zo precies omdat het de betekenis van een zin veranderd, dat ik mijn klanten afraad om de i knop in WordPress te gebruiken. WordPress zou op zijn minst beide mogelijkheden aan moeten bieden, en niet het em element als een algemeen element moeten gebruiken, zoals in de quote hierboven ook wordt afgeraden.
En dit is er nog één om aan de conclusie toe te voegen:
The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.
Het i element
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).
De conclusies zijn:
- het i element staat voor tekst dat je op een andere toon uitspreekt of voor tekst dat anders is dan de normale tekst;
- voorbeelden zijn een taxanomische benaming, een technische term, idiomatische uitdrukkingen in een andere taal, transliteratie, een gedachte of droom of een benaming van een Westers schips.
Hoewel elke browser de tekst schuingedrukt weergeeft is het niet noodzakelijk dit zo te houden. Het uiterlijk van een i element mag gewoon aangepast worden middels CSS. Zo kun je dus een ander uiterlijk geven aan tekst die een gedachte weerspiegelt dan bijvoorbeeld tekst dat een technische term moet voorstellen.
Style sheets can be used to format i elements, just like any other element can be restyled. Thus, it is not the case that content in i elements will necessarily be italicized.
Vetgedrukte tekst en SEO
Toevallig heeft Matt Cutts van Google gisteren antwoord gegeven op de vraag of er qua SEO een verschil is tussen gebruik van het strong en b element. Volgens de vraagsteller is er immers voor de gebruiker geen verschil omdat deze altijd een vetgedrukte tekst ziet. Zoals je nu inmiddels weet is dat niet altijd het geval omdat het b element niet per definitie vetgedrukt hoeft te zijn maar via CSS een anderlijk uiterlijk kan krijgen. Dat maakt de video natuurlijk niet minder nuttig. Veel kijkplezier.
De conclusie is dat Google geen verschil maakt tussen strong en b elementen. Als je dus niet veel geeft om correct HTML gebruik dan kun je de b knop in WordPress dus gerust gebruiken wat Google betreft. Hetzelfde geldt overigens voor de em en i elementen.
Geef een reactie