- From: poot <cvsmail@w3.org>
- Date: Fri, 17 Jul 2009 09:58:30 +0900 (JST)
- To: public-html-diffs@w3.org
hixie: Elaborate on attributes and DOM trees in the intro section.
(whatwg r3432)
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2557&r2=1.2558&f=h
http://html5.org/tools/web-apps-tracker?from=3431&to=3432
===================================================================
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 @@
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
+ <!-- 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 correctly, so that elements do not
- partially overlap each other:<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
+ 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
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><a href="demo.html">simple</a></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><!-- empty attributes -->
+<input name=address disabled>
+<input name=address disabled="">
+
+<!-- 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>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="">⏎␣␣</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
+ 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
- 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:59:06 UTC