Please add tips here on using HTML-5-specific features, and making them compatible with older browsers.
Externel tutorial sites
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>
[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 , for clarity pictured here. We skip the orangish editor info at the top and start with the document header.
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:
<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 , 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].
<aside> <q>URIs have global scope [...] of it.</q> </aside>