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
|
<!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>Using HTML Validator Badges Again</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="using-html-validator-badges-again">Using HTML Validator Badges Again</h1>
<p>2019-07-05</p>
<p>There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren’t great (and <strong>still</strong> aren’t perfect) but they represented a community that took pride in caring about the quality of their work. I think it’s time we bring HTML badges back.</p>
<h2 id="getting-the-flaws-out-of-the-way">Getting the flaws out of the way</h2>
<p>Of course, there were reasons why these badges slowly faded out of popularity. Some of the reasoning made sense, but most felt like a stretch in logic from my perspective. I always looked at it as a “the good outweighs the bad”.</p>
<p>Jukka Korpela’s post way back in 2003, <a href="http://jkorpela.fi/html/validation.html">HTML validation is a good tool but just a tool</a>, highlighted a lot of problems with relying so heavily on these HTML validators. I suggest you give it a read if this kind of thing interests you. I found it fascinating, even though I disagree with most of the points he makes.</p>
<p>Some negatives used to dismiss HTML badges:</p>
<ul>
<li><strong>The badge system is outdated</strong>
<ul>
<li>Dismissing the worth of something based on how long it has been around is foolish. Many tools and frameworks are “outdated” but are still used to this day with great success.</li>
</ul></li>
<li><strong>HTML5 doesn’t <em>require</em> validation</strong>
<ul>
<li>Technically <em>no subset of HTML</em> requires validation - but developers should aim for it. The W3C validators perform a solid job of keeping a standard for web development, so by following a standard we can keep experiences consistent for users.</li>
</ul></li>
<li><strong>Validation is too formal</strong>
<ul>
<li>I believe in the ability to achieve your desired outcome based on almost any constraints. If a project leans you towards invalid or non-semantic structure to fulfill requirements, a better approach needs to be evaluated. We as developers tend to settle too quickly on the easiest option available to us.</li>
</ul></li>
<li><strong>Websites / web apps are just <em>too complex</em> to follow the W3C guidelines</strong>
<ul>
<li>I call <em>BS</em> on this argument. The complexity of a website should have nothing to do with keeping semantic standards. <em>This is your job.</em></li>
</ul></li>
<li><strong>It only exists to catch syntax errors</strong>
<ul>
<li>For the record, I still see this more of a positive take on using validators. Subtle and nuanced syntax mistakes can be easily overlooked by the human eye.</li>
</ul></li>
</ul>
<h2 id="nobody-puts-badges-in-a-corner">“Nobody puts <em>badges</em> in a corner”</h2>
<p>A large of amount of designers / developers tend to forget that there are new people entering our industry everyday and they might not be as well versed in the basics of the web (HTML & CSS specifically). Since so many newcomers start out with JavaScript frameworks or jump onto pre-existing projects, they don’t always grasp the core foundation of valid markup. Some frameworks even break basic standards for visuals or easier development environments - setting their initial expectations that ugly semantics is acceptable code. The ends justify the means, etc.</p>
<p>Guiding first-timers towards HTML validators let’s them rethink their structure when building products or at least give some forethought to their outputted code. We, the more <em>verteran</em> members of the community, have the knowledge of proper semantics since we grew our careers around this “trend”. We shouldn’t assume newbies have the same understanding. The basics are important.</p>
<h2 id="open-source-html5-badge">Open source HTML5 badge</h2>
<p>Since the W3C doesn’t officially produce any badges for HTML5 validation 1, I’ve gone ahead and open sourced <code>SVG</code> and <code>PNG</code> versions of a badge based off the current W3C designs. You can check out the Github repo: <a href="https://github.com/bradleytaunt/html5-valid-badge">HTML5 Valid Badge</a></p>
<p>If you decide to use these badges, be sure to link these images to your valid passing URL (<a href="https://html5.validator.nu">html5.validator.nu</a>). You can see an example of the link in the footer of this website.</p>
<p>Please feel free to reach out and share your websites / projects that pass as valid HTML and include an HTML valid badge. I’d love to check them out!</p>
<h2 id="refs">Refs</h2>
<p>1 <a href="http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/">Interview with Mike Smith</a>: “There won’t be any proper Valid HTML5 icon forthcoming, so if you’d like to use one in your content, you’ll probably need to create one on your own.”</p>
<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>
|
