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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="data:,">
<title>Write HTML Like It's 1999</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="write-html-like-its-1999">Write HTML Like It’s 1999</h1>
<p>2019-06-06</p>
<p>I am sure it’s safe to say that most developers love 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>tables</code> are coded with <code>table</code> elements. Navigations are coded with <code>nav</code> and ordered/unordered list-items. Form inputs are not set with <code>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>
<h2 id="good-html-practices">Good HTML practices</h2>
<p>So what should you do in place of these bad HTML implementations?</p>
<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>
<pre><code>* {
border: 2px dotted black;
}
</code></pre>
<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="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>flexbox</code> etc. (You can see responsive tables in action <a href="/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>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
