html5-howto.html 15 KB

Raw Blame History Permalink

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "/QA/2006/01/blogstyle.css";
    </style>
    <meta name="keywords" content='authoring, html, html5, open web, specification, web standards' />
    <meta name="description" content="HTML 5 is too complex? Wait, wait, there is something coming." />
    <meta name="revision" content="$Id: html5-howto.html,v 1.51 2011/12/16 03:03:08 gerald Exp $" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
   <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />
   <title>Learn How To Write HTML 5 - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2008/11/html_5_the_markup.html" title="HTML 5, the markup" />
   <link rel="next" href="http://www.w3.org/QA/2008/11/the_w3c_will_host_a.html" title="" />

   <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
         xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
    rdf:about="http://www.w3.org/QA/2008/11/html5-howto.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/239"
    dc:title="Learn How To Write HTML 5"
    dc:identifier="http://www.w3.org/QA/2008/11/html5-howto.html"
    dc:subject="HTML"
    dc:description="HTML 5 is too complex? Wait, wait, there is something coming."
    dc:creator="Karl Dubost"
    dc:date="2008-11-18T08:12:46+00:00" />
</rdf:RDF>
-->

    <!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->

</head>
<body class="layout-one-column">
      <div id="banner">
      <h1 id="title">
	<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
W3C Blog
</h1>
    </div>

    <ul class="navbar" id="menu">
        <li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
        <li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
        <li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
        <li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
    </ul>
<div id="searchbox">
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
</form>
</div>


    <div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->

                     <p class="content-nav">
                        <a href="http://www.w3.org/QA/2008/11/html_5_the_markup.html">&laquo; HTML 5, the markup</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2008/11/the_w3c_will_host_a.html"> &raquo;</a>
                     </p>

                        <h2 class="entry-header">Learn How To Write HTML 5</h2>
                           <div class="entry-body">
                              <p>Discovered through twitter, there is an <a href="http://camendesign.com/code/how_to_learn_html5">interesting blog post</a> from Kroc Camen on how to learn HTML 5. The author is giving good essential guidelines on semantics and elements. The conclusion of his blog post is spot on and shows one of  the painful points of HTML 5 specification:</p>

<blockquote>
  <p>Once you have made a decent HTML4 site, then you will look at the HTML5 specification, and it will make sense—you will know what to do with it.</p>
</blockquote>

<p>A document is being written for filling this hole: <a href="http://dev.w3.org/html5/html-author/">The Web Developer’s Guide to HTML 5</a></p>

                           </div>
                           <div id="more" class="entry-more">


                           </div>
                       <p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on November 18, 2008  8:12 AM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/technology_101/">Technology 101</a>, <a href="http://www.w3.org/QA/archive/web_spotting/">Web Spotting</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/11/html5-howto.html">Permalink</a>
                                 | <a href="http://www.w3.org/QA/2008/11/html5-howto.html#comments">Comments (11)</a>
                                 | <a href="http://www.w3.org/QA/2008/11/html5-howto.html#trackback">TrackBacks (0)</a>
</p>


<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-169001">
<p class="comment-meta" id="c169001">
<span class="comment-meta-author"><strong>Jens Meiert </strong></span>
<span class="comment-meta-date"><a href="#c169001">#</a> 2008-11-18</span>
</p>
<div class="comment-bulk">
<p>(Glad Kroc made it here, and shameless as I am I just can’t but refer to <a href="http://meiert.com/en/blog/20080708/you-can-use-html-5/" rel="nofollow">“yes, you can use HTML 5”</a>, too.)</p>

</div>
</div>


<div class="comment" id="comment-169008">
<p class="comment-meta" id="c169008">
<span class="comment-meta-author"><strong>Damien B </strong></span>
<span class="comment-meta-date"><a href="#c169008">#</a> 2008-11-18</span>
</p>
<div class="comment-bulk">
<p>“yes, you can use HTML 5”</p>

<p>We can use MHMPML 6 as well, right away. It's even more simple.</p>

</div>
</div>


<div class="comment" id="comment-169013">
<p class="comment-meta" id="c169013">
<span class="comment-meta-author"><strong>Gary McGath </strong></span>
<span class="comment-meta-date"><a href="#c169013">#</a> 2008-11-18</span>
</p>
<div class="comment-bulk">
<p>The Web Developer's Guide to HTML 5 claims: "Both the HTML and XHTML syntax appear similar and it is possible to mark up documents using a common subset of of the syntax that is the same in both, while avoiding the syntactic sugar that is unique to each." But consider these cases:</p>

<p>&lt;p&gt;Text&lt;br&gt;Next line&lt;/p&gt;</p>

<p>That's legal HTML, but not legal XHTML. For XHTML we need:</p>

<p>&lt;p&gt;Text&lt;br/&gt;Next line&lt;/p&gt;</p>

<p>That's legal XHTML, but not legal HTML (at least for HTML 4). The slash for auto-closing a tag isn't allowed in HTML, even though many browsers accept it. Is it legal HTML 5? This is a fairly common situation and imposes a necessary divergence between HTML and XHTML. Does HTML 5 ameliorate this issue?</p>

</div>
</div>


<div class="comment" id="comment-169018">
<p class="comment-meta" id="c169018">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c169018">#</a> 2008-11-19</span>
</p>
<div class="comment-bulk">
<p>Yes auto-closing tag is allowed and conformant in HTML 5.</p>

</div>
</div>


<div class="comment" id="comment-169020">
<p class="comment-meta" id="c169020">
<span class="comment-meta-author"><strong>Dave </strong></span>
<span class="comment-meta-date"><a href="#c169020">#</a> 2008-11-19</span>
</p>
<div class="comment-bulk">
<p>Is it required to use html 5 for all websites?</p>

</div>
</div>


<div class="comment" id="comment-169086">
<p class="comment-meta" id="c169086">
<span class="comment-meta-author"><strong>Liam Quin </strong></span>
<span class="comment-meta-date"><a href="#c169086">#</a> 2008-11-21</span>
</p>
<div class="comment-bulk">
<p>For Gary, I'll note that HTML 4 and earlier are defined as SGML vocabularies, with minimization defined, which means that &lt;br /&gt; is arguably legal, at least in a pedantic sense.  In practice, none of the main HTML4-generation browsers used an SGML parser internally, and the HTML 4 spec doesn't really talk about the (arcane and bizzare) SGML minimization rules.  So, you can only use the slash form of the tag in HTML when the element is always without content: it would be OK for BR but not for SCRIPT, for example.</p>

</div>
</div>


<div class="comment" id="comment-169505">
<p class="comment-meta" id="c169505">
<span class="comment-meta-author"><strong>Craig </strong></span>
<span class="comment-meta-date"><a href="#c169505">#</a> 2008-12-04</span>
</p>
<div class="comment-bulk">
<p>WTF standards changing in a ever increasing manner. Can't we just hold off and do it right the first time?</p>

</div>
</div>


<div class="comment" id="comment-171330">
<p class="comment-meta" id="c171330">
<span class="comment-meta-author"><strong>Jawad Farooq </strong></span>
<span class="comment-meta-date"><a href="#c171330">#</a> 2009-01-05</span>
</p>
<div class="comment-bulk">
<p>is all major browser support html5?</p>

</div>
</div>


<div class="comment" id="comment-185121">
<p class="comment-meta" id="c185121">
<span class="comment-meta-author"><strong>sennamohan </strong></span>
<span class="comment-meta-date"><a href="#c185121">#</a> 2009-11-28</span>
</p>
<div class="comment-bulk">
<p>I am a new; if i want to learn HTML where to start.
 I am conversant with computer terminology and hand have computer with net connection and ample time at my disposal.
 Can anyone be kind enough to guide me?</p>

</div>
</div>


<div class="comment" id="comment-186170">
<p class="comment-meta" id="c186170">
<span class="comment-meta-author"><strong>Chris </strong></span>
<span class="comment-meta-date"><a href="#c186170">#</a> 2010-01-16</span>
</p>
<div class="comment-bulk">
<p>@Dave - HTML is the next iteration of HTML, sites do NOT have to use HTML 5 it simply adds additional functionality.</p>

<p>@Craig - The previous standards can still be used and HTML 5 will not be finished or fully supported for a while yet, the reason the specification is changing is to add greater functionality (forms with different field types, easier layout of pages etc).</p>

<p>@Jawad Farooq - No, IE doesn't support it much at all without hacks, the rest support bits to varying extent with Opera being the leader last I checked.</p>

<p>@sennamohan - go to w3schools.com, they have plenty of tutorials.</p>

</div>
</div>


<div class="comment" id="comment-193388">
<p class="comment-meta" id="c193388">
<span class="comment-meta-author"><strong>Jeff </strong></span>
<span class="comment-meta-date"><a href="#c193388">#</a> 2010-06-05</span>
</p>
<div class="comment-bulk">
<p>Im a self taught jack of all trades, master of few. The one thing I stayed away from was coding. When it comes to web design Im using swish, coffeeshop, ulead photoimpact and many others. As you can see these are all WYSIWYG. Apple is allowing html built apps to be placed into a lil bundle and placed somewhere in the native coding of the app. Steve Jobs is worshiping HTML5. Will HTML5 come in any WYSIWYG style software?</p>

</div>
</div>


  <div class="comments-open" id="comments-open">
<h3 class="comments-open-header">Leave a comment</h3>

<div class="comments-open-moderated">
   <p>
   Note: this blog is intended to foster <strong>polite
   on-topic discussions</strong>. Comments failing these
   requirements and spam will not get published. Please,
   enter your real name and email address. Every
   individual comment is reviewed by the W3C staff.
   This may take some time, thank you for your patience.
   </p>
   <p>
   You can use the following HTML markup (a href, b, i,
   br/, p, strong, em, ul, ol, li, blockquote, pre)
   and/or <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
</div>

<div id="comments-open-data">
<form method="post" action="http://www.w3.org/QA/sununga/beach.pl" id="comments-form">
<h4>Your comment</h4>
<div id="comments-open-text">
  <textarea id="comment-text" name="text" rows="20" cols="100"></textarea><br />
<label for="comment-text">Write your comment text here. Remember, keep the discussion on topic and courteous.</label>
</div>

<h4>About you</h4>
<div id="comment-form-name">
  <input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="591" />
<input type="hidden" name="__lang" value="en" />
<label for="comment-author">Your Name</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">Your Email Address</label>
<input id="comment-email" name="email" size="30" value="" />
</div>

<div id="comments-open-footer">
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />

</div>
</form>
</div>
</div>


<p id="gentime">This page was last generated on $Date: 2011/12/16 03:03:08 $</p>

      </div><!-- End of "main" DIV. -->

<address>

This blog is written by W3C staff and working group participants,<br />
&nbsp;and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
    </address>


    <p class="copyright">
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2011
      <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
      (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
      <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
      <a href="http://www.keio.ac.jp/">Keio</a>),
      All Rights Reserved.
      W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
      <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
      and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
      rules apply. Your interactions with this site are in accordance
      with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
      <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
      statements.
    </p>

  </body>
</html>