W3C home > Mailing lists > Public > public-html-commits@w3.org > June 2008

html5/html-author Overview.html,1.7,1.8

From: Lachlan Hunt via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 10 Jun 2008 13:21:57 +0000
To: public-html-commits@w3.org
Message-Id: <E1K63nR-0000ek-KA@lionel-hutz.w3.org>

Update of /sources/public/html5/html-author
In directory hutz:/tmp/cvs-serv2483

Modified Files:
	Overview.html 
Log Message:
Wrote document representation and some syntax sections

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/html-author/Overview.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- Overview.html	7 May 2008 00:16:39 -0000	1.7
+++ Overview.html	10 Jun 2008 13:21:55 -0000	1.8
@@ -39,13 +39,13 @@
 
    <h1 id=the-web>The Web Developer’s Guide to HTML 5</h1>
 
-   <h2 class="no-num no-toc" id=w3c-editors>W3C Editor’s Draft 7 May 2008</h2>
+   <h2 class="no-num no-toc" id=w3c-editors>W3C Editor’s Draft 10 June 2008</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2008/ED-html5-author-20080507">http://www.w3.org/TR/2008/ED-html5-author-20080507</a>
+     href="http://www.w3.org/TR/2008/ED-html5-author-20080610">http://www.w3.org/TR/2008/ED-html5-author-20080610</a>
 
     <dt>Latest version:
 
@@ -404,30 +404,115 @@
 
   <p>There is a difference between the vocabulary of HTML—the elements and
    attributes that can be used, and their meanings—and the way the document
-   is represented. When you write an HTML document in a text editor, you're
-   using one of the
+   is represented. Typically, documents are created by writing them in either
+   the HTML or XHTML syntax. When a browser opens the page, it reads the file
+   and creates a Document Object Model (DOM) as its internal representation.
+   The DOM is commonly used by web developers through the use of scripts that
+   modify the content on the page.
 
   <h3 id=html-syntax><span class=secno>2.1 </span>HTML Syntax</h3>
 
-  <p>...
+  <p>The HTML syntax is loosely based upon the older, though very widely used
+   syntax from HTML 4.01. Although it is inspired by its SGML origins, it
+   really only shares minor syntactic similarities. This features a range of
+   shorthand syntaxes, designed to make hand coding more convenient, such as
+   allowing the omission of some optional tags and attribute values. Authors
+   are free to choose whether or not they wish to take advantage of these
+   shorthand features based upon their own personal preferences.
+
+  <p>The following example illustrates a basic HTML document, demonstrating a
+   few of the shorthand syntax
+
+  <div class="example html">
+   <p>HTML Example:</p>
+
+   <pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;An HTML Document&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body class=example&gt;
+    &lt;h1&gt;Example&lt;/h1&gt;
+    &lt;p&gt;This is an example HTML document.
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+  </div>
 
   <h3 id=xhtml><span class=secno>2.2 </span>XHTML Syntax</h3>
 
-  <p>...
+  <p>The XHTML syntax uses the more strict XML syntax. While this too is
+   inspired by SGML, this syntax requires documents to be well-formed, which
+   some people prefer because of it's stricter error handling, forcing
+   authors to maintain cleaner markup.
+
+  <div class="example xhtml">
+   <p>XHTML Example:</p>
+
+   <pre>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
+  &lt;head&gt;
+    &lt;title&gt;An HTML Document&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body class="example"&gt;
+    &lt;h1&gt;Example&lt;/h1&gt;
+    &lt;p&gt;This is an example HTML document.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+  </div>
+
+  <p>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.
 
   <h3 id=document0><span class=secno>2.3 </span>Document Object Model</h3>
 
-  <p>...
+  <p>The Document Object Model (DOM) is the internal representation used by
+   web browsers for storing the document in memory. This represents the
+   document as a tree and exposes various APIs designed for authors to work
+   with the document using scripts.
+
+  <p>The following diagram illustrates the DOM structure representing the the
+   document that would be created by the previous examples.
+
+  <div class=figure>
+   <p>[TODO: INSERT DOM TREE IMAGE]</p>
+
+   <p class=legend>The DOM tree includes a title element in the head and h1
+    and p elements in the body.</p>
+  </div>
+
+  <p>Some of the basic APIs include the ability to add and remove elements
+   and set attributes. Some elements feature more specialised APIs, such as
+   form controls, canvas and the multimedia elements.
 
   <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
 
   <h3 id=doctype><span class=secno>3.1 </span>Doctype Declaration</h3>
 
-  <p>The Document Type Declaration...
+  <p>The Document Type Declaration needs to be present at the beginning of a
+   document that uses the HTML syntax. It may optionally be used within the
+   XHTML syntax, but it is not required.
 
   <pre><code>&lt;!DOCTYPE html&gt;</code></pre>
 
-  <p>[Explain purpose of DOCTYPE, standards/quirks mode]
+  <p>The DOCTYPE originates from HTML's SGML lineage and, in previous levels
+   of HTML, was originally used to refer to a Document Type Definition — a
+   formal declaration of the elements, attributes and syntactic features that
+   could be used within the document. Those who are familiar with previous
+   levels of HTML will notice that there is no PUBLIC or SYSTEM identifier
+   present in this DOCTYPE, which were used to refer to the DTD.
+
+  <p>As HTML5 is no longer formally based upon SGML, the DOCTYPE no longer
+   serves this purpose, and thus it does not refer to a DTD anymore. However,
+   due to legacy constraints, it has gained another very important purpose:
+   triggering no-quirks mode in browsers.
+
+  <p>HTML 5 defines three modes: <strong>quirks mode</strong>,
+   <strong>limited quirks mode</strong> and <strong>no quirks mode</strong>,
+   of which it is only considered conforming to use the latter. The reason
+   for this is due to backwards compatibility. The important thing to
+   understand is that there are differences in the way documents are visually
+   rendered in each of the modes and to ensure the most standards compliant
+   rendering, it is important to ensure no-quirks mode is used.
 
   <h3 id=elements><span class=secno>3.2 </span>Elements and Attributes</h3>
 
@@ -436,13 +521,57 @@
 
   <pre><code>&lt;div&gt;</code></pre>
 
+  <p>The element's tag name appears immediately following the left angle
+   bracket and either followed immediately by the right angle bracket or
+   separated from the attributes by whitespace.
+
   <p>End tags are marked up in a similar fasion, but they include a slash
    before the tag name.
 
   <pre><code>&lt;/div&gt;</code></pre>
 
-  <p>[Explain empty elements, void elements, differences between HTML and
-   XHTML, etc.]
+  <p>End tags must not contain any attributes. Whitespace may optionally
+   occur between the tag name and the right angle bracket, however it is
+   generally omitted.
+
+  <p>An empty element is any element that does not contain any content within
+   it. Some elements are forbidden from containing any content at all, and
+   this special class of empty elements are known as <em>void elements</em>.
+
+  <p>In general, an empty element is just one with a start tag immediately
+   followed by its associated end tag. In both HTML and XHTML syntaxes, this
+   can be represented in the same what:
+
+  <pre><code>&lt;p&gt;&lt;/p&gt;</code></pre>
+
+  <p>For elements classified as void elements, the end tag must be omitted in
+   the HTML syntax and it is automatically implied by the parser. Such
+   elements include <code>br</code>, <code>hr</code>, <code>link</code>, etc.
+
+  <div class="example html">
+   <p>HTML Example:</p>
+
+   <pre><code>&lt;br&gt;</code></pre>
+  </div>
+
+  <p>In XHTML, the XML syntactic requirements dictate that this must be made
+   explicit using either an explicit end tag, as above, or the empty element
+   tag syntax. This is achieved by inserting a slash at the end of the start
+   tag, immediately before the right angle bracket.
+
+  <div class=example>
+   <p>Example:</p>
+
+   <pre><code>&lt;br/&gt;</code></pre>
+  </div>
+
+  <p>Authors may optionally choose to use this same syntax for void elements
+   in the HTML syntax as well. Some authors also choose to include whitespace
+   before the slash, however this is not necessary. (Using whitespace in that
+   fashion is a convention inherited from the compatibility guidelines in
+   XHTML 1.0, Appendix C.)
+
+  <p>Elements may contain attributes
 
   <h2 id=element><span class=secno>4. </span>Element Structure and Semantics</h2>
 
Received on Tuesday, 10 June 2008 13:22:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 9 October 2008 20:32:57 GMT