HTML *is* code

While watching Scoble’s new firehose gush, I saw an interesting fish come flopping out: a post on formatting code in blogs.

With a little poking around, I discovered that jaybaz_ms is a C# developer working on Visual Studio for Microsoft, apparently a nice guy with an interest in clear code. He also apparently doesn’t believe that HTML is code.

His solution to formatting code in blog posts is to write the code in Visual Studio, paste it into Word, where it gets a border drawn around it, then the result is apparently pasted into his weblog app. The result is HTML, the code that produces his webpage, which includes things like <p class="MsoNormal" style="margin: 0in 0in 0pt;"><span style="font-family: Tahoma;"><o:p>&nbsp;</o:p></span></p>
<div style="border: 1pt solid windowtext; padding: 1pt;">
<p class="MsoNormal" style="border: medium none ; margin: 0in 0in 0pt; padding: 0in;"><span style="font-size: 10pt; font-family: 'Courier New';"><span style="">&nbsp;&nbsp;&nbsp; </span><span style="color: blue;">void</span>
which gets us as far as the first word. I’m pretty sure there is a rule for having only three of four values for something like margin, though I can’t remember how it works, or why you would want to do that, with two different units, when all the values are zero. If the namespace prefix o is defined somewhere, I didn’t spot it, but I love (in the way that means “hate”) a (undeclared) namespaced (supposed) paragraph which contains only a single non-breaking space. I haven’t got a clue what “windowtext” is supposed to mean in the context of a border declaration, though. Is that a proprietary shortcut to set it to the color of some text somewhere in some window?

Of course, I do understand the difference between programming code that you expect others to have to read and work with, and HTML that you don’t expect anyone to look at, but none the less I say “bless your poor souls” to all browser developers everywhere, and “for shame!” to both the developers of Word, and to Jay and anyone else who understands the value of clean and clear code, but still emits HTML like that.

(My method for posting code? <pre><code>…</code></pre>. Works for me.)

16 Comments

Comment by nick #
2004-04-05 21:21:23

ack. motherf-ing ack. by posting that code, i think you made me miss whatever the point of the post was besides ”goddam that’s some ugly code.”

Comment by Phil Ringnalda #
2004-04-05 21:34:36

Nope, I don’t think you missed the point at all ;)

 
 
Comment by Roger Benningfield #
2004-04-05 21:52:56

Phil: ”windowtext” is a valid CSS2 reference to the system default color of text, er, in a window. It has cousins like ”MenuText”, ”ButtonText”, and so on.

http://www.w3.org/TR/CSS2/ui.html

Comment by Phil Ringnalda #
2004-04-05 22:11:02

Well, I’ll be darned. Google failed me: there’s only one vaguely useful result on the first page of ”css windowtext” which makes it look like it’s only supported in IE 4+, and I flat-out missed seeing where it said that it’s in CSS2.

Rather odd that I’ve never seen it mentioned in any of the CSS tutorials I’ve only partly paid attention to.

 
 
Comment by Roger Benningfield #
2004-04-05 22:03:22

Oh, and by the by… now that Newzcrawler supports wfw:comments, it’s kinda hard to read some of your replies. Without a line break between the content and the PGP sig, my eyes inevitably get confused about where the paragraph ends.

Not that you need to do anything about it, of course… it’s a minor thing at worst. I just thought I’d mention it as a point of interest.

Comment by Phil Ringnalda #
2004-04-05 22:12:31

Oh, crap. Sorry about that. I completely forgot that the per-post feeds even exist. I’ll fix them up in a second.

Comment by Phil Ringnalda #
2004-04-05 22:26:22

Or possibly more like 15 minutes. Too many static pages.

 
 
 
Comment by Matt #
2004-04-06 00:57:45

I’m a little looser and usually just use <p><code>.

Comment by Phil Ringnalda #
2004-04-06 07:16:57

True, I don’t have any real excuse for the <pre> except when I posting Python.

Comment by Phil Ringnalda #
2004-04-06 08:13:37

He said, showing great care and precision. ”… except when I’m posting Python” which I will clearly have stolen from someone smarter.

Comment by Jacques Distler #
2004-04-06 08:26:26

diff files (which I tend to post a lot :-) are another candidate for <pre>.

 
 
Comment by Matt #
2004-04-06 09:11:00

You might dig this hack which gives syntax highlighting and such to different types of code embedded in posts.

 
 
 
Comment by Sam Newman #
2004-04-06 01:27:15

I always saw HTML as markup rather than code, but your point is well taken. What it comes down to is if I have to read it it should be pretty. This guy doesn’t read his code, nor does he create it by hand, so I think the whole ”His HTML should be pretty” is pointless. What is not pointless however is the argument for the use of web standards, which typically does lead to nicer looking, more compact, easier to maintain, more flexible code. The use of web standards does not guarantee nice looking code though - I can easily write nasty, bloated (X)HTML/CSS compliant code (although it may well be contrary to the sprit of the standards).

Comment by Phil Ringnalda #
2004-04-06 08:28:10

Well, I’d say my HTML is markup, my HTML + CSS is approaching code, and his HTML is code.

It really doesn’t matter that much whether you use C# to tell a compiler to produce something that puts pixels on a screen, or use HTML and CSS to tell a browser to produce something that puts pixels on a screen. Either way, you’re going to be tempted to just do whatever it takes to get the pixels you want on your screen, and you shouldn’t.

 
 
Comment by huphtur #
 
Trackback by jaybaz_MS's WebLog #
2004-04-13 03:56:59

re: Formatting code in blogs

 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <del datetime="" cite=""> <dd> <dl> <dt> <em> <i> <ins datetime="" cite=""> <kbd> <li> <ol> <p> <pre> <q cite=""> <samp> <strong> <sub> <sup> <ul> in your comment.