Skip to content

Instantly share code, notes, and snippets.

@fstorr
Last active September 24, 2018 20:47
Show Gist options
  • Save fstorr/7e5b85fac51abbf025b5d68b47535fd1 to your computer and use it in GitHub Desktop.
Save fstorr/7e5b85fac51abbf025b5d68b47535fd1 to your computer and use it in GitHub Desktop.
HTML standards. If only there was such a reference document for developers to use…

Code I have seen and wish I hadn't

Removing the bullets from an unordered list and typing in numbers to create an ordered list

<ul style="list-style:none;">
  <li>1. Something</li>
  <li>2. Something</li>
  <li>3. Something</li>
</ul>

Telling a browser to display a table cell like a table cell

<td style="display:table-cell;">Cell content</td>

Nesting a link inside a button

<button><a href="#" style="color: white;">Link text</a></button>

Another link inside of button, except worse

<button onclick="openPage('…')" a="" href="#">Continue</button>

A table inside a list to create a Home link

<ul>
  <table class="…" border="0" cellpadding="2" cellspacing="5">
    <tbody>
      <tr id="…" class="…" style="display: table-row;">
        <td width="25" padding-left="80px">
          <span class="…">
            <img src="…" alt="" style="border:0;" title="…" data-imgurl="…">
          </span>
          <li id="…" class="…" style="cursor:pointer">
            <a id="…" class="…" href="…" target="_self">
              <span id="…" class="Large (13pt)">Home</span>
            </a>
          </li>
        </td>
      </tr>
    </tbody>
  </table>
</ul>

Unnecessary ARIA attributes, incorrect nesting, way too many nested elements

All that to put a link and a paragraph inside a <li> element.

<ul class="news">
  <aside aria-labelledby="news">
    <div id="news">
      <li class="listdefault">
        <div class="main-container">
          <div class="news-title">
            <a href="…" target="_self" title="…" onclick="…">
              <span aria-label="news-title">…</span>
            </a>
          </div>
          <div class="news-description-container">
            <span class="news-description">…</span>
          </div>
        </div>
      </li>		
    </div>
  </aside>
</ul>

Buttons inside of links

Note: apparently this makes buttons easier to style…

<a href="#article-comment-box" aria-label="comments">
  <button class="comment-btn">
    <span>Comment</span>
  </button>
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment