Hacker News Reader

Comment by holler | Hacker News Reader

Wow, over a decade doing frontend and TIL: <samp>, used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sa...

View on HN

The treatment of <samp> in mvp.css is incorrect. It’s treating <code> as inline monospace, <samp> as block monospace, and completely ignoring <pre>, which is actually block monospace (with no defined semantics). Rather, <code> and <samp> should both be inline, and placed inside <pre> for block usage. This matters because it’ll mess things up if the stylesheet doesn’t load, as your blocks of code won’t be formatted properly.

(I’ve filed https://github.com/andybrewer/mvp/issues/1 about this now.)

https://chrismorgan.info/blog/rust-fizzbuzz/ demonstrates use of <pre><code>, <pre><samp> and <code>, though not just <samp> or <pre>. (I use bare <pre> elsewhere on my site, but haven’t had cause to use bare <samp> yet.) What can I say? I’m a snob. Also there are subtle differences in style between the two. (I have <samp> be truly monospaced, because terminal output is more typically visually aligned, but <code> be only mostly monospaced, because it’s seldom visually aligned and I find Triplicate’s Poly variant generally nicer for code reading.)

Also potentially of interest to you: <output>. Plenty of other interesting semantic tags to use or not, as well. I like to use <var> carefully.

Thanks for working to correct that.

Do you have a go-to reference for tags and their meaning?

This blog post is actually a great intro to rust too :)

I find that MDN often has good descriptions.

One example is this "hidden" gem. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...

> I’ve filed https://github.com/andybrewer/mvp/issues/1 about this now.

Thank you! I'll take a look today.

And pull requests are always welcome.

I'm guessing because they were inconsistently supported by browsers, because me too!

I was even more surprised to see it in the HTML 4.01 spec, but if you look it makes more sense. I'll quote every mention of it here but the table of contents line:

    9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
    
    <!ENTITY % phrase "EM | STRONG | DFN | CODE |
                       SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
    
    SAMP:
        Designates sample output from programs, scripts, etc.

CODE is equally well defined -- neither even mention monospace!

> The other phrase elements have particular significance in technical documents

HTML never ceases to amaze me. This also explains why I still prefer <pre> even though I can never remember why it's <pre> and not <code>.

Almost forgot the link: https://www.w3.org/TR/html401/struct/text.html#h-9.2.1

<pre> is for preformatted text such that whitespace characters in it including tabs are preserved, whereas it's collapsed/whitespace-normalized at other places. <code> is for semantically denoting a span or block as "programming language code", which might or might not have whitespace characters preserved. You typically use <code><pre>...</pre></code> for a code block, and just <code>...</code> for an inline code span.

Edit: props for citing the actual HTML 4.01 SGML DTD!

Thank you for laying that out clearly!

I pointed out the irony of not giving an example|intended use in a technical document because if a line or two like that was in the HTML 4.01 specification I probably would have written more-correct HTML since sometime in the early-mid ~2000s. I guess I'm glad my reading comprehension has improved but it also shows pretty clearly why it's the old spec.

But how relevant is html 4.01 to HTML5 (which is presumably what ppl are authoring these days)? If I'm not mistaken, even Google amp is considered valid HTML5?

HTML 4.01 is relevant to HTML5 in that it was the direct precursor to HTML5.

Put another way, when I learned a lot of the HTML we all use every day there was no HTML5.

By agreeing with the original reply and looking into why, I saw that it was defined in a specification I have read several times (HTML 4.01[0]). I knew CODE being vague was a thing and was part of why I didn't use it much, so seeing SAMP was similar explained why it would have slipped my mind or I totally glossed over it.

Another reply pointed out that <pre> is the block-level styling element I want and that <code> or <samp> make more semantic sense inline and nested. This does make sense to me and I thought it was funny that in a technical document like an HTML specification they would note the importance of the elements in technical documents but not give any example or further explanation.

Yet another reply corrected me again, that SAMP is defined with a monospace font-family in the CSS2 specification[1]! Now I can complete why I used to be wrong and now am not: <pre> always worked by default to get a monospace font and preserve literal whitespace in rendering. <samp> may have, I'd be interested to know but not interested enough to do research into old browsers' specific rendering. The entire <samp> thing was effectively unknown to me. <code>, while similarly defined in HTML, did not have that default font set and thus would not work in a spec-compliant browser by default unless they extended the specification in that browser. That is why in my head I used to prefer <pre> over <code> and that was all; and also why I enjoy posting in communities like these!

> If I'm not mistaken, even Google amp is considered valid HTML5?

So far as I know (I haven't kept up with this level of detail in AMP) it is entirely implemented via some subset of HTML/JS/CSS: presumably any Google AMP would then include valid HTML5.

[0]: linked in my original post

[1]: https://drafts.csswg.org/css2/sample.html

The definitions for the default styling are in CSS, not in HTML: https://drafts.csswg.org/css2/sample.html

Thank you for pointing that out! <samp> does indeed have a default font-family of monospace there.

And <code> isn't defined at all! I'm not disputing this is all internally consistent or that I used to write what I'm now learning is incorrect HTML, this completely explains what I used to know about the tags and I love it:

I didn't know or forgot <samp> was a thing for whatever reason. I know HTML5 is big and I don't know it all, HTML4 is much less so and I usually do.

I always prefer <pre> when I'm writing HTML to show intentionally-monospace blocks like code or code output because <code> is inconsistent, importantly for me it meant sometimes it didn't|doesn't work. Here I now know why: The CSS2 stylesheet doesn't define anything for <code>!

Other replies have described how it makes more literal/semantic sense to nest these things together and I agree completely; many times I am surprised at how elegant these old specifications are, if indirectly.

from that link:

    pre, tt, code,
    kbd, samp       { font-family: monospace }

?

I agree, looks like I misread it -- then some of this is still a mystery that's probably left to how things like Netscape and Internet Explorer used to work. Too bad!

Reply on news.ycombinator.com