~uglyduck/uglyduck.srht.site

ref: 327101a41134614ca313db49525e7846b6b7efed uglyduck.srht.site/_site/html-like-1999/index.html -rw-r--r-- 7.3 KiB
327101a4 — Bradley Taunt Slowly running through past articles to ensure proper layout and styling 6 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
    
      Write HTML Like It's 1999 &middot; Ugly Duck
    
  </title>
  <meta name="description" content="Breaking down some easy steps to ensure you are writing clean and semantic">
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="alternate" type="application/atom+xml" title="Ugly Duck" href="/feed.xml">
  <link rel="stylesheet" href="/style.css">
</head>


  <body>
    <header role="banner">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

</header>

    <main id="main" role="main">
      <header>
        <h1>Write HTML Like It's 1999</h1>
      </header>
      <hr>
      <article class="">
        <p><em>Posted on <time datetime="2019-06-07T20:00:00-04:00">June 7, 2019</time></em></p>
        <hr>
        <p><em>I am sure it’s safe to say that most developers love</em> to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer’s life easier. Unfortunately, this sometimes comes at a cost: the HTML structure.</p>

<p>This is why I try my best to write HTML as if I’m stuck with the constraints of the 90s (within reason). What does this mean exactly? It means that <code class="language-plaintext highlighter-rouge">tables</code> are coded with <code class="language-plaintext highlighter-rouge">table</code> elements. Navigations are coded with <code class="language-plaintext highlighter-rouge">nav</code> and ordered/unordered list-items. Form inputs are not set with <code class="language-plaintext highlighter-rouge">display: none</code> and replaced with custom containers. You know, <em>semantic</em> HTML.</p>

<p>To be clear, I’m not advocating for creating projects that <em>look</em> like they belong in the 1990s. I would just prefer developers / designers be more conscious of their HTML <em>skeleton</em>.</p>

<h2 id="bad-html-practices">Bad HTML practices</h2>

<p>Let’s do a very simple breakdown of some of the more common HTML no-nos:</p>

<ul>
<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
<li>Creating tables built out of custom <code>div</code> elements</li>
<li>Over-nesting elements or making overly complex depth to simple components</li>
<li>Content being heavily reliant on JavaScript "injection"</li>
</ul>

<h2 id="good-html-practices">Good HTML practices</h2>

<p>So what should you do in place of these bad HTML implementations?</p>

<ul>
<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
<li>Keep element hierarchy as slim and top level as possible</li>
<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
</ul>

<h2 id="my-basic-structure-test">My basic “structure” test</h2>

<p>I’ve found a pretty simple starting point for testing the <em>bones of a website</em> by using the following single line of CSS:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">*</span> <span class="p">{</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">dotted</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>This property simply outlines all elements on the current page in a dotted border. By placing a border on every HTML element you can instantly see how overly complex or <em>ugly</em> your structure might be under the hood.</p>

<h2 id="thanks-captain-obvious">“Thanks, Captain Obvious!”</h2>

<p>I know, this stuff is pretty basic. The point of this post isn’t to tell you (developers) something brand new or mind-blowing, but instead should inspire you to keep things simple.</p>

<p>Don’t forget that there is always someone new into the world of design and development. Hopefully this post steers others towards keeping HTML code semantic and clean.</p>

<h2 id="️">✌️</h2>

<h2 id="update-to-this-article">Update to this article</h2>

<p>Since this post received <a href="https://news.ycombinator.com/item?id=20133817">so much more attention</a> than I ever expected, I’ve decided to touch on a few small points brought up in the comments.</p>

<ol>
  <li><strong>What is the benefit of semantic HTML?</strong>
    <ul>
      <li>Accessibility. Programs like screen readers are built around the foundation of proper HTML hierarchy. I highly recommend testing all your projects with a screen reader - it will open your eyes to a lot of issues users with disabilities suffer through.</li>
    </ul>
  </li>
  <li><strong>Tables not being responsive</strong>
    <ul>
      <li>This simply isn’t true. It is much more semantic to layout your tables as you would normally, then for mobile devices you can target specific inner elements and alter them with <code class="language-plaintext highlighter-rouge">flexbox</code> etc. (You can see responsive tables in action <a href="https://bradleytaunt.com/2019/06/11/responsive-tables/">here</a>)</li>
    </ul>
  </li>
  <li><strong>Instead of the CSS one-liner, simply use Firefox debugger</strong>
    <ul>
      <li>Fair point. Firefox is great!</li>
    </ul>
  </li>
</ol>

      </article>
      <br>
      <footer role="contentinfo" id="menu">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <hr>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>
    
  </body>
</html>