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

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

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

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

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

Index: Overview.src.html
===================================================================
RCS file: /sources/public/html5/html-author/Overview.src.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- Overview.src.html	7 May 2008 00:16:39 -0000	1.7
+++ Overview.src.html	10 Jun 2008 13:21:41 -0000	1.8
@@ -250,37 +250,166 @@
 	<h2>Document Representation</h2>
 	<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</p>
+	   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.</p>
 
 	<h3>HTML Syntax</h3>
-	<p>...</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>
+
+	<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>XHTML Syntax</h3>
-	<p>...</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.</p>
+
+	<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>Document Object Model</h3>
-	<p>...</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>
+	
+	<p>The following diagram illustrates the DOM structure representing the
+	   the document that would be created by the previous examples.</p>
+
+	<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.</p>
+
 
 	<h2>Syntax</h2>
 
 	<h3>Doctype Declaration</h3>
-	<p>The Document Type Declaration...</p>
+	<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.</p>
+
 	<pre><code>&lt;!DOCTYPE html&gt;</code></pre>
 
-	<p>[Explain purpose of DOCTYPE, standards/quirks mode]</p>
+	<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>
+
+	<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>
+
+	<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.</p>
+
 
 	<h3>Elements and Attributes</h3>
 	<p>Elements are marked up using start tags and end tags. Start tags are
 	   delimited using angle brackets:</p>
 	<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>
+
 	<p>End tags are marked up in a similar fasion, but they include a slash
 	   before the tag name.</p>
 
 	<pre><code>&lt;/div&gt;</code></pre>
 
-	<p>[Explain empty elements, void elements, differences between HTML and XHTML, etc.]</p>
+	<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>
+
+	<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>
+
+	<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.</p>
+
+	<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.</p>
+
+	<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>Element Structure and Semantics</h2>
 
Received on Tuesday, 10 June 2008 13:22:17 GMT

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