#35 a perfectly structured button

submitted on by Anne Drotleff

Bad code

<button type="button" onclick="window.open('https://example.com/other-page')">
  <table>
    <tbody>
      <tr>
        <td>
          <i class="fa fa-arrow-left" aria-hidden="true"></i>
        </td>
        <td align="left">Back</td>
      </tr>
    </tbody>
  </table>
</button>

Issues and how to fix them

  1. The HTML isn't valid because the table element isn't allowed as a child of the button element.

  2. Based on the content categories listed on MDN, the table element qualifies as flow content and can only be placed inside an element that expects flow content. The button element, on the other hand, expects phrasing content, not flow content.

  3. The semantic information of the table doesn't cause any issues because the button's content is presentational See Buttons Role on W3C, Presentational Children.

  4. Keep it simple and structure the button element using CSS, such as Flexbox.

  5. Instead of using tables to structure the button element, use phrasing content elements, such as span, img, or SVG.

Good code

<button type="button" onclick="alert('Hello World!')">
  Back
</button>

Resources