- From: poot <cvsmail@w3.org>
- Date: Fri, 17 Jul 2009 20:29:56 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: Work on the intro section to make it more approachable. (whatwg
r3440)
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2564&r2=1.2565&f=h
http://html5.org/tools/web-apps-tracker?from=3439&to=3440
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2564
retrieving revision 1.2565
diff -u -d -r1.2564 -r1.2565
--- Overview.html 17 Jul 2009 05:20:53 -0000 1.2564
+++ Overview.html 17 Jul 2009 11:28:30 -0000 1.2565
@@ -1387,10 +1387,10 @@
<!-- this is a comment -->
</body>
</html></pre><p>HTML documents consist of a tree of elements and text. Each
- element is denoted by a <a href="#syntax-start-tag" title="syntax-start-tag">start
- tag</a>, such as "<code title=""><body></code>", and an <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a>, such as "<code title=""></body></code>". (Certain start tags and end tags can in
- certain cases be <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a>
- and are implied by other tags.)<p>Tags have to be nested such that elements are all completely
+ element is denoted in the source by a <a href="#syntax-start-tag" title="syntax-start-tag">start tag</a>, such as "<code title=""><body></code>", and an <a href="#syntax-end-tag" title="syntax-end-tag">end
+ tag</a>, such as "<code title=""></body></code>". (Certain
+ start tags and end tags can in certain cases be <a href="#syntax-tag-omission" title="syntax-tag-omission">omitted</a> and are implied by other
+ tags.)<p>Tags have to be nested such that elements are all completely
within each other, without overlapping:<pre class="bad"><p>This is <em>very <strong>wrong</em>!</strong></p></pre><pre><p>This <em>is <strong>correct</strong>.</em></p></pre><p>This specification defines a set of elements that can be used in
HTML, along with rules about the ways in which the elements can be
nested.<p>Elements can have attributes, which control how the elements
@@ -1407,21 +1407,42 @@
<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
-<input name=address maxlength="200"></pre><hr><p>The tree formed by an HTML document in this way is turned into a
- DOM tree when parsed. This DOM tree can then be manipulated from
- scripts. Since DOM trees are the "live" representation of an HTML
- document, this specification is mostly phrased in terms of DOM
- trees, instead of the serialisation described above.<p>The markup snippet at the top of this section represents the
- following DOM tree:<ul class="domTree"><li class="t10">DOCTYPE: <code><a href="#the-html-element">html</a></code><li class="t1"><code><a href="#the-html-element">html</a></code><ul><li class="t1"><code><a href="#the-head-element">head</a></code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t1"><code><a href="#the-title-element">title</a></code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣</span><li class="t1"><code><a href="#the-body-element">body</a></code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t1"><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t1"><code>a href="#the-p-element">p</a></code><ul><li class="t3"><code>#text</code>: <span title="">This is a </span><li class="t1"><code><a href="#the-a-element">a</a></code> <span class="t2" title=""><code class="attribute name">href</code>="<code class="attribute value">demo.html</code>"</span><ul><li class="t3"><code>#text</code>: <span title="">simple</span></ul><li class="t3"><code>#text</code>: <span title=""> sample.</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t8"><code>#comment</code>: <span title=""> this is a comment </span><li class="t3"><code>#text</code>: <span title="">⏎␣⏎</span></ul></ul></ul><p>There are many more text nodes in the DOM tree than one would
+<input name=address maxlength="200"></pre><p>HTML user agents (e.g. Web browsers) then <i>parse</i> this
+ markup, turning it into a DOM (Document Object Model) tree. A DOM
+ tree is an in-memory representation of a document.<p>DOM trees contain several kinds of nodes, in particular a DOCTYPE
+ node, elements, text nodes, and comment nodes.<p>The markup snippet at the top of this section would be turned
+ into the following DOM tree:<ul class="domTree"><li class="t10">DOCTYPE: <code><a href="#the-html-element">html</a></code><li class="t1"><code><a href="#the-html-element">html</a></code><ul><li class="t1"><code><a href="#the-head-element">head</a></code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t1"><code><a href="#the-title-element">title</a></code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣</span><li class="t1"><code><a href="#the-body-element">body</a></code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t1"><code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t"><code><a href="#the-p-element">p</a></code><ul><li class="t3"><code>#text</code>: <span title="">This is a </span><li class="t1"><code><a href="#the-a-element">a</a></code> <span class="t2" title=""><code class="attribute name">href</code>="<code class="attribute value">demo.html</code>"</span><ul><li class="t3"><code>#text</code>: <span title="">simple</span></ul><li class="t3"><code>#text</code>: <span title=""> sample.</span></ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span><li class="t8"><code>#comment</code>: <span title=""> this is a comment </span><li class="t3"><code>#text</code>: <span title="">⏎␣⏎</span></ul></ul></ul><p>The <a href="#root-element">root element</a> of this tree is the
+ <code><a href="#the-html-element">html</a></code> element, which is the element always found at the
+ root of HTML documents. It contains two elements, <code><a href="#the-head-element">head</a></code>
+ and <code><a href="#the-body-element">body</a></code>, as well as a text node between them.<p>There are many more text nodes in the DOM tree than one would
initially expect, because the source contains a number of spaces
(presented by "␣") and line breaks ("⏎") that all end
- up as text nodes in the DOM.<hr><p>Each element in the DOM tree is represented by an object, and
- thus objects have APIs so that they can be manipulated. For
+ up as text nodes in the DOM.<p>The <code><a href="#the-head-element">head</a></code> element contains a <code><a href="#the-title-element">title</a></code>
+ element, which itself contains a text node with the text "Sample
+ page". Similarly, the <code><a href="#the-body-element">body</a></code> element contains an
+ <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element, a <code><a href="#the-p-element">p</a></code> element, and a
+ comment.<hr><p>This DOM tree can be manipulated from scripts in the
+ page. Scripts (typically in JavaScript) are small programs that can
+ be embedded using the <code><a href="#script">script</a></code> element or using
+ <a href="#event-handler-content-attributes">event handler content attributes</a>. For example, here is
+ a form with a script that sets the value of the form's
+ <code><a href="#the-output-element">output</a></code> element to say "Hello World":<pre><<a href="#the-form-element">form</a> <a href="#attr-form-name" title="attr-form-name">name</a>="main">
+ Result: <<a href="#the-output-element">output</a> <a href="#attr-fe-name" title="attr-fe-name">name</a>="result"></output>
+ <<a href="#script">script</a>>
+ <a href="#htmldocument" title="HTMLDocument">document</a>.<a href="#dom-document-forms" title="dom-document-forms">forms</a>.main.<a href="#dom-form-elements" title="dom-form-elements">elements</a>.result.<a href="#dom-output-value" title="dom-output-value">value</a> = 'Hello World';
+ </script>
+</form></pre><p>Each element in the DOM tree is represented by an object, and
+ these objects have APIs so that they can be manipulated. For
instance, a link (e.g. the <code><a href="#the-a-element">a</a></code> element in the tree above)
can have its "<code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code>"
attributed changed in several ways:<pre>var a = <a href="#htmldocument" title="HTMLDocument">document</a>.<a href="#dom-document-links" title="dom-document-links">links</a>[0]; // obtain the first link in the document
a.<a href="#dom-a-href" title="dom-a-href">href</a> = 'sample.html'; // change the destination URL of the link
-a.<a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a> = 'https'; // change just the scheme part of the URL</pre><p>HTML documents represent a media-independent description of
+a.<a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a> = 'https'; // change just the scheme part of the URL
+a.setAttribute('href', 'http://example.com/'); // change the content attribute directly</pre><p>Since DOM trees are used as the way to represent HTML documents
+ when they are processed and presented by implementations (especially
+ interactive implementations like Web browsers), this specification
+ is mostly phrased in terms of DOM trees, instead of the markup
+ described above.<hr><p>HTML documents represent a media-independent description of
interactive content. HTML documents might be rendered to a screen,
or through a speech synthesizer, or on a braille display. To
influence exactly how such rendering takes place, authors can use a
Received on Friday, 17 July 2009 11:30:32 UTC