W3C home > Mailing lists > Public > public-html-diffs@w3.org > July 2009

hixie: Work on the intro section to make it more approachable. (whatwg r3440)

From: poot <cvsmail@w3.org>
Date: Fri, 17 Jul 2009 20:29:56 +0900 (JST)
To: public-html-diffs@w3.org
Message-Id: <20090717112956.818FF2BC73@toro.w3.mag.keio.ac.jp>
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 @@
   &lt;!-- this is a comment --&gt;
  &lt;/body&gt;
 &lt;/html&gt;</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="">&lt;body&gt;</code>", and an <a href="#syntax-end-tag" title="syntax-end-tag">end tag</a>, such as "<code title="">&lt;/body&gt;</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="">&lt;body&gt;</code>", and an <a href="#syntax-end-tag" title="syntax-end-tag">end
+  tag</a>, such as "<code title="">&lt;/body&gt;</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">&lt;p&gt;This is &lt;em&gt;very &lt;strong&gt;wrong&lt;/em&gt;!&lt;/strong&gt;&lt;/p&gt;</pre><pre>&lt;p&gt;This &lt;em&gt;is &lt;strong&gt;correct&lt;/strong&gt;.&lt;/em&gt;&lt;/p&gt;</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 @@
 &lt;!-- attributes with a value --&gt;
 &lt;input name=address maxlength=200&gt;
 &lt;input name=address maxlength='200'&gt;
-&lt;input name=address maxlength="200"&gt;</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="">&#9166;&#9251;&#9251;</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="">&#9166;&#9251;</span></ul><li class="t3"><code>#text</code>: <span title="">&#9166;&#9251;</span><li class="t1"><code><a href="#the-body-element">body</a></code><ul><li class="t3"><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</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="">&#9166;&#9251;&#9251;</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="">&#9166;&#9251;&#9251;</span><li class="t8"><code>#comment</code>: <span title=""> this is a comment </span><li class="t3"><code>#text</code>: <span title="">&#9166;&#9251;&#9166;</span></ul></ul></ul><p>There are many more text nodes in the DOM tree than one would
+&lt;input name=address maxlength="200"&gt;</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="">&#9166;&#9251;&#9251;</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="">&#9166;&#9251;</span></ul><li class="t3"><code>#text</code>: <span title="">&#9166;&#9251;</span><li class="t1"><code><a href="#the-body-element">body</a></code><ul><li class="t3"><code>#text</code>: <span title="">&#9166;&#9251;&#9251;</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="">&#9166;&#9251;&#9251;</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="">&#9166;&#9251;&#9251;</span><li class="t8"><code>#comment</code>: <span title=""> this is a comment </span><li class="t3"><code>#text</code>: <span title="">&#9166;&#9251;&#9166;</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 "&#9251;") and line breaks ("&#9166;") 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>&lt;<a href="#the-form-element">form</a> <a href="#attr-form-name" title="attr-form-name">name</a>="main"&gt;
+ Result: &lt;<a href="#the-output-element">output</a> <a href="#attr-fe-name" title="attr-fe-name">name</a>="result"&gt;&lt;/output&gt;
+ &lt;<a href="#script">script</a>&gt;
+  <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';
+ &lt;/script&gt;
+&lt;/form&gt;</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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 18 December 2010 06:14:07 GMT