[whatwg] <code> attributes

Thu Apr 30 03:19:15 PDT 2009

ddailey writes:

> I found myself rather taxed by the limitations of <code>
> 
> (disclaimer: I may well have been working on incorrect assumptions) 1.
> Having to type <pre> <code> <tagname> </code> </pre> seemed a
> little bit silly to me: is there a use case for *not* wanting <pre>
> when doing <code> ?

Yes: designating something as code in running text, such as:

  <p>Type <code>ls</code> for a listing of the current directory.</p>

Using <pre> around <code> would split the above into three separate
lines.

> 2. having to escape "<" as < in the middle of <code> seems like
> work for the author that could just as easily be handled by the
> browser.

It could. But doing so would prevent being able to use other elements
inside <code>, such as:

  <p>Type <code>ls <var>dir</var></code> to see what's in the directory
  <var>dir</var>.</p>

There are plenty of other elements that can sensibly be used inside
<code>, including:

* <em> to emphasize a particular part that's explained in the
  surrounding text
* <mark> to indicate a part that's relevant to the user
* <a href="..."> to link a term to its documentation
* <span> to add classes to different parts, as hooks for CSS syntax
  highlighting

> 3. trying to style a <code> so that it would have an indented margin,
> a border, a default font-style (monospaced), preserve within-line
> indentation, and work consistently across browsers seemed to defy my
> humble abilities with CSS. (see
> http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html#test_file
> as an example of the very clumsy solution I ultimately opted for

<pre> should already have a monospaced typeface and preserve
white-space. I'd expect you could either apply the indent and border to
the <pre> or (if you have other <pre>-s in your document which aren't
<pre><code>, so need to specifically only style the latter) or turn
<code>-s inside <pre>-s into blocks and set the indent and border on
them:

  pre code
  {
    display: block;
    // set margins and border here
  }

Are either of those what you tried?  If so, please would you share the
details of in which way they failed, and with which browsers.  Thanks.

> 5. Some ... good folks ... let me know that <code> <p> happy</p> <p>
> sad</p> </code> was bad form, and that I should use <pre> <code>
> instead. It never would have dawned on me that the first was bad form,

It's incorrect in the same way that pow boom! is
incorrect for two emphasized paragraphs. Phrasing elements like 
and <code> can only contain phrasing content; they can't contain any
flow elements.

> nor that the second would be good form.

The HTML 5 spec has example of doing exactly that at the definitions of
each of the <code> and <pre> elements. <pre> is defined as being for
"block[s] of preformatted text", which seems to precisely describe what
you have in this instance.

> Second the introduction of <p> within <code> was actually generated by
> a robot that converted a bunch of MS Word to <html> so someone other
> than me must have thought it was a good idea to do it that way.

Or simply that the robot was separately converting pairs of line-breaks
into tags and use of a monospaced typeface into <code> spans, and
the two happened to co-incide -- possibly the robot's author never even
considered it.

Smylers