Darcy ClarkeDevelopment / Design / UX

Toggle Main Navigation

Feb 24, 2011

Seriously, What is HTML5?

Posted in "thoughts"


HTML5 Logo I'm tired of people getting confused. The W3C hasn't done the best job at explaining what HTML5 is or means to a lot of people either. In fact, they went out of their way to say that, accompanying the HTML5 new branding, CSS3 and the JS API's ( Geolocation, Websockets etc.), that are floating around with their own specs, are lumped into one and the same. So what is HTML5? And what does it offer me? Well, I'm going to tell you.

First off, HTML5 != (not equal to) CSS3. For the past 2 years CSS3 has picked up the pace and has become more standardized both in it's spec and within browsers. People were yapping about CSS3 long before this HTML5 talk sprung up. A great example of this would be the fact that over 5 years ago John Resig was working with CSS3 selectors which spurred on the creation of jQuery (you've just been learnd!).

Secondly, HTML5 != (not equal to) Javascript API's. The Javascript API's that are being thrown around for things like video, audio, aren't HTML5. HTML is a markup language and with the introduction of HTML5 we have the ability to use semantic tags like video, audio, canvas, header etc. and many of these elements come with specifications about how browsers should render them and what kind of interaction points they have, with Javascript. So again, HTML5 isn't a slew of Javascript API's even if those API's are written to be specifically used with HTML5 tags. I know, this is probably the most confusing aspect. Without much of the Javascript specifications none of these new elements would function. If you're not planning to modify the default browser functionality of with these elements though, then things should "just work" for you.

So, what is HTML5?

xHTML Logo HTML5 is HTML. WOW! Lights go off I hope everyone right now is saying "ooooh I get it now" because I can't make it more clear then that. HTML5 is, by all means, the next version of HTML. After a split happened between native HTML and xHTML there had been a definitive divide in the way browsers would render each said type of HTML. This brought along with it a slew of doctypes and unnecessary conventions that were specific to one or the other. Now that xHTML has all but died many of it's features and it's ideas have come back into the native HTML strain. What's this mean? Far more semantic and near XML like tags in HTML5. As well as documentation / standardization for browser vendors to follow, when rendering said tags, and some sweet new attributes to some of our old favorite input elements.

So why is HTML5 important?

Well, if you have just become a web developer in the past 2-3 years you won't remember the dark times we had before then. Browser vendors made the rules and, to some extent, still do (many of them are involved in creating and documenting the W3C's specifications HTML5, CSS3 etc.). Long ago every vendor decided, on their own, how to render an HTML page. Making crucial decisions for the user when there was an error or ill-formatted code on the page. Unlike XML, browsers have always rendered HTML in some way even with errors in the code (XML refuses to render if there's an error). Many have said this is in bad taste but really there wouldn't have been an issue if there had been a standard way to treat errors and rendering way back when. Well, thank god for smart people! The big guys (Microsoft, Google, Mozilla Corporation etc.) are getting on the same page and making our lives simpler day by day. So be happy you live now and not in the days of uppercase, lowercase, "strict", "transitional", DTD's and all that madness.

So what's HTML5 look like?

I get asked this a lot and the best way to answer is to point them to Paul Irish's HTML5 Boilerplate (found here: http://html5boilerplate.com/ ). Problem with this is that Boilerplate only shows off 2 or 3 of the new semantic HTML5 tags (no fun). So I've put together a quick example of a HTML5 blog post page template I'm working on (it shows off at least twice as many tags!!!).

<div style="width: 100%; background: #fefefe; border: 1px solid #ccc; padding: 10px; overflow: auto;margin: 0 0 15px 0;"> <pre style='color:#000000;background:#ffffff;'><span style='color:#004a43; '>&lt;!doctype html></span> <span style='color:#a65700; '>&lt;</span><span style='color:#800000; font-weight:bold; '>html</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '>&lt;</span><span style='color:#800000; font-weight:bold; '>head</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '>&lt;</span><span style='color:#800000; font-weight:bold; '>title</span><span style='color:#a65700; '>></span>Default HTML5 Template<span style='color:#a65700; '>&lt;/</span><span style='color:#800000; font-weight:bold; '>title</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '>&lt;/</span><span style='color:#800000; font-weight:bold; '>head</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '>&lt;</span><span style='color:#800000; font-weight:bold; '>body</span><span style='color:#a65700; '>></span>

<span style='color:#696969; '>&lt;!– container –></span> <span style='color:#a65700; '>&lt;</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>id</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"container"</span><span style='color:#a65700; '>></span>

&lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- header --&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;header&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

    &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- nav --&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;nav&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;ul&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;class&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;active&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Link&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Link&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Link&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Link&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;ul&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;nav&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;nav --&gt;&lt;&#x2F;span&gt;

&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;header&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;header --&gt;&lt;&#x2F;span&gt;

&lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- body --&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;div&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;id&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;body&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;article&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- article header --&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;header&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; pubdate&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;2006-02-14&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;February &lt;span style=&#39;color:#008c00; &#39;&gt;14&lt;&#x2F;span&gt;th, &lt;span style=&#39;color:#008c00; &#39;&gt;2006&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;h3&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;My Post&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;h3&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;header&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;article header --&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- article content --&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Etiam id dui dolor&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt; Suspendisse nec metus est, et iaculis lectus&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Etiam id dui dolor&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt; Suspendisse nec metus est, et iaculis lectus&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Etiam id dui dolor&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt; Suspendisse nec metus est, et iaculis lectus&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
            Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;article content --&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- article footer --&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;footer&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;By &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Lance Pollard&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;footer&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;article footer --&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- comments --&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;dialog&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

            &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- comment single --&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Nick La&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;datetime&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;2009-08-11T12:35:54&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#008c00; &#39;&gt;13&lt;&#x2F;span&gt; minutes ago&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dd&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                    Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dd&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;comment single --&gt;&lt;&#x2F;span&gt;

            &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- comment single --&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Darcy Clarke&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;datetime&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;2009-08-11T12:35:54&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#008c00; &#39;&gt;20&lt;&#x2F;span&gt; minutes ago&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dd&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                    Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                    Etiam id dui dolor&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt; Suspendisse nec metus est, et iaculis lectus&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                    Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dd&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;comment single --&gt;&lt;&#x2F;span&gt;

            &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- comment single --&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;#&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Wes Bos&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;cite&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;datetime&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;2009-08-11T12:35:54&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#008c00; &#39;&gt;1&lt;&#x2F;span&gt; hour ago&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;time&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dd&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                    Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at&lt;span style=&#39;color:#008c00; &#39;&gt;.&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;dd&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;comment single --&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;dialog&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;comments --&gt;&lt;&#x2F;span&gt;

    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;article&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;article --&gt;&lt;&#x2F;span&gt;

    &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- sidebar --&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;aside&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- sidebar widget --&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;section&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;img&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;src&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;my_ad.jpg&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;alt&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;A Sidebar Ad&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;section&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;sidebar widget --&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- sidebar widget --&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;section&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;ul&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;http:&#x2F;&#x2F;twitter.com&#x2F;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;Twitter&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Twitter&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;http:&#x2F;&#x2F;facebook.com&#x2F;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;Facebook&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Facebook&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;http:&#x2F;&#x2F;github.com&#x2F;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;Github&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Github&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;http:&#x2F;&#x2F;vimeo.com&#x2F;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;Vimeo&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Vimeo&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
                &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;href&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;http:&#x2F;&#x2F;youtube.com&#x2F;&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#274796; &#39;&gt; &lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;title&lt;&#x2F;span&gt;&lt;span style=&#39;color:#808030; &#39;&gt;=&lt;&#x2F;span&gt;&lt;span style=&#39;color:#0000e6; &#39;&gt;&quot;Youtube&quot;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;Youtube&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;a&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;li&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
            &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;ul&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;

        &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;section&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;sidebar widget --&gt;&lt;&#x2F;span&gt;

    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;aside&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;sidebar --&gt;&lt;&#x2F;span&gt;

&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;div&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;body --&gt;&lt;&#x2F;span&gt;

&lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- footer --&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;footer&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
        -insert name here- &lt;span style=&#39;color:#074726; &#39;&gt;&amp;amp;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;copy&lt;&#x2F;span&gt;&lt;span style=&#39;color:#074726; &#39;&gt;;&lt;&#x2F;span&gt; &lt;span style=&#39;color:#008c00; &#39;&gt;2011.&lt;&#x2F;span&gt; All content is the property of -insert name here-
    &lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#800000; font-weight:bold; &#39;&gt;p&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#a65700; &#39;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&#39;color:#5f5035; &#39;&gt;footer&lt;&#x2F;span&gt;&lt;span style=&#39;color:#a65700; &#39;&gt;&gt;&lt;&#x2F;span&gt;
&lt;span style=&#39;color:#696969; &#39;&gt;&amp;lt;!-- &#x2F;footer --&gt;&lt;&#x2F;span&gt;

<span style='color:#a65700; '>&lt;/</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span> <span style='color:#696969; '>&lt;!– /container –></span>

<span style='color:#a65700; '>&lt;/</span><span style='color:#800000; font-weight:bold; '>body</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '>&lt;/</span><span style='color:#800000; font-weight:bold; '>html</span><span style='color:#a65700; '>></span> </pre></div>

If you've seen HTML before this shouldn't look too different. Again, this is barebones HTML not including links to CSS or JS files. You'll notice I've tried to be as semantic as possible and use the new HTML5 tags where necessary. Things like &amp;lt;time&amp;gt;, &amp;lt;aside&amp;gt; and &amp;lt;article&amp;gt; should really get you excited to write HTML again without a thousand classes and id's. I'm definitely an Object Oriented CSS guy myself but being semantic where it counts helps a lot.

Wrapping it up

If you're still confused then you need to dig deeper or just remember HTML5 === HTML. Make sure to read all the W3C specifications linked in this post as well. I know they're long but they are very insightful and will make you that much better a person. Since there isn't a really credible "web developer" degree out there (believe me, there isn't) at least you can say you're up-to-date with the standards of the industry you work in.

Note: Send your marketing friends to these W3C specs too. I'm tired of hearing the tools of my trade turned into buzz words. They need to get learnd before they step on our turf. Word?