<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Technoclasm &#187; Html</title>
	<atom:link href="http://www.technoclasm.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.technoclasm.com</link>
	<description>A few thoughts about Coldfusion, Development and Life</description>
	<lastBuildDate>Thu, 20 May 2010 14:49:22 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>4 features of html5 to look out for</title>
		<link>http://www.technoclasm.com/2009/11/4-features-of-html5/</link>
		<comments>http://www.technoclasm.com/2009/11/4-features-of-html5/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 08:12:57 +0000</pubDate>
		<dc:creator>Joel</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Html]]></category>
		<category><![CDATA[Html5]]></category>

		<guid isPermaLink="false">http://www.technoclasm.com/?p=59</guid>
		<description><![CDATA[I have been keen to take a look at html 5 and I thought I would have a go.  Google have recently released an os based on it, and Microsoft are promising that Internet Explorer will (mostly) support it.
From my initial view it looks really sensible.  I hope that the browsers can get together and [...]]]></description>
			<content:encoded><![CDATA[<p>I have been keen to take a look at html 5 and I thought I would have a go.  Google have recently <a href="http://www.androidguys.com/2009/11/23/idle-musings-android-on-chrome/">released an os based on it</a>, and Microsoft are promising that <a href="http://www.cmswire.com/cms/industry-news/microsoft-details-plans-for-internet-explorer-9-ie9-006097.php">Internet Explorer</a> will (mostly) support it.</p>
<p>From my initial view it looks really sensible.  I hope that the browsers can get together and <a href="http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars">thrash out a solution</a> to the video tag &#8211; it would save everyone from having to install flash, or worse still silverlight.</p>
<h2>1) Embed other XML</h2>
<p>HTML 5 allows for MathML and SVG elements to be    used inside a document</p>
<h2>2) New Tags</h2>
<ul>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-section-element"><code>section</code></a> represents a generic document or application section. It can be <a title="Headings and sections" href="http://www.w3.org/TR/html5/semantics.html#headings-and-sections">used together</a> with the      <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,      <code>h5</code>, and <code>h6</code> elements to indicate the document      structure.</strong><br />
<span style="color: #888888;">this confuses me a bit &#8211; but it seems to be to define an area of the page as a section.<br />
</span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-article-element"><code>article</code></a> represents an independent piece of content of a document, such as a blog      entry or newspaper article.</strong><br />
<span style="color: #888888;">On the blog home page (like this one) each blog entry would be wrapped in a &lt;article&gt;&lt;/article&gt; tag</span><span style="color: #888888;">.  It&#8217;s likely to be well implemented by blog engines, and cms systems.</span> <span style="color: #888888;">Particularly if Google news will syndicate your content because its in an article tag </span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-aside-element"><code>aside</code></a> represents a piece of content that is only slightly related to the rest      of the page.</strong><br />
<span style="color: #888888;">This is for off-topic content. Great for search engines &#8211; but I can&#8217;t see many people using this too much unless they&#8217;re really geeky</span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-hgroup-element"><code>hgroup</code></a> represents the header of a section</strong><br />
<span style="color: #888888;">Strangely named but I guess quite useful if you are keen to structure your pages perfectly</span><span style="color: #888888;">.  Really useful for SEO and search engines. </span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-header-element"><code>header</code></a> represents a group of introductory or navigational aids.</strong><br />
<span style="color: #888888;">Similar sounding to head, heading is for what always seems to get put in &#8220;&lt;div class=&#8217;head&#8217;&gt;&#8221;</span><span style="color: #888888;">.  Really useful for SEO and search engines. </span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-footer-element"><code>footer</code></a> represents a footer for a section and can contain information about the      author, copyright information, et cetera.</strong><br />
<span style="color: #888888;">The same as header, but with the footer.  Really useful for SEO and search engines. </span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-nav-element"><code>nav</code></a> represents a section of the document intended for navigation.</strong><br />
<span style="color: #888888;">The same as header and footer but for the navigation. </span></li>
<li><strong><a href="http://www.w3.org/TR/html5/semantics.html#the-dialog-element"><code>dialog</code></a> can be used to mark up a conversation like this: </strong>
<pre><span style="color: #888888;"><code>&lt;dialog&gt;
 &lt;dt&gt; Sir if you were my husband I'd poison your tea
 &lt;dd&gt; Lady, if you were my wife I would drink it
&lt;/dialog&gt;</code></span></pre>
</li>
</ul>
<ul>
<li><strong><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-figure-element"><code>figure</code></a> can be used to associate a caption together with some embedded content,      such as a graphic or video: </strong>
<pre><span style="color: #888888;"><code>&lt;figure&gt;
 &lt;video src="paris_hilton_vid"&gt;&lt;/video&gt;
 &lt;legend&gt;un-named hotel heiress in video shame&lt;/legend&gt;
&lt;/figure&gt;
This wont hurt SEO, or Talking Browsers, and it seems to offer some nice possibilities</code></span></pre>
</li>
</ul>
<ul>
<li><strong><a href="http://www.w3.org/TR/html5/video.html#video"><code>video</code></a> and <a href="http://www.w3.org/TR/html5/video.html#audio"><code>audio</code></a> for multimedia content.</strong><br />
<span style="color: #888888;">Implementation of this is likely to be very hit and miss. Every browser seems really keen to do it absolutely differently</span></li>
<li><strong><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element"><code>embed</code></a> is used for plugin content.</strong></li>
<li><strong><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element"><code>mark</code></a> represents a run of marked text.</strong><br />
<span style="color: #888888;">This is really for search results snippets where the word found is highlighted.<span style="color: #888888;"> </span></span><span style="color: #888888;">Now the mark tag can be used</span></li>
<li><strong><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-progress-element"><code>progress</code></a> represents a completion of a task, such as downloading or when      performing a series of expensive operations.</strong><br />
<span style="color: #888888;">Self explanatory, but useful.  Should not be confused with things that require the meter tag. </span></li>
<li><strong><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-meter-element"><code>meter</code></a> represents a measurement, such as disk usage.</strong><br />
Nice &#8211; this will help (support:  <a href="http://html5doctor.com/measure-up-with-the-meter-tag/">http://html5doctor.com/measure-up-with-the-meter-tag/</a>)</li>
</ul>
<ul>
<li><strong><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element"><code>time</code></a> represents a date and/or time.</strong><br />
Another nice addition, works on the locale of the browser</li>
<li><strong><a href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element"><code>ruby</code></a>,      <a href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-rt-element"><code>rt</code></a> and <a href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-rp-element"><code>rp</code></a> allow for marking up ruby annotations.</strong><br />
<span style="color: #888888;">Meh</span></li>
<li><strong><a href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element"><code>canvas</code></a> is used for rendering dynamic bitmap graphics on the fly, such as graphs      or games.</strong></li>
<li><strong><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-command"><code>command</code></a> represents a command the user can invoke.</strong><br />
<span style="color: #888888;">The &lt;command&gt; tag defines a command button, like a radiobutton, a  checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.</span></li>
</ul>
<ul>
<li><strong><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-details-element"><code>details</code></a> represents additional information or controls which the user can obtain      on demand.</strong></li>
<li><strong><a href="http://dev.w3.org/html5/spec/forms.html#the-datalist-element"><code>datalist</code></a> together with the a new <code>list</code> attribute for      <code>input</code> can be used to make comboboxes: </strong>
<pre><span style="color: #888888;"><code>&lt;input list="browsers"&gt;
&lt;datalist id="browsers"&gt;
 &lt;option value="Safari"&gt;
 &lt;option value="Firefox"&gt;
&lt;/datalist&gt;</code></span></pre>
</li>
<li><strong><a href="http://dev.w3.org/html5/spec/forms.html#the-keygen-element"><code>keygen</code></a> represents control for key pair generation</strong>.<br />
<span style="color: #888888;">Seems to allow for massively complicated key pair generation. I can&#8217;t think of a example use &#8211; but I&#8217;m sure there is a fabulous one. </span></li>
<li><strong><a href="http://dev.w3.org/html5/spec/forms.html#the-output-element"><code>output</code></a> represents some type of output, such as from a calculation done through      scripting.</strong></li>
</ul>
<h2>3) New Input Types</h2>
<p><span style="color: #888888;">There are mostly cool, and there are some nice hooks that you can add in with javascript <span style="color: #888888;">(</span></span><span style="color: #888888;">setCustomValidity).  I could write a book on these &#8211; but for the most part I&#8217;m happy to suggest using your heads and reading the documentation.<br />
</span></p>
<ul>
<li><a href="http://www.w3.org/TR/html5/forms.html#telephone-state"><code>tel</code> </a><br />
<span style="color: #888888;">for entering telephone numbers</span></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#text-state-and-search-state"><code>search</code></a><br />
<span style="color: #888888;">a synonym for text, useful for the browser to keep search results, but not other fields</span></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#url-state"><code>url</code> </a><br />
<span style="color: #888888;">a validated field for urls</span></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#e-mail-state"><code>email</code></a><br />
<span style="color: #888888;">a validated entry field for email addresses</span></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#date-and-time-state"><code>datetime</code></a><a href="http://www.w3.org/TR/html5/forms.html#local-date-and-time-state"><code><br />
</code></a><span style="color: #888888;">a whole host of date/time pickers (nice)</span></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#date-state"><code>date</code></a></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#month-state"><code>month</code></a></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#week-state"><code>week</code></a></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#time-state"><code>time</code></a></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#local-date-and-time-state"><code>datetime-local</code></a></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#number-state"><code>number</code></a><br />
lets you choose a number</li>
<li><a href="http://www.w3.org/TR/html5/forms.html#range-state"><code>range<br />
</code></a><code>lets you pick a number (floating point) b</code><code>etween the minimum and maximum values </code><a href="http://www.w3.org/TR/html5/forms.html#range-state"></a></li>
<li><a href="http://www.w3.org/TR/html5/forms.html#color-state"><code>color</code></a><br />
a colour picker, nice</li>
</ul>
<h2>4) Additional Attributes</h2>
<h3>input required=true|false</h3>
<p>this is a bonus &#8211; a really sensible and useful addition.</p>
<h2>Summary</h2>
<p>As you can see there are a host of nice new features. Some of the new tags you could <a href="http://articles.sitepoint.com/article/html-5-snapshot-2009">start using now</a> (largely they will be ignored by older browsers). Others will require browser tweaking to get them to work successfully. But I think all-round its a nice standard.</p>
<p>Joel</p>
]]></content:encoded>
			<wfw:commentRss>http://www.technoclasm.com/2009/11/4-features-of-html5/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
