WHATWG Wiki - User contributions [en]

Authoring

2009-03-06T17:55:28Z

Rikkertkoppes: /* Authoring examples */

Please add tips here on using HTML-5-specific features, and making them compatible with older browsers.

== Getting Internet Explorer to recognize the new elements ==

Internet Explorer will not style elements it doesn't recognize. You can get around this with a script. For example:
<pre>
<script>
document.createElement("section")
</script>
</pre>

([http://blog.whatwg.org/supporting-new-elements-in-ie More details].)

== Authoring examples ==

[work in progress - Rikkert Koppes]

This section is intended to give examples of frequently used markup. For a start, the examples given in the specification should be present and elaborated, next, it can be amended with real workd examples. Goal is to concoct a non normative example document for authors accompanying the specification.

* Authoring scientific documents
* Authoring article based pages (news, blogs)

=== Authoring scientific documents ===

Since the origins of HTML lie in the markup of scientific documents [REF NEEDED], let us start with markup examples for such a document. This will allow us to discuss HTML examples in a layered way, starting relatively simple.

Consider the first page of the document "The Semantic Web Revisited" by Nigel Shadbolt, Wendy Hall and Tim Berners-Lee [http://geospatialsemanticweb.com/wp-content/uploads/2006/07/01637364.pdf], for clarity [http://www.rikkertkoppes.com/whatwg/examples/semantic_web_revisited_page_01.PNG pictured here]. We skip the orangish editor info at the top and start with the document header.

The document contains one article, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article] element is a suitable choice here, starting with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-header-element header] element.

Notice the nested [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-address-element address] element representing the document authors. The address element represents the contact information for the sectioning content it applies to, which is, in this case, the article element.

The following elements <em title="16:22, 6 March 2009 (UTC)">currently</em> fall in the sectioning content category:
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element section]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-nav-element nav]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element aside]

<pre>
<article>
<header>
<h1>The Semantic Web Revisited</h1>
<address>
<p>Nigel Shadbolt and Wendy Hall, University of Southampton</p>
<p>Tim Berners-Lee, Massachusetts Institute of Technology</p>
</address>
</header>

</article>
</pre>

Next, the article contains a series of sections, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element section] element. Note the capital "I" is not explicitely marked.

<pre>
<article>

<section>
<p>In the 50 years [...] instantaneously.</p>
<p>Fifty years ago [...] research.</p>
</section>

</article>
</pre>

<pre>
<article>

<section>
<h2>From documents to data and information</h2>
<p>The original [...] unrealized.</p>
<p>A Web of data [...] Web.</p>
<p>The article included [...] Web.</p>
</section>

</article>
</pre>

[about sectioning content and headers counting]

Figures are not only images, but also for example code listings [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-figure-element], in general, anything which can be moved away from the main flow of the document without affecting the document's meaning. One [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-legend-element legend] element in the figure (if present as first or last child) represents the figure caption.

<pre>
<figure>
<img src="ericmiller_rdf.png" alt="A graphic representation of
the RDF/XML document as given in the next figure.">
<legend>An RDF graph representing Eric Miller.</legend>
</figure>
...
<figure>
<pre><code class="language-rdf/xml">

</code></pre>
<legend>A chunk of RDF in RDF/XML describing Eric Miller and
corresponding to the graph in Figure A.</legend>
</figure>
</pre>

Note that the phrase "Figure A" is not part of the legend. This is typically handled through CSS [REF NEEDED].

In the documents, some quotes from the text are extracted as an eye-catcher. These quotes, marked with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-q-element q] element, are additionally marked with an [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element aside] element.

<pre>
<aside>
<q>URIs have global scope [...] of it.</q>
</aside>
</pre>

Authoring

2009-03-06T17:54:06Z

Rikkertkoppes: /* Authoring examples */

Please add tips here on using HTML-5-specific features, and making them compatible with older browsers.

== Getting Internet Explorer to recognize the new elements ==

Internet Explorer will not style elements it doesn't recognize. You can get around this with a script. For example:
<pre>
<script>
document.createElement("section")
</script>
</pre>

([http://blog.whatwg.org/supporting-new-elements-in-ie More details].)

== Authoring examples ==

[work in progress [[User:Rikkertkoppes|mophor]]]

This section is intended to give examples of frequently used markup. For a start, the examples given in the specification should be present and elaborated, next, it can be amended with real workd examples. Goal is to concoct a non normative example document for authors accompanying the specification.

* Authoring scientific documents
* Authoring article based pages (news, blogs)

=== Authoring scientific documents ===

Since the origins of HTML lie in the markup of scientific documents [REF NEEDED], let us start with markup examples for such a document. This will allow us to discuss HTML examples in a layered way, starting relatively simple.

Consider the first page of the document "The Semantic Web Revisited" by Nigel Shadbolt, Wendy Hall and Tim Berners-Lee [http://geospatialsemanticweb.com/wp-content/uploads/2006/07/01637364.pdf], for clarity [http://www.rikkertkoppes.com/whatwg/examples/semantic_web_revisited_page_01.PNG pictured here]. We skip the orangish editor info at the top and start with the document header.

The document contains one article, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article] element is a suitable choice here, starting with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-header-element header] element.

Notice the nested [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-address-element address] element representing the document authors. The address element represents the contact information for the sectioning content it applies to, which is, in this case, the article element.

The following elements <em title="16:22, 6 March 2009 (UTC)">currently</em> fall in the sectioning content category:
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element section]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-nav-element nav]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element aside]

<pre>
<article>
<header>
<h1>The Semantic Web Revisited</h1>
<address>
<p>Nigel Shadbolt and Wendy Hall, University of Southampton</p>
<p>Tim Berners-Lee, Massachusetts Institute of Technology</p>
</address>
</header>

</article>
</pre>

Next, the article contains a series of sections, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element section] element. Note the capital "I" is not explicitely marked.

<pre>
<article>

<section>
<p>In the 50 years [...] instantaneously.</p>
<p>Fifty years ago [...] research.</p>
</section>

</article>
</pre>

<pre>
<article>

<section>
<h2>From documents to data and information</h2>
<p>The original [...] unrealized.</p>
<p>A Web of data [...] Web.</p>
<p>The article included [...] Web.</p>
</section>

</article>
</pre>

[about sectioning content and headers counting]

Figures are not only images, but also for example code listings [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-figure-element], in general, anything which can be moved away from the main flow of the document without affecting the document's meaning. One [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-legend-element legend] element in the figure (if present as first or last child) represents the figure caption.

<pre>
<figure>
<img src="ericmiller_rdf.png" alt="A graphic representation of
the RDF/XML document as given in the next figure.">
<legend>An RDF graph representing Eric Miller.</legend>
</figure>
...
<figure>
<pre><code class="language-rdf/xml">

</code></pre>
<legend>A chunk of RDF in RDF/XML describing Eric Miller and
corresponding to the graph in Figure A.</legend>
</figure>
</pre>

Note that the phrase "Figure A" is not part of the legend. This is typically handled through CSS [REF NEEDED].

In the documents, some quotes from the text are extracted as an eye-catcher. These quotes, marked with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-q-element q] element, are additionally marked with an [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element aside] element.

<pre>
<aside>
<q>URIs have global scope [...] of it.</q>
</aside>
</pre>

Authoring

2009-03-06T16:30:00Z

Rikkertkoppes: /* Authoring scientific documents */

Please add tips here on using HTML-5-specific features, and making them compatible with older browsers.

== Getting Internet Explorer to recognize the new elements ==

Internet Explorer will not style elements it doesn't recognize. You can get around this with a script. For example:
<pre>
<script>
document.createElement("section")
</script>
</pre>

([http://blog.whatwg.org/supporting-new-elements-in-ie More details].)

== Authoring examples ==

This section is intended to give examples of frequently used markup. For a start, the examples given in the specification should be present and elaborated, next, it can be amended with real workd examples. Goal is to concoct a non normative example document for authors accompanying the specification.

* Authoring scientific documents
* Authoring article based pages (news, blogs)

=== Authoring scientific documents ===

Since the origins of HTML lie in the markup of scientific documents [REF NEEDED], let us start with markup examples for such a document. This will allow us to discuss HTML examples in a layered way, starting relatively simple.

Consider the first page of the document "The Semantic Web Revisited" by Nigel Shadbolt, Wendy Hall and Tim Berners-Lee [http://geospatialsemanticweb.com/wp-content/uploads/2006/07/01637364.pdf], for clarity [http://www.rikkertkoppes.com/whatwg/examples/semantic_web_revisited_page_01.PNG pictured here]. We skip the orangish editor info at the top and start with the document header.

The document contains one article, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article] element is a suitable choice here, starting with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-header-element header] element.

Notice the nested [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-address-element address] element representing the document authors. The address element represents the contact information for the sectioning content it applies to, which is, in this case, the article element.

The following elements <em title="16:22, 6 March 2009 (UTC)">currently</em> fall in the sectioning content category:
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element section]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-nav-element nav]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element aside]

<pre>
<article>
<header>
<h1>The Semantic Web Revisited</h1>
<address>
<p>Nigel Shadbolt and Wendy Hall, University of Southampton</p>
<p>Tim Berners-Lee, Massachusetts Institute of Technology</p>
</address>
</header>

</article>
</pre>

Next, the article contains a series of sections, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element section] element. Note the capital "I" is not explicitely marked.

<pre>
<article>

<section>
<p>In the 50 years [...] instantaneously.</p>
<p>Fifty years ago [...] research.</p>
</section>

</article>
</pre>

<pre>
<article>

<section>
<h2>From documents to data and information</h2>
<p>The original [...] unrealized.</p>
<p>A Web of data [...] Web.</p>
<p>The article included [...] Web.</p>
</section>

</article>
</pre>

[about sectioning content and headers counting]

Figures are not only images, but also for example code listings [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-figure-element], in general, anything which can be moved away from the main flow of the document without affecting the document's meaning. One [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-legend-element legend] element in the figure (if present as first or last child) represents the figure caption.

<pre>
<figure>
<img src="ericmiller_rdf.png" alt="A graphic representation of
the RDF/XML document as given in the next figure.">
<legend>An RDF graph representing Eric Miller.</legend>
</figure>
...
<figure>
<pre><code class="language-rdf/xml">

</code></pre>
<legend>A chunk of RDF in RDF/XML describing Eric Miller and
corresponding to the graph in Figure A.</legend>
</figure>
</pre>

Note that the phrase "Figure A" is not part of the legend. This is typically handled through CSS [REF NEEDED].

In the documents, some quotes from the text are extracted as an eye-catcher. These quotes, marked with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-q-element q] element, are additionally marked with an [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element aside] element.

<pre>
<aside>
<q>URIs have global scope [...] of it.</q>
</aside>
</pre>

Authoring

2009-03-06T16:22:46Z

Rikkertkoppes: /* Authoring examples */

Please add tips here on using HTML-5-specific features, and making them compatible with older browsers.

== Getting Internet Explorer to recognize the new elements ==

Internet Explorer will not style elements it doesn't recognize. You can get around this with a script. For example:
<pre>
<script>
document.createElement("section")
</script>
</pre>

([http://blog.whatwg.org/supporting-new-elements-in-ie More details].)

== Authoring examples ==

This section is intended to give examples of frequently used markup. For a start, the examples given in the specification should be present and elaborated, next, it can be amended with real workd examples. Goal is to concoct a non normative example document for authors accompanying the specification.

* Authoring scientific documents
* Authoring article based pages (news, blogs)

=== Authoring scientific documents ===

Since the origins of HTML lie in the markup of scientific documents [REF NEEDED], let us start with markup examples for such a document. This will allow us to discuss HTML examples in a layered way, starting relatively simple.

Consider the first page of the document "The Semantic Web Revisited" by Nigel Shadbolt, Wendy Hall and Tim Berners-Lee [http://geospatialsemanticweb.com/wp-content/uploads/2006/07/01637364.pdf], for clarity [http://www.rikkertkoppes.com/whatwg/examples/semantic_web_revisited_page_01.PNG pictured here]. We skip the orangish editor info at the top and start with the document header.

The document contains one article, hence the [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element article] element is a suitable choice here, starting with a [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-header-element header] element.

Notice the nested [http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-address-element address] element representing the document authors. The address element represents the contact information for the sectioning content it applies to, which is, in this case, the article element.

The following elements <em title="16:22, 6 March 2009 (UTC)">currently</em> fall in the sectioning content category:
* section
* nav
* article
* aside

<pre>
<article>
<header>
<h1>The Semantic Web Revisited</h1>
<address>
<p>Nigel Shadbolt and Wendy Hall, University of Southampton</p>
<p>Tim Berners-Lee, Massachusetts Institute of Technology</p>
</address>
</header>

</article>
</pre>

Next, the article contains a series of sections, hence the section element. Note the capital "I" is not explicitely marked.

<pre>
<article>

<section>
<p>In the 50 years [...] instantaneously.</p>
<p>Fifty years ago [...] research.</p>
</section>

</article>
</pre>

<pre>
<article>

<section>
<h2>From documents to data and information</h2>
<p>The original [...] unrealized.</p>
<p>A Web of data [...] Web.</p>
<p>The article included [...] Web.</p>
</section>

</article>
</pre>

[about sectioning content and headers counting]

Figures are not only images, but also for example code listings, in general, anything which can be moved away from the main flow of the document without affecting the document's meaning. One legend element in the figure (if present as first or last child) represents the figure caption.

<pre>
<figure>
<img src="ericmiller_rdf.png" alt="A graphic representation of the RDF/XML document as given in the next figure.">
<legend>An RDF graph representing Eric Miller.</legend>
</figure>
...
<figure>
<pre><code class="language-rdf/xml">

</code></pre>
<legend>A chunk of RDF in RDF/XML describing Eric Miller and corresponding to the graph in Figure A.</legend>
</figure>
</pre>

Note that the phrase "Figure A" is not part of the legend. This is typically handled through CSS [REF NEEDED].

In the documents, some quotes from the text are extracted as an eye-catcher. These quotes, marked with a q element, are additionally marked with an aside element.

<pre>
<aside>
<q>URIs have global scope. Associating a URI with a resource means that anyone can link to it, refer to it, or retrieve a representation of it.</q>
</aside>
</pre>

Authoring

2009-03-04T10:49:38Z

Rikkertkoppes: