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

html5/spec Overview.html,1.2557,1.2558

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 17 Jul 2009 00:57:11 +0000
To: public-html-commits@w3.org
Message-Id: <E1MRbl9-00020r-KA@lionel-hutz.w3.org>
Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv7716

Modified Files:
	Overview.html 
Log Message:
Elaborate on attributes and DOM trees in the intro section. (whatwg r3432)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2557
retrieving revision 1.2558
diff -u -d -r1.2557 -r1.2558
--- Overview.html	17 Jul 2009 00:39:31 -0000	1.2557
+++ Overview.html	17 Jul 2009 00:57:08 -0000	1.2558
@@ -1384,27 +1384,41 @@
  &lt;body&gt;
   &lt;h1&gt;Sample page&lt;/h1&gt;
   &lt;p&gt;This is a &lt;a href="demo.html"&gt;simple&lt;/a&gt; sample.&lt;/p&gt;
+  &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 correctly, so that elements do not
-  partially overlap each other:<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
+  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
   work. In the example above, there is a <a href="#hyperlink">hyperlink</a>,
   formed using the <code><a href="#the-a-element">a</a></code> element and its <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute:<pre>&lt;a href="demo.html"&gt;simple&lt;/a&gt;</pre><p><a href="#syntax-attributes" title="syntax-attributes">Attributes</a> are placed
   inside the start tag, and consist of a <a href="#syntax-attribute-name" title="syntax-attribute-name">name</a> and a <a href="#syntax-attribute-value" title="syntax-attribute-value">value</a>, separated by an "<code title="">=</code>" character. The attribute value can be left
-  unquoted if it is a keyword, but generally will be quoted. (The
-  value can also be omitted altogether if it is empty.)<p>The tree formed by an HTML document in this way is turned into a
+  unquoted if it is a keyword. Otherwise, it has to be quoted using
+  either single or double quotes. The value, along with the "<code title="">=</code>" character, can be omitted altogether if the value
+  is the empty string.<pre>&lt;!-- empty attributes --&gt;
+&lt;input name=address disabled&gt;
+&lt;input name=address disabled=""&gt;
+
+&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>Each element in the DOM tree is represented by an object, and
+  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
+  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
-  instance, a link 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
+  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
   interactive content. HTML documents might be rendered to a screen,
Received on Friday, 17 July 2009 00:57:22 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 17 July 2009 00:57:22 GMT