- From: Lachlan Hunt via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 10 Jun 2008 13:21:43 +0000
- To: public-html-commits@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><!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>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><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>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><!DOCTYPE html></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><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> + <p>End tags are marked up in a similar fasion, but they include a slash before the tag name.</p> <pre><code></div></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><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.</p> + + <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.</p> + + <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>Element Structure and Semantics</h2>
Received on Tuesday, 10 June 2008 13:22:17 UTC