<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · How to Learn HTML5</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/how_to_learn_html5" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/" rel="tag">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/code/using-abbr">
		older article →
	</a><a rel="next" href="/code/mod_rewrite-css-targeting">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2008-11-13T19:35:00+00:00">
		<sup>7:35<abbr>pm</abbr> • 2008</sup>
		<abbr title="November">Nov</abbr> 13
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/code/how_to_learn_html5" rel="bookmark tag">code</a></li>
		<li><a href="/code-is-art/how_to_learn_html5">code-is-art</a></li>
		<li><a href="/web-dev/how_to_learn_html5">web-dev</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>How to Learn HTML5</h1>
<blockquote>
	<p>
		Hi Kroc,
	</p><p>
		I stumbled on your website today and was quite impressed with quite a few different things about it (the
		design, the tone of your writing, <abbr title="et cetera">&amp;c.</abbr>).
	</p><p>
		The one thing in particular, and something I wanted to question you on, was your reference to HTML5.
		Something I know nothing about. <ins>…</ins> I’m really interested in using no IDs and/or classes, but
		know nothing about HTML5.
	</p><p>
		So here’s my question, <ins>…</ins> do you recommend any other resources or tutorials for someone like
		me? I rely very heavily on classes and my stuff is sloppy for the most part. I’d love to convert my site
		but have no idea where to start.
	</p><p>
		Any advice or words of wisdom would be <em>greatly</em> appreciated. Thanks in advance.
	</p>
	<cite><a href="http://jyoseph.com" rel="external">Joe Holst</a></cite>
</blockquote>
<p>
	<strong>Hello Sir,</strong><br />
	You only require one thing, and then to do three things in order to succeed in your goals here.
</p><p>
	Firstly, you need to get some willpower. You already seem to have that, as you’ve taken interest to email me to
	ask about where to start. Without the want to write better code, no learning in the world can help!
</p><p>
	It should be noted that absolutely nothing I’m doing is undocumented; in that fact none of the code on my website
	is even special—all it is, is the representation of my personal drive for quality, as I measure it.
</p><p>
	I don’t think willpower is going to be a problem for you if you already twig that HTML5 and cleaner code is the
	direction you might want to go. Some people don’t ever progress beyond writing Internet Explorer-only junk, and
	that’s not down to skill level, it’s a willpower problem.
	<br /><br />
	Secondly, you need to do three things:
</p>
<ol>
	<li>revise,</li>
	<li>revise,</li>
	<li>revise.</li>
</ol>
<p>
	I proof-read and break my code over and over again, to chip away what niggles me here and there. Getting rid of
	classes is a one-by-one process, because each class has a use that may be totally unrelated to the other classes in
	the document. Each class is its own problem, some big, some small—some requiring a complete rewrite even.
</p><p>
	I’m quite happy to break my entire codebase for a week—rewriting and reorganising everything—just to get one
	tiny annoyance out of sight and out of mind.
</p><p>
	If you proof read your codebase you’ll spot various things that could be better, all of varying difficulty levels,
	some maybe without a clear solution. Start by picking something that annoys you, that you know could be done better,
	and fix it… even if it’s just tidying up a comment so that it looks nicer. Polish your code.
</p><p>
	That is how I work. I scan through my code and look at it objectively. I think about where I can make it cleaner,
	tidier, less complicated, better documented, easier for others to understand; anything that catches my eye.
</p><p>
	I pick something that I personally feel motivated toward (I have no boss on my personal site, so I only have to fix
	what I care about; and in that, the quality, through passion, is maintained) and I set about fixing it. Sometimes
	that’s a big problem—like what I’m working on right now: a Markdown clone, so as to reduce the amount of HTML
	I’m writing for minor things like abbreviations, links and citations
	<ins><a href="/code/remarkable">ReMarkable</a></ins>—or sometimes it’s a small thing like shaving a few lines
	off here and there. I do whatever my heart feels capable of doing that day. I try never strain myself by doing work
	I’m not interested in—that’s for secular work.
</p><p>
	Once I’ve made my fix, I go through the whole process again. Often whilst I’m implementing one fix it unearths
	other annoyances that I want to solve and I’ll either get distracted and go off and fix those or wait until I’ve
	finished the thing I started on and be well set with another task to do afterwards—with a much stronger
	understanding of the problem to drive me forward with the design issues.
</p><p>
	O, the design issues.
</p><p>
	I am a slave to my code sometimes. I will not accept a sloppy solution. I pace around a lot. I wrestle with the
	architectural design of the code in my mind for days. I spend a hundred hours writing
	<a href="/code/asp-templating">29 lines of code</a>. Because to me, good code is not about how
	<abbr title="leet">l33t</abbr> your programming knowledge is, good code is about how much you rethink what you’re
	trying to do. What cohesive statement are you trying to make with your code?
</p>
<blockquote>
	<p>
		Sometimes your code is not just about trying to solve a problem,<br />
		it’s trying to solve a problem <em>using your personality</em>.
	</p>
	<cite>Kroc Camen</cite>
</blockquote>
<p>
	But getting back to HTML5…
</p><p>
	Before you learn HTML5, first learn HTML 4. I know that sounds stupid, you may very well think you already know HTML
	4. In learning HTML5, I first referred to <a href="http://w3schools.com/tags/default.asp" rel="external">this
	list</a>. Apart from the depreciated ones, do you know how to use all of them? I found that there were a number of
	HTML 4 tags that I rarely used, that could easily replace sloppy <code>&lt;div&gt;</code>s and classes.
</p><p>
	I see this often, and it really annoys me.
</p>

<pre><code>&lt;div id="header"&gt;
	&lt;h1&gt;Title&lt;/h1&gt;
&lt;/div&gt;</code></pre>

<p>
	<strong>Elements that are not <code>&lt;div&gt;</code>s can be styled just the same as a <code>&lt;div&gt;</code>.
	A <code>&lt;h1&gt;</code> is not somehow magically unable to have borders or backgrounds or margins or padding or
	anything a <code>&lt;div&gt;</code> can.</strong>
</p><p>
	People seem to get this mindset that only <code>&lt;div&gt;</code>s can be used as boxes.<br />
	Here’s a list of elements you can use instead of <code>&lt;div&gt;</code>s.
</p><p>
	<code>P</code>, <code>BLOCKQUOTE</code> (with <code>P</code> inside),
	<code>H1</code>/<code>H2</code>/<code>H3</code>…, <code>ADDRESS</code>,
	<code>DL</code>/<code>DT</code>/<code>DD</code>, <code>UL</code>/<code>OL</code>/<code>LI</code>,
	<code>HR</code>
</p><p>
	<small>(Note: You can’t put a block level element in another. <abbr title="that is,">i.e.</abbr> you can’t have
	a <code>H1</code> inside a <code>P</code> or vice-versa)</small>
</p><p>
	All of these can be styled with any effect—meaning that you can get rid of a <code>&lt;div&gt;</code> and/or
	class, by just referring to the element directly, or by it’s parent.
	<br /><br />
	For example:
</p>

<pre><code>&lt;h1&gt;Website Title&lt;/h1&gt;
&lt;ol id="menu"&gt;
	&lt;li&gt;menu 1&lt;/li&gt;
	&lt;li&gt;menu 2&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;Article title&lt;/h2&gt;</code></pre>

<p>
	Is better than
</p>

<pre><code>&lt;div id="title"&gt;Website Title&lt;/div&gt;
&lt;div id="menu"&gt;
	&lt;div class="menuitem"&gt;menu 1&lt;/div&gt;
	&lt;div class="menuitem"&gt;menu 2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="title2"&gt;Article title&lt;/div&gt;</code></pre>

<p>
	And for that matter, why would you have a class for a menu item, when the menu is perfectly identifiable? Even in
	this bad example, you could still get rid of the <code>menuitem</code> class, and just refer to them with
	<code>#menu div {...}</code>.
</p><p>
	An <code>&lt;ol&gt;</code> makes a perfect menu. It is after all, an Ordered List. Get to know what each of the
	element names means, how you would think of that in a standard word processor document, and then how that can be
	applied to your site, imagining your site as a word processor document without any CSS. Your menu would be a table
	of contents of sorts, and therefore would obviously be an Ordered List.
	<br /><br />
	Here’s a different example I helped someone with:
</p>

<pre><code>&lt;div id="leftcol"&gt;
	&lt;h2 class="blue"&gt;Recent Project&lt;/h2&gt;
	…
&lt;/div&gt;
&lt;div id="rightcol"&gt;
	&lt;h2 class="green"&gt;News Updates&lt;/h2&gt;
	…
&lt;/div&gt;</code></pre>

<p>
	He wanted the headings on the left blue, and the headings on the right, green. Which is fair enough.<br />
	However, could you not just select the column, and do away with the need for the classes?
</p>

<pre><code>/* as a rough example */
#leftcol h2	{color: blue;}
#rightcol h2	{color: green;}</code></pre>

<p>
	Knowing, and using more elements, instead of resorting to <code>&lt;div&gt;</code>s all the time, allows you to use
	CSS to select those elements more widely as well as specifically. Here, both of these are <code>&lt;h2&gt;</code>s.
	Now if they were <code>&lt;div&gt;</code>s, we would have to use classes, because there would likely be yet more
	<code>&lt;div&gt;</code>s in the columns and you couldn’t say <code>#leftcol div</code> without turning many
	things blue or green instead of just what you wanted.
</p><p>
	Getting rid of <code>&lt;span&gt;</code>s with classes requires knowing the meaning of the many inline elements.
	Google them.
</p><p>
	<a href="/code/abbr_redux"><code>ABBR</code></a>, <code>ACRONYM</code>, <code>BIG</code>, <code>CITE</code>,
	<code>CODE</code>, <code>DEL</code>, <code>DFN</code>, <code>EM</code>, <code>INS</code>, <code>KBD</code>,
	<code>Q</code>, <code>SAMP</code>, <code>SMALL</code>, <code>STRONG</code>, <code>SUB</code>,
	<code>SUP</code>, <code>VAR</code>
</p><p>
	Think of these elements outside of the browser, on a printed piece of paper. You can then bombard them with CSS to
	make them look like anything—even if they don’t look anything like what they’re supposed represent—but their
	use will be semantically sound, having the right <em>meaning</em> in your website.
</p>

<hr />

<p>
	<strong>Learn</strong> the <a href="http://css.maxdesign.com.au/selectutorial/" rel="external">selectors</a>.
</p><p>
	If you know the selectors and the the tags well enough, then you only need a class (or ID) when you cannot
	differentiate two elements from each other with the browser you are supporting. Since I’m using CSS3 and not
	supporting IE at all, I don’t need any classes because I’ve made the right choice of elements, and can
	differentiate all of them with the right CSS selectors.
</p><p>
	If you want clean code using few, if any, classes then right away ditch IE6. Stop supporting it, tell people to
	upgrade. Without <abbr title="sibling"><code>+</code></abbr> and <abbr title="descendant"><code>&gt;</code></abbr>
	selectors, IE6 is too frightened to go anywhere that isn’t within sight of a class or ID.
</p><p>
	IE7 does support <abbr title="sibling"><code>+</code></abbr> and
	<abbr title="descendant selectors"><code>&gt;</code></abbr>, and whilst it lacks in many other areas, it has the
	necessary basics to write good HTML/CSS. <a href="http://css3.info/selectors-test/" rel="external">Check</a> what
	your targeted browsers support.
</p>

<hr />

<p>
	<strong>Once</strong> you have made a decent HTML 4 site, then you will look at the HTML5 specification, and it will
	make sense—you will know what to do with it.
	<br /><br />
	Here are some links to refer to in your adventures:
</p>
<ul>
	<li><a href="http://www.w3schools.com/tags/html5.asp" rel="external">W3Schools’ <q>HTML5 Reference</q></a></li>
	<li><a href="http://www.w3.org/TR/html5-diff/" rel="external"><q>HTML5 Differences from HTML 4</q></a></li>
	<li><a href="http://www.whatwg.org/specs/web-apps/current-work/" rel="external">The current HTML5
	specification</a></li>
	<li><a href="http://dev.w3.org/html5/html-author/" rel="external"><q>The Web Developer’s Guide to
	HTML5</q></a></li>
</ul>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/code/how_to_learn_html5.rem">Rem</a> •
		<a href="/code/how_to_learn_html5.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->