Code

Bij het schrijven van toelichting over het gebruik van code is het veelvoorkomend dat een verwijzing naar een specifiek code voorbeeld nodig of behulpzaam is. Maak hierbij gebruik van het <code>-label zodat het voor zowel gebruikers als hulptechnologiën duidelijk is wat voor content getoont wordt.

Code binnen tekst

Voor het toevoegen van voorbeeldcode of toelichting over code binnen teksten.

Om code toe te voegen binnen een tekst kan gebruik gemaakt worden van de <code> tag.
Vervang de < met < om ervoor te zorgen dat de code weergegeven wordt als tekst en niet uitgevoerd wordt door de browser.

Visueel voorbeeld:

<div>

Html-voorbeeld:

                
<code>&lt;div></code>

Code-blok

Voor het toevoegen van voorbeeldcode.

Plaats de <code> binnen een <pre> of een <div> om de code weer te geven als blok.
Vervang alle < met < om ervoor te zorgen dat de code weergegeven wordt als tekst en niet uitgevoerd wordt door de browser.
Het gebruik van de <pre> om de <code> zorgt ervoor dat de tekst exact zo getoont wordt als geschreven binnen het html-bestand. Let op, extra tabs, spaties en enters worden hierbij ook getoond.
Gebruik van <pre> heeft de voorkeur aangezien dit de correcte html-tag is.

Visueel voorbeeld met <pre>:

                
<pre>
  <code>
    <!-- Lorem ipsum -->
  </code>
</pre>

Html-voorbeeld met <pre>:

                
&lt;pre>
  &lt;code>
    &lt;!-- Lorem ipsum -->
  &lt;/code>
&lt;/pre>

Visueel voorbeeld met <div class="code-block">:

            
<div class="code-block">
  <code>
  <!-- Lorem ipsum -->
  </code>
</div>
                
          

Html-voorbeeld met <div class="code-block">:

                
&lt;div class="code-block">
  &lt;code>
  &lt;!-- Lorem ipsum -->
  &lt;/code>
&lt;/div>

Voor meer informatie zie:

Meer informatie over het gebruik van deze html-tags kan gevonden worden via de onderstaande bronnen.