Authoring

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

Externel tutorial sites

• HTML5 Knowledge Base

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:

<script>
document.createElement("section")
</script>

(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 world examples. The 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 [1], for clarity pictured here. We skip the orangish editor info at the top and start with the document header.

The document contains one article, hence the article element is a suitable choice here, starting with a header element.

Notice the nested 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 currently fall in the sectioning content category:

• section
• nav
• article
• aside

<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>
  <!-- rest of the document -->
</article>

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

<article>
  <!-- header -->
  <section>
    <p>In the 50 years [...] instantaneously.</p>
    <p>Fifty years ago [...] research.</p>
  </section>
  <!-- rest of the document -->
</article>

<article>
  <!-- first part of the document -->
  <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>
  <!-- rest of the document -->
</article>

[about sectioning content and headers counting]

Figures are not only images, but also for example code listings [2], 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.

<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">
      <!-- the actual rdf snippet representinf Eric Miller -->
  </code></pre>
  <legend>A chunk of RDF in RDF/XML describing Eric Miller and 
    corresponding to the graph in Figure A.</legend>
</figure>

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.

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