Design system ten op zichte van HTML

<a>

  • Link component.
  • Pagination component.
  • Skip link component.
  • Link that looks like a button component.
  • Breadcrumb navigation

<article>

  • Article component

<blockquote>

  • Blockquote component

<button>

  • Button component
  • Button that looks like a link component

<code>

  • Code component

<dialog>

  • Alert dialog component
  • Backdrop component

<dl>, <dd> en <dd>

  • Data list component

<fieldset>

  • Fieldset component
  • Radio group
  • Checkbox group

<figure>

  • Figure component

<footer>

  • Page footer component

<h1>, <h2>, <h3>, <h4>, <h5> en <h6>

  • Heading component
  • Heading 1 component
  • Heading 2 component
  • Heading 3 component
  • Heading 4 component
  • Heading 5 component
  • Heading 6 component

<hgroup>

  • Heading group component

<header>

  • Page footer component

<hr>

  • Separator component

<html>

  • Document component

<img>

  • Image component
  • Logo component

<input type="checkbox">

  • Checkbox component
  • Custom checkbox component

<input type="radio">

  • Radio component
  • Custom radio button component

<input type="search">

  • Search bar component
  • Textbox component

<input type="text">

  • Checkbox component
  • Custom checkbox component

<label>

  • Form label component

<link>

  • Alternate language navigation
  • Favicon

<mark>

  • Mark navigation

<nav>

  • Alternate language navigation
  • Breadcrumb navigation

Gebruik nav niet voor de skip link navigation.

<ol>

  • Ordered list component

<option>

  • Option element van het select component

<li>

  • Ordered list component
  • Unordered list component

<main>

  • main content element van het page content component

<p>

  • Paragraph component

<pre>

  • Code block component

<select>

  • Select component

<small>

  • Small-print variant van de paragraph component.

<table>

  • Table component

<textarea>

  • Textarea component

<title>

  • Page title component

<ul>

  • Unordered list component

title attribute

Vermijd het title attribuut, omdat een tooltip met deze tekst andere content kan verbergen. Er zijn goede alternatieven. Uitzondering: title voor <iframe>. Lees meer: Use title attributes - The A11y project.