- From: Lachlan Hunt via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 12 Jun 2008 16:11:44 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/html-author
In directory hutz:/tmp/cvs-serv27511
Modified Files:
Overview.html Overview.src.html
Log Message:
Updated elements and attribute sections
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/html-author/Overview.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.html 10 Jun 2008 14:44:28 -0000 1.10
+++ Overview.html 12 Jun 2008 16:11:42 -0000 1.11
@@ -39,13 +39,13 @@
<h1 id=the-web>The Web Developer’s Guide to HTML 5</h1>
- <h2 class="no-num no-toc" id=w3c-editors>W3C Editor’s Draft 10 June 2008</h2>
+ <h2 class="no-num no-toc" id=w3c-editors>W3C Editor’s Draft 12 June 2008</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2008/ED-html5-author-20080610">http://www.w3.org/TR/2008/ED-html5-author-20080610</a>
+ href="http://www.w3.org/TR/2008/ED-html5-author-20080612">http://www.w3.org/TR/2008/ED-html5-author-20080612</a>
<dt>Latest version:
@@ -159,8 +159,13 @@
<li><a href="#doctype"><span class=secno>3.1 </span>Doctype
Declaration</a>
- <li><a href="#elements"><span class=secno>3.2 </span>Elements and
- Attributes</a>
+ <li><a href="#elements"><span class=secno>3.2 </span>Elements</a>
+
+ <li><a href="#attributes0"><span class=secno>3.3 </span>Attributes</a>
+ <ul class=toc>
+ <li><a href="#empty"><span class=secno>3.3.1 </span>Empty
+ Attributes</a>
+ </ul>
</ul>
<li><a href="#element"><span class=secno>4. </span>Element Structure and
@@ -514,44 +519,60 @@
rendered in each of the modes and to ensure the most standards compliant
rendering, it is important to ensure no-quirks mode is used.
- <h3 id=elements><span class=secno>3.2 </span>Elements and Attributes</h3>
+ <h3 id=elements><span class=secno>3.2 </span>Elements</h3>
- <p>Elements are marked up using start tags and end tags. Start tags are
- delimited using angle brackets:
+ <p>Elements are marked up using start tags and end tags. Tags are delimited
+ using angle brackets with the tag name in between. The difference between
+ start tags and end tags is that the latter includes a slash before the tag
+ name.
- <pre><code><div></code></pre>
+ <div class=example>
+ <p>Example:</p>
- <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>This example paragraph illustrates the use of start tags and end tags.</p>
- <p>End tags are marked up in a similar fasion, but they include a slash
- before the tag name.
+ <pre><code><p>The quick brown fox jumps over the lazy dog.</p></code></pre>
+ </div>
- <pre><code></div></code></pre>
+ <p>In both tags, whitespace is permitted between the tag name and the
+ closing right angle bracket, however it is usually omitted because it's
+ redundant.
- <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>In XHTML, tag names are <em>case sensitive</em> and are usually defined
+ to be written in lowercase. In HTML, however, tag names are case
+ insensitive and may be written in all uppercase or mixed case, although
+ the most common convention is to stick with lowercase. The case of the
+ start and end tags do not have to be the same, but being consistent does
+ make the code look cleaner.
+
+ <div class="html example">
+ <p>HTML Example:</p>
+
+ <pre><code><DIV>...</DIV></code></pre>
+ </div>
<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>In general, an empty element is just one with a start tag immediately
+ 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:
+ can be represented in the same way.
- <pre><code><p></p></code></pre>
+ <div class=example>
+ <p>Example:
- <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.
+ <pre><code><span></span></code></pre>
+ </div>
+
+ <p>But note that in HTML, that syntax cannot be used for void elements. For
+ such elements, the end tag must be omitted because the element is
+ automatically closed by the parser. Such elements include, among others,
+ <code>br</code>, <code>hr</code>, <code>link</code> and <code>meta</code>
<div class="example html">
<p>HTML Example:</p>
- <pre><code><br></code></pre>
+ <pre><code><link type="text/css" href="style.css"></code></pre>
</div>
<p>In XHTML, the XML syntactic requirements dictate that this must be made
@@ -562,7 +583,7 @@
<div class=example>
<p>Example:</p>
- <pre><code><br/></code></pre>
+ <pre><code><link type="text/css" href="style.css"/></code></pre>
</div>
<p>Authors may optionally choose to use this same syntax for void elements
@@ -571,7 +592,93 @@
fashion is a convention inherited from the compatibility guidelines in
XHTML 1.0, Appendix C.)
- <p>Elements may contain attributes
+ <h3 id=attributes0><span class=secno>3.3 </span>Attributes</h3>
+
+ <p>Elements may contain attributes that are used to set various properties
+ of an element. Some attributes are defined globally and can be used on any
+ element, while others are defined for specific elements only. All
+ attributes have a name and a value and look like this.
+
+ <div class=example>
+ <p>Example:</p>
+
+ <p>This example illustrates how to mark up a div element with an attribute
+ named <code>class</code> using a value of <code>"example"</code>.</p>
+
+ <pre><code><div class="example">...</div></code></pre>
+ </div>
+
+ <p>Attributes may only be specified within start tags and must never be
+ used in end tags.
+
+ <div class="example error">
+ <p>Erroneous Example:</p>
+
+ <pre><code><section id="example">...</section <strong>id="example"</strong>></code></pre>
+ </div>
+
+ <p>There are four slightly different syntaxes that may be used for
+ attributes in HTML: Empty attribute syntax, Unquoted attribute value
+ syntax, Single-quoted attribute value syntax and Double-quoted attribute
+ value syntax.
+
+ <p>All four syntaxes may be used in the HTML syntax, depending on what is
+ needed for each specific attribute. However, in the XHTML syntax,
+ attribute values must always be quoted using either single or double
+ quotes.
+
+ <h4 id=empty><span class=secno>3.3.1 </span>Empty Attributes</h4>
+
+ <p>An empty attribute is one where the value has been omitted. This is a
+ syntactic shorthand for specifying the attribute with an empty value, and
+ is commonly used for boolean attributes.
+
+ <div class="html example">
+ <p>HTML Example:</p>
+
+ <pre><code><input disabled>...</div></code></pre>
+
+ <p>The previous example is equivalent to specifying the attribute with an
+ empty string as the value.</p>
+
+ <pre><code><input disabled="">...</div></code></pre>
+ </div>
+
+ <p class=note>Note: While, in the previous, it is semantically equivalent
+ to specifying the attribute with the value <code>"disabled"</code>, it is
+ not exactly the same.
+
+ <div class="html example">
+ <p>Example:</p>
+
+ <pre><code><img src="decoration.png" alt></code></pre>
+
+ <p>The previous example is equivalent to specifying the attribute with an
+ empty string as the value.</p>
+
+ <pre><code><input disabled="">...</div></code></pre>
+ </div>
+
+ <div class=example>
+ <p>Example:</p>
+
+ <pre><code><div class='example'>...</div></code></pre>
+ </div>
+
+ <p>In HTML, the quotes surround the value may also be omitted in most
+ cases.
+
+ <p>In XHTML, attribute names are case sensitive and most are defined to be
+ lowercase. In HTML, attribute names are case insensitive, and so they
+ could be written in all uppercase or mixed case, depending on your own
+ preferences. It is conventional, however, to use the same case as would be
+ used in XHTML, which is generally all lowercase.
+
+ <div class="html example">
+ <p>HTML Example:</p>
+
+ <pre><code><div CLASS="example"></code></pre>
+ </div>
<h2 id=element><span class=secno>4. </span>Element Structure and Semantics</h2>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/html5/html-author/Overview.src.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.src.html 10 Jun 2008 14:44:28 -0000 1.10
+++ Overview.src.html 12 Jun 2008 16:11:42 -0000 1.11
@@ -355,42 +355,55 @@
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>
+ <h3>Elements</h3>
- <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>Elements are marked up using start tags and end tags. Tags are delimited
+ using angle brackets with the tag name in between. The difference between
+ start tags and end tags is that the latter includes a slash before the
+ tag name.</p>
- <p>End tags are marked up in a similar fasion, but they include a slash
- before the tag name.</p>
+ <div class="example">
+ <p>Example:</p>
+ <p>This example paragraph illustrates the use of start tags and end tags.</p>
+ <pre><code><p>The quick brown fox jumps over the lazy dog.</p></code></pre>
+ </div>
- <pre><code></div></code></pre>
+ <p>In both tags, whitespace is permitted between the tag name and the
+ closing right angle bracket, however it is usually omitted because it's
+ redundant.</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>In XHTML, tag names are <em>case sensitive</em> and are usually defined
+ to be written in lowercase. In HTML, however, tag names are case
+ insensitive and may be written in all uppercase or mixed case, although
+ the most common convention is to stick with lowercase. The case
+ of the start and end tags do not have to be the same, but being
+ consistent does make the code look cleaner.</p>
+
+ <div class="html example">
+ <p>HTML Example:</p>
+ <pre><code><DIV>...</DIV></code></pre>
+ </div>
<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
+ this special class of empty elements are known as <em>void elements</em>.
+ 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:
+ can be represented in the same way.</p>
- <pre><code><p></p></code></pre>
+ <div class="example">
+ <p>Example:</p
+ <pre><code><span></span></code></pre>
+ </div>
- <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>
+ <p>But note that in HTML, that syntax cannot be used for void elements. For
+ such elements, the end tag must be omitted because the element is
+ automatically closed by the parser. Such elements include, among others,
+ <code>br</code>, <code>hr</code>, <code>link</code> and <code>meta</code></p>
<div class="example html">
<p>HTML Example:</p>
- <pre><code><br></code></pre>
+ <pre><code><link type="text/css" href="style.css"></code></pre>
</div>
<p>In XHTML, the XML syntactic requirements dictate that this must be made
@@ -400,7 +413,7 @@
<div class="example">
<p>Example:</p>
- <pre><code><br/></code></pre>
+ <pre><code><link type="text/css" href="style.css"/></code></pre>
</div>
<p>Authors may optionally choose to use this same syntax for void elements
@@ -409,7 +422,85 @@
whitespace in that fashion is a convention inherited from the
compatibility guidelines in XHTML 1.0, Appendix C.)
- <p>Elements may contain attributes
+ <h3>Attributes</h3>
+
+ <p>Elements may contain attributes that are used to set various properties
+ of an element. Some attributes are defined globally and can be used on
+ any element, while others are defined for specific elements only. All
+ attributes have a name and a value and look like this.</p>
+
+ <div class="example">
+ <p>Example:</p>
+ <p>This example illustrates how to mark up a div element with an
+ attribute named <code>class</code> using a value of
+ <code>"example"</code>.</p>
+ <pre><code><div class="example">...</div></code></pre>
+ </div>
+
+ <p>Attributes may only be specified within start tags and must never be used
+ in end tags.</p>
+
+ <div class="example error">
+ <p>Erroneous Example:</p>
+ <pre><code><section id="example">...</section <strong>id="example"</strong>></code></pre>
+ </div>
+
+ <p>There are four slightly different syntaxes that may be used for
+ attributes in HTML: Empty attribute syntax, Unquoted attribute value
+ syntax, Single-quoted attribute value syntax and Double-quoted attribute
+ value syntax.</p>
+
+ <p>All four syntaxes may be used in the HTML syntax, depending on what is
+ needed for each specific attribute. However, in the XHTML syntax,
+ attribute values must always be quoted using either single or double
+ quotes.</p>
+
+ <h4>Empty Attributes</h4>
+
+ <p>An empty attribute is one where the value has been omitted. This is a
+ syntactic shorthand for specifying the attribute with an empty value,
+ and is commonly used for boolean attributes.</p>
+
+ <div class="html example">
+ <p>HTML Example:</p>
+ <pre><code><input disabled>...</div></code></pre>
+
+ <p>The previous example is equivalent to specifying the attribute with
+ an empty string as the value.</p>
+ <pre><code><input disabled="">...</div></code></pre>
+ </div>
+
+ <p class="note">Note: While, in the previous, it is semantically equivalent
+ to specifying the attribute with the value <code>"disabled"</code>, it is
+ not exactly the same.</p>
+
+ <div class="html example">
+ <p>Example:</p>
+ <pre><code><img src="decoration.png" alt></code></pre>
+
+ <p>The previous example is equivalent to specifying the attribute with
+ an empty string as the value.</p>
+ <pre><code><input disabled="">...</div></code></pre>
+ </div>
+
+ <div class="example">
+ <p>Example:</p>
+ <pre><code><div class='example'>...</div></code></pre>
+ </div>
+
+ <p>In HTML, the quotes surround the value may also be omitted in most cases.
+ </p>
+
+ <p>In XHTML, attribute names are case sensitive and most are defined to be
+ lowercase. In HTML, attribute names are case insensitive, and so they
+ could be written in all uppercase or mixed case, depending on your own
+ preferences. It is conventional, however, to use the same case as would
+ be used in XHTML, which is generally all lowercase.</p>
+
+ <div class="html example">
+ <p>HTML Example:</p>
+ <pre><code><div CLASS="example"></code></pre>
+ </div>
<h2>Element Structure and Semantics</h2>
Received on Thursday, 12 June 2008 16:12:25 UTC