Markup from hell

A collection of bad practices in HTML, copied from real websites.

  1. #16 alt, no wait…, aria-label, no wait…, alt

    submitted on by Spell 
    <a tabindex="0">
      <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine">
        <div>
          <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
        </div>
      </div>
    </a>

  2. #15 letter by letter

    submitted on by Claire 
    <h3>
      <div style="display: block; text-align: start; position: relative;" class="title">
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">H</div>
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">e</div>
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">a</div>
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">d</div>
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">i</div>
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">n</div>
        <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">g</div>
      </div>
    </h3>

  3. #14 not my type

    submitted on by Manuel 
    <a type="button" class="button" href="/signup" tabindex="-1">Sign up</a>

  4. #13 link or label

    submitted on by Odepax 
    <input type="checkbox" id="accept" required>
    <label for="accept">
      <a href="/legal"> I accept the confidentiality policy and data… </a>
    </label>

  5. #12 accessible poll yes/no

    submitted on by Erik 
    <form role="form">
      <h2>Poll title</h2>
      <div id="pollQuestion">Is this accessible?</div>
      <div name="pollGroup" role="radiogroup">
        <div role="radiogroup" aria-label="Poll title">
          <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
          <span>Yes</span>

          <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
          <span>No</span>

          <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
          <span>Maybe</span>

          <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
          <span>Can you repeat the question?</span>
        </div>

        <button type="submit">Vote</button>
      </div>
    </form>