[HTML5] undocumented 'listing' element in the rendering section: a variant of 'pre'+'code' for listing program source code ?

The default CSS stylsheets shown in the Rendering section of HTML5
contains references to the 'listing' element :

http://www.w3.org/TR/html5/rendering.html#case-insensitive-selector-exception

However this element is documented nowhere in the semantic and DOM
description of HTML5, and is also missing from the general index.

Apparently, given these CSS rules, it is more or less an alias of the
'pre' element, and offers no specificies.

What is the effective status of this 'listing' element ?

May be it was introduced as a shortcut of 'code' within 'pre', in
order to specify more precise semantics, possibly with some additional
attribute such as language="C" or type="text/c", instead of the
default "text/plain" implied by the 'pre' element.

----

Note that the current specification of 'pre' and "code' does not
specify any way to specify the language used in any listing using
'pre' and 'code', but just suggests to use a CSS class name starting
by "language-", which provides no semantic for source code
identification and extraction, but just presentational features.

Currently the HTML5 documentation suggests :

<pre><code class="language-cplusplus">
 /* The source code goes here... */
</code></pre>

In MediaWiki we can just write (the language attribute is mandatory):

<source language="cplusplus">
 /* The source code goes here... */
</source>

But this syntax is not compatible with HTML5's use of the 'source'
element (but anyway, MediaWiki restricts the direct references to
media files, so this is not a problem for it. So instead the 'listing'
element could do the same thing in HTML5:

<listing language="C++" name="hello.cpp" title="My sample Hello World program">
 /* The source code goes here... */
</listing>

or, if there are registered MIME types for the languages (most of them
don't have registered, as applications can be written in a lot of
languages, including specific ones invented by authors that assign
their name freely, and are just mapped as "plain/text"):

<listing type="text/cplusplus" name="hello.cpp" title="My sample Hello
World program">
 /* The source code goes here... */
</listing>

Here also the language or type attribute would be mandatory, but if
both are absent, the 'listing' element would behave visually and
semantically like the 'pre' element (with also the same default
'text/plain' MIME type. Such element would allow a browser to offer an
additional interface such as a caption bar displaying the title
attribute, and a "Save to..." icon (using the file name specified as
the default), directly from the rendered HTML page.

----

Another possible use of the 'listing' element would be to group a
'header' (or 'hgroup', 'h1', ... 'h6') element, and possibly several
sucessive 'pre' elements separated by comments (that are not part of
the listing itself, making the 'listing' element a structured section
similar to an 'article', but whose 'pre' elements can be automatically
appended together to create a single source file when saving it :

<listing type="text/cplusplus" name="hello.cpp">
  <header>My sample Hello World program</header>
  This is an initial comment.
  <pre>
 /* The source code starts here... */
  </pre>
  This visible comment is not part of the listing to save.
  <pre>
 /* The source code continues... */
  </pre>
  This is a final comment.
</listing>

By default the 'pre' elements would not be indented, but the other
elements would be indented within the rendered block of the 'listing'
element. This would be done like thi in CSS :

listing { margin:0.3em 0; border:1px dashed blue; background:white;
color:black; padding:0.3em; }
listing+pre { margin:0; }
listing+* [ margin:0.3em 0 0.3em 2m; }

However, given the current state of the HTML5 specification, I doubt
that such extension would be used, notably when we see the current CSS
displayed where 'listing' is just rendered completely like 'pre'.

-- Philippe.

Received on Monday, 12 July 2010 10:41:21 UTC