Verkorte titel
Fu3 Gescheiden: fout vanwege het gebruik in HTML van presentatie-opmaak

Volledige titel van de gangbare fout

Fu3: Gangbare fout voor kwaliteitscriterium u.2.1 doordat elementen of attributen in HTML worden gebruikt om presentatiekenmerken aan te geven als uitlijning, kleur, randen, lettertype, lettergrootte, letterbeeld (vet, cursief), onderstreept of doorgehaald

Toepasbaarheid

Alle (X)HTML pagina's.

Deze fout is gerelateerd aan:

• U.2.1 Scheiding van content en presentatie.

Beschrijving

De elementen in HTML zijn bedoeld om de betekenis van de content aan te geven. Dit is echter niet altijd het geval geweest. Inmiddels is een aantal elementen en attributen afgeraden of afgekeurd. De visuele presentatie van content dient door de ontwikkelaar middels een stijltaal of door de style sheet van de user agent te worden bepaald. Om bij te dragen aan de duurzaamheid van HTML-documenten is het tevens van belang dat er geen gebruik wordt gemaakt van afgekeurde of afgeraden eigenschappen, waaronder elementen en attributen in HTML die voor presentatie zijn bedoeld.

Deze gangbare fout is van toepassing indien 1 of meer van de volgende elementen wordt gebruikt:

b, big, basefont, center, dir, font, i, s, small, strike, tt, u

Deze fout geldt ook indien 1 of meer van de volgende voor presentatie bedoelde attributen wordt toegepast:

align (alleen op de elementen caption, applet, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6 en p), alink, alt (alleen op het element applet), archive (alleen op het element applet), background, bgcolor, border (alleen op de elementen img en object), clear, code, codebase (alleen op het element applet), color, cols, compact, face, frameborder, height (alleen op de elementen td en th), hspace, language, link, longdesc (alleen op de elementen frame en iframe), marginheight, marginwidth, name (alleen op de elementen applet, frame en iframe), noresize, noshade, nowrap, onload (alleen op het element frameset), onunload (alleen op het element frameset), prompt, rows (alleen op het element frameset), scrolling (alleen op het element frame), size (alleen op de elementen hr, font en basefont), src (alleen op het element frame), target, start, text, type (alleen op de elementen li, ol en ul), value (alleen op het element li), version, vlink, vspace, width (alleen op de elementen hr, td, th, applet en pre)

Voorbeelden

Opmerking: Voorbeelden hebben uitsluitend een informatieve functie. Het is niet de bedoeling om een succescriterium te beoordelen enkel op basis van de hier gepresenteerde voorbeelden.

(Fout) voorbeeld 1

Het b element wordt gebruikt om een tekst vetgedrukt te maken.

<p>Content en presentatie kunnen worden gescheiden door ze in <b>aparte
bestanden</b> onder te brengen.</p>

(Goed) voorbeeld 1

Tekst wordt vaak cursief of vetgedrukt weergegeven, omdat de cursieve/vetgedrukte tekst nadruk moet krijgen binnen een bepaalde context. De HTML-elementen em en strong zijn hiervoor bedoeld. Het uiterlijk van deze elementen (lees: of ze vetgedrukt zijn, cursief zijn, een specifieke kleur hebben, etc.) wordt bepaald middels CSS.

HTML:

<p>Content en presentatie kunnen worden gescheiden door ze in
<strong>aparte bestanden</strong> onder te brengen.</p>

CSS:

strong { font-weight:bold; }

(Fout) voorbeeld 2

Het font element wordt gebruikt om het lettertype en bijbehorende attributen mee te geven.

<p><font face="Verdana" color="red">Juiste toepassing van de richtlijn
leidt tot een optimale bruikbaarheid in uiteenlopende
gebruikssituaties.</font></p>

(Goed) voorbeeld 2

In plaats van het font element te gebruiken, wordt CSS gebruikt om het gewenste effect te bereiken.

HTML:

<p>Juiste toepassing van de richtlijn leidt tot een optimale bruikbaarheid
in uiteenlopende gebruikssituaties.</p>

CSS:

p {
    font-family: Verdana, sans-serif;
    color: red;
}

Informatiebronnen

Opmerking: Informatiebronnen zijn uitsluitend informatief bedoeld. Ze maken geen deel uit van de Webrichtlijnen. Deze opsomming impliceert geen goedkeuring van de bronnen door de opstellers of toezichthouders van deze specificatie.

• Semantics (HTML5 for Web Developers)

Gerelateerde technieken

• Fu2: Gescheiden: fout vanwege het gebruik van het style attribuut
• Hu6: Scheiden: HTML-versie gebruiken die geen achterhaalde markup toestaat
• Hu7: Scheiden: afgekeurde eigenschappen worden niet gebruikt
• G140: Informatie en structuur scheiden van presentatie om verschillende presentaties mogelijk te maken

Toetsen

Procedure

1. Controleer of minstens 1 van de in deze techniek genoemde elementen of attributen wordt gebruikt.
   • Opmerking: B, I, U en SMALL zijn geen afgekeurde elementen in HTML 5. In een HTML 5 document mogen deze elementen worden toegepast, onder voorwaarde dat ze worden gebruik in overeenstemming met de semantiek die in de specificatie is beschreven.

Verwacht toetsresultaat

De fout is van toepassing - en er wordt dus niet aan het succescriterium voldaan - bij de volgende uitkomst:

• Controle 1 is waar.