- From: Lachlan Hunt via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 10 Jun 2008 13:21:57 +0000
- To: public-html-commits@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><!DOCTYPE html>
+<html>
+ <head>
+ <title>An HTML Document</title>
+ </head>
+ <body class=example>
+ <h1>Example</h1>
+ <p>This is an example HTML document.
+ </body>
+</html></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><html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>An HTML Document</title>
+ </head>
+ <body class="example">
+ <h1>Example</h1>
+ <p>This is an example HTML document.</p>
+ </body>
+</html></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><!DOCTYPE html></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><div></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></div></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><p></p></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><br></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><br/></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 UTC