Skip to content

Commit

Permalink
[e] (0) A quick introduction to HTML.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@3316 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jun 25, 2009
1 parent cd8cc74 commit 4182d79
Show file tree
Hide file tree
Showing 2 changed files with 216 additions and 23 deletions.
117 changes: 105 additions & 12 deletions index
View file
Expand Up @@ -164,7 +164,8 @@
<li><a href=#structure-of-this-specification><span class=secno>1.8 </span>Structure of this specification</a>
<ol>
<li><a href=#how-to-read-this-specification><span class=secno>1.8.1 </span>How to read this specification</a></li>
<li><a href=#typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</a></ol></ol></li>
<li><a href=#typographic-conventions><span class=secno>1.8.2 </span>Typographic conventions</a></ol></li>
<li><a href=#a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</a></ol></li>
<li><a href=#infrastructure><span class=secno>2 </span>Common infrastructure</a>
<ol>
<li><a href=#terminology><span class=secno>2.1 </span>Terminology</a>
Expand Down Expand Up @@ -1425,6 +1426,97 @@



<h3 id=a-quick-introduction-to-html><span class=secno>1.9 </span>A quick introduction to HTML</h3>

<p><em>This section is non-normative.</em></p>

<p>A basic HTML document looks like this:</p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Sample page&lt;/title&gt;
&lt;/head&gt;
&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;/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>

<p>Tags have to be nested correctly, so that elements do not
partially overlap each other:</p>

<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>

<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:</p>

<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>

<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>

<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:</p>

<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,
or through a speech synthesizer, or on a braille display. To
influence exactly how such rendering takes place, authors can use a
styling language such as CSS.</p>

<p>In the following example, the page has been made yellow-on-blue
using CSS.</p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Sample styled page&lt;/title&gt;
&lt;style&gt;
body { background: navy; color: yellow; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Sample styled page&lt;/h1&gt;
&lt;p&gt;This page is just a demo.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>For more details on how to use HTML, authors are encouraged to
consult tutorials and guides. Some of the examples included in this
specification might also be of use, but the novice authors is
cautioned that this specification, by necessity, defines the
language with a level of detail that may be difficult to understand
at first.</p>



<h2 id=infrastructure><span class=secno>2 </span>Common infrastructure</h2>

<h3 id=terminology><span class=secno>2.1 </span>Terminology</h3>
Expand Down Expand Up @@ -13650,11 +13742,11 @@ first matching case):&lt;/p&gt;

<p>The <code><a href=#the-a-element>a</a></code> element also suports the complement of
<a href=#url-decomposition-attributes>URL decomposition attributes</a>, <dfn id=dom-a-protocol title=dom-a-protocol><code>protocol</code></dfn>, <dfn id=dom-a-host title=dom-a-host><code>host</code></dfn>, <dfn id=dom-a-port title=dom-a-port><code>port</code></dfn>, <dfn id=dom-a-hostname title=dom-a-hostname><code>hostname</code></dfn>, <dfn id=dom-a-pathname title=dom-a-pathname><code>pathname</code></dfn>, <dfn id=dom-a-search title=dom-a-search><code>search</code></dfn>, and <dfn id=dom-a-hash title=dom-a-hash><code>hash</code></dfn>. These must follow the
rules given for URL decomposition attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-a-href>href</code> attribute relative to the element,
if there is such an attribute and resolving it is successful, or the
empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
same as setting the element's <code title=attr-a-href>href</code>
attribute to the new output value.</p>
rules given for URL decomposition attributes, with the <a href=#concept-uda-input title=concept-uda-input>input</a> being the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute relative to the
element, if there is such an attribute and resolving it is
successful, or the empty string otherwise; and the <a href=#concept-uda-setter title=concept-uda-setter>common setter action</a> being the
same as setting the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute to the new output
value.</p>

</div>

Expand Down Expand Up @@ -39494,7 +39586,7 @@ explain that only direct children of the <menu> matter

<p>An element that is <a href=#focusable>focusable</a>, has an <a href=#assigned-access-key>assigned
access key</a>, and is neither an <code><a href=#the-a-element>a</a></code> element with an
<code title=attr-a-href>href</code> attribute, a
<code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute, a
<code><a href=#the-button-element>button</a></code> element, an <code><a href=#the-input-element>input</a></code> element whose
attribute is in one of the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a>, <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, <a href=#button-state title=attr-input-type-button>Button</a>, <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a>, or <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> states, an
<code><a href=#the-option-element>option</a></code> element with an ancestor <code><a href=#the-select-element>select</a></code>
Expand Down Expand Up @@ -46981,7 +47073,7 @@ JSURL: http://ietfreport.isoc.org/all-ids/draft-hoehrmann-javascript-scheme-00.t
empty object as soon as the attribute is set; it would then be
sniffed to determine the image type and decoded as an image.</p>

<p>A <code title="">javascript:</code> URL in an <code title=attr-a-href>href</code> attribute of an <code><a href=#the-a-element>a</a></code>
<p>A <code title="">javascript:</code> URL in an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute of an <code><a href=#the-a-element>a</a></code>
element would only be evaluated when the link was <a href=#following-hyperlinks title="following hyperlinks">followed</a>.</p>

<p>The <code title=attr-iframe-src><a href=#attr-iframe-src>src</a></code> attribute of an
Expand Down Expand Up @@ -55263,9 +55355,9 @@ style/default.css</pre>

<p>For each <var title="">node</var> in <var title="">nodes</var>:</p>

<dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-a-href>href</code></dt>
<dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dt>

<dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-a-href>href</code> content attribute relative to
<dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute relative to
the element.</dd>

<dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code></dt>
Expand Down Expand Up @@ -56615,12 +56707,12 @@ style/default.css</pre>
<dt><dfn id=command-unlink title=command-unlink><code>unlink</code></dfn></dt>
<dd><strong>Summary:</strong> Removes all links from the selection.</dd>
<dd class=impl><strong>Action:</strong> The user agent must remove all
<code><a href=#the-a-element>a</a></code> elements that have <code title=attr-a-href>href</code> attributes and that are partially
<code><a href=#the-a-element>a</a></code> elements that have <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attributes and that are partially
or completely included in the current selection.</dd>
<dd><strong>Enabled When:</strong> The document has a selection
that is entirely within an <a href=#editing-host>editing host</a> and that
contains (either partially or completely) at least one
<code><a href=#the-a-element>a</a></code> element that has an <code title=attr-a-href>href</code> attribute.</dd>
<code><a href=#the-a-element>a</a></code> element that has an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</dd>
<dd><strong>Indeterminate When:</strong> Never.</dd>
<dd><strong>State:</strong> Always false.</dd>
<dd><strong>Value:</strong> Always the string "<code title="">false</code>".</dd>
Expand Down Expand Up @@ -71317,6 +71409,7 @@ time:empty { binding: <i title="">time</i>; }</pre>
Neil Soiffer,
Nicholas Shanks,
Nicolas Gallagher,
Noah Mendelsohn,
Ojan Vafai,
Olaf Hoffmann,
Olav Junker Kj&aelig;r,
Expand Down
122 changes: 111 additions & 11 deletions source
View file
Expand Up @@ -429,6 +429,104 @@



<h3>A quick introduction to HTML</h3>

<p><em>This section is non-normative.</em></p>

<p>A basic HTML document looks like this:</p>

<pre>&lt;!DOCTYPE HTML>
&lt;html>
&lt;head>
&lt;title>Sample page&lt;/title>
&lt;/head>
&lt;body>
&lt;h1>Sample page&lt;/h1>
&lt;p>This is a &lt;a href="demo.html">simple&lt;/a> sample.&lt;/p>
&lt;/body>
&lt;/html></pre>

<p>HTML documents consist of a tree of elements and text. Each
element is denoted by a <span title="syntax-start-tag">start
tag</span>, such as "<code title="">&lt;body></code>", and an <span
title="syntax-end-tag">end tag</span>, such as "<code
title="">&lt;/body></code>". (Certain start tags and end tags can in
certain cases be <span title="syntax-tag-omission">omitted</span>
and are implied by other tags.)</p>

<p>Tags have to be nested correctly, so that elements do not
partially overlap each other:</p>

<pre class="bad">&lt;p>This is &lt;em>very &lt;strong>wrong&lt;/em>!&lt;/strong>&lt;/p></pre>
<pre>&lt;p>This &lt;em>is &lt;strong>correct&lt;/strong>.&lt;/em>&lt;/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>

<p>Elements can have attributes, which control how the elements
work. In the example above, there is a <span>hyperlink</span>,
formed using the <code>a</code> element and its <code
title="attr-hyperlink-href">href</code> attribute:</p>

<pre>&lt;a href="demo.html">simple&lt;/a></pre>

<p><span title="syntax-attributes">Attributes</span> are placed
inside the start tag, and consist of a <span
title="syntax-attribute-name">name</span> and a <span
title="syntax-attribute-value">value</span>, 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>

<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>

<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">href</code>" attributed changed in
several ways:</p>

<pre>var a = <span title="HTMLDocument">document</span>.<span title="dom-document-links">links</span>[0]; // obtain the first link in the document
a.<span title="dom-a-href">href</span> = 'sample.html'; // change the destination URL of the link
a.<span title="dom-uda-protocol">protocol</span> = '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,
or through a speech synthesizer, or on a braille display. To
influence exactly how such rendering takes place, authors can use a
styling language such as CSS.</p>

<p>In the following example, the page has been made yellow-on-blue
using CSS.</p>

<pre>&lt;!DOCTYPE HTML>
&lt;html>
&lt;head>
&lt;title>Sample styled page&lt;/title>
&lt;style>
body { background: navy; color: yellow; }
&lt;/style>
&lt;/head>
&lt;body>
&lt;h1>Sample styled page&lt;/h1>
&lt;p>This page is just a demo.&lt;/p>
&lt;/body>
&lt;/html></pre>

<p>For more details on how to use HTML, authors are encouraged to
consult tutorials and guides. Some of the examples included in this
specification might also be of use, but the novice authors is
cautioned that this specification, by necessity, defines the
language with a level of detail that may be difficult to understand
at first.</p>



<h2 id="infrastructure">Common infrastructure</h2>

<h3>Terminology</h3>
Expand Down Expand Up @@ -14515,12 +14613,13 @@ first matching case):&lt;/p&gt;
rules given for URL decomposition attributes, with the <span
title="concept-uda-input">input</span> being the result of <span
title="resolve a url">resolving</span> the element's <code
title="attr-a-href">href</code> attribute relative to the element,
if there is such an attribute and resolving it is successful, or the
empty string otherwise; and the <span
title="attr-hyperlink-href">href</code> attribute relative to the
element, if there is such an attribute and resolving it is
successful, or the empty string otherwise; and the <span
title="concept-uda-setter">common setter action</span> being the
same as setting the element's <code title="attr-a-href">href</code>
attribute to the new output value.</p>
same as setting the element's <code
title="attr-hyperlink-href">href</code> attribute to the new output
value.</p>

</div>

Expand Down Expand Up @@ -44430,7 +44529,7 @@ explain that only direct children of the <menu> matter

<p>An element that is <span>focusable</span>, has an <span>assigned
access key</span>, and is neither an <code>a</code> element with an
<code title="attr-a-href">href</code> attribute, a
<code title="attr-hyperlink-href">href</code> attribute, a
<code>button</code> element, an <code>input</code> element whose
attribute is in one of the <span
title="attr-input-type-submit">Submit Button</span>, <span
Expand Down Expand Up @@ -53529,7 +53628,7 @@ JSURL: http://ietfreport.isoc.org/all-ids/draft-hoehrmann-javascript-scheme-00.t
sniffed to determine the image type and decoded as an image.</p>

<p>A <code title="">javascript:</code> URL in an <code
title="attr-a-href">href</code> attribute of an <code>a</code>
title="attr-hyperlink-href">href</code> attribute of an <code>a</code>
element would only be evaluated when the link was <span
title="following hyperlinks">followed</span>.</p>

Expand Down Expand Up @@ -64831,11 +64930,11 @@ interface <dfn>SQLTransactionSync</dfn> {
<dl>

<dt>If the node is an <code>a</code> element with an <code
title="attr-a-href">href</code></dt>
title="attr-hyperlink-href">href</code></dt>

<dd>Add to <var title="">urls</var> the result of <span
title="resolve a url">resolving</span> the element's <code
title="attr-a-href">href</code> content attribute relative to
title="attr-hyperlink-href">href</code> content attribute relative to
the element.</dd>

<dt>If the node is an <code>img</code> element with an <code
Expand Down Expand Up @@ -66384,13 +66483,13 @@ interface <dfn>SQLTransactionSync</dfn> {
<dd><strong>Summary:</strong> Removes all links from the selection.</dd>
<dd class="impl"><strong>Action:</strong> The user agent must remove all
<code>a</code> elements that have <code
title="attr-a-href">href</code> attributes and that are partially
title="attr-hyperlink-href">href</code> attributes and that are partially
or completely included in the current selection.</dd>
<dd><strong>Enabled When:</strong> The document has a selection
that is entirely within an <span>editing host</span> and that
contains (either partially or completely) at least one
<code>a</code> element that has an <code
title="attr-a-href">href</code> attribute.</dd>
title="attr-hyperlink-href">href</code> attribute.</dd>
<dd><strong>Indeterminate When:</strong> Never.</dd>
<dd><strong>State:</strong> Always false.</dd>
<dd><strong>Value:</strong> Always the string "<code title="">false</code>".</dd>
Expand Down Expand Up @@ -84133,6 +84232,7 @@ time:empty { binding: <i title="">time</i>; }</pre>
Neil Soiffer,
Nicholas Shanks,
Nicolas Gallagher,
Noah Mendelsohn,
Ojan Vafai,
Olaf Hoffmann,
Olav Junker Kj&aelig;r,
Expand Down

0 comments on commit 4182d79

Please sign in to comment.