[whatwg] <code> attributes

Smylers Smylers at stripey.com
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> &lt;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 &lt; 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 <em><p>pow <p>boom!</em> is
incorrect for two emphasized paragraphs.  Phrasing elements like <em>
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 <p> 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


More information about the whatwg mailing list