Logical vs physical pixels

tl;dr: There are two kinds of pixels: device/physical/hardware pixels (i.e. the actual dots) and logical/css pixels, which are (on high resolution devices) whole multiples of hardware ones, because the hardware ones are too small to be useful. End of story.

But why is everybody acting like it’s complicated? It isn’t.

First of all, high-resolution devices have been around for a long time! As long ago as the previous century, you could have a computer with a 72 DPI screen and a 300 DPI printer, and if you printed something, one pixel on the screen came out as 4 dots on the paper. This was considered normal; you didn’t expect your drawings to come out of the printer four times smaller.

So, the concept of “logical” versus “device” pixels is not new! In modern-day terms, this printer had a dppx ratio of 4. And it didn’t confuse people. Why then, are phones with a dppx ratio of 4 confusing?

Advertisement

The truth about the slash

You’re aware of the different ways to write line breaks; <br>, <br/> and <br />. But the question often comes up, when do I use which one; which one is better?

And some answers delve deeply into the standards, linking to formal IETF definitions, W3C recommendations and all, while other answers mainly state it's a matter of opinion and it really doesn’t matter. But it does. So here’s the whole story, made as simple as possible, but not simpler.

In the beginning, there was SGML-based HTML, where the definition prescribed that some elements consisted of a start tag, content, and end tag, while others consisted only of a start tag, e.g., <br>; these were called empty elements, or later, void elements.

Then came XML, and XML didn’t do empty elements, so they invented the slash, or as they called it, the NESTC, that combined the start tag and the end tag into one. You had to write <br/> in XHTML instead of <br>, because XHTML is based on XML. In HTML you still had to write <br> though, <br/> was an error.
On the other hand, browsers could handle this kind of error just fine, so they didn’t mind.

Next, HTML5, which was not based on SGML, so they could change the rules however they wanted, and they declared the slash optional. Then you could write either <br> or <br/>, whatever you preferred.

These days, if you’re writing HTML, you don’t mind about the slash. If you’re writing XHTML, you do. However, it's only needed in XHTML if your document is real XHTML, that is, if it has a .xhtml extension, or if it's served up with the MIME type application/xhtml+xml. Otherwise it will just be HTML, no matter what its contents say, and slashes won’t matter.

OK, so you know all that, but still you may have the question, what is better? Sometimes you don’t have a choice, but when you do have the choice, what do you choose?
That’s where polyglot markup comes in.
If you want the possibility to have your markup delivered as XHTML, if you want XML parsers to be able to read it, to be used as a source for XSL transformation etc., you can make your source XHTML compatible by writing the slashes.
Make sure that all your source matches the XHTML syntax though: don’t forget to use lowercase element names, quote all attribute values, end all tags, give all boolean attributes their proper values, include the xmlns namespace, use id in addition to name where appropriate, put <tbody> start and end tags in every <table>, avoid & and < in scripts, never use document.write or <noscript>, forget about entity references other than the five XML ones, and so on. Also, no tricks like <p/> please.
If you don’t want to do all that, don’t bother with slashes either.

Finally, there’s the matter of the space.
Do you write <br/> or <br />?
The official documents all recommend using a space “for compatibility with some older browsers”, but they’ve been saying that for years and years, and those older browsers they were talking about (Netscape 4 and earlier) are now completely forgotten.
So… if you still do want to target Netscape 4, I’d suggest not using any XHTML features at all; no slashes, no newer elements, no CSS. In other words, stick to HTML 3.2. But if you only care about twenty-first century browsers (and you should!) it really, totally does not matter if you use a space or not.