HTML Best Practices: Should I use ’ or the special keyboard shortcut?

HtmlApostropheSmart Quotes

Html Problem Overview


I know that ’ will produce an apostrophe in an HTML document.

I also know that option shift right bracket on a Mac will simply produce a character.

Are there best practices for writing code, e.g., should I write

<b>The User&rsquo;s Forum</b>

or

<b>The User’s Forum</b>

(note that by using the keyboard shortcut I've been able to type instead of ' above)

It strikes me that the latter (using the keyboard shortcut) is more robust, as it's not likely to display the raw HTML if, for example, it's not escaped.

On the other hand, the special ’ character may not be readable in some browsers, perhaps(?).

Anyone have any best practices on this?

Html Solutions


Solution 1 - Html

I don't think that one is better than the other in general; it depends on how you intend to use it.

  • If you want to store it in a DB column that has a charset/collation that does not support the right single quote character, you may run into storing it as the multi-byte character instead of 7-bit ASCII (&rsquo;).
  • If you are displaying it on an html element that specifies a charset that does not support it, it may not display in either case.
  • If many developers are going to be editing/viewing this file with editors/keyboards that do not support properly typing or displaying the character, you may want to use the entity
  • If you need to convert the file between various character encodings or formats, you may want to use the entity
  • If your HTML code may escape entities improperly, you may want to use the character.

In general I would lean more towards using the character because as you point out it is easier to read and type.

Solution 2 - Html

Typographically, the correct glyph to use in sentence punctuation is the quote mark, both single (including for apostrophes) and double quotes. The straight-looking mark that we often see on the web is called a prime, which also comes in single and double varieties and has limited uses, mostly for measurements.

This article explains how to use them correctly.

Solution 3 - Html

With &rsquo; you know for certain that the output will be correct, no matter what.

I wish &apos; would output the proper apostrophe and not the typewriter apostrophe.

Solution 4 - Html

You should only use &rsquo; if your intention is to make either a closed single quotation mark or an apostrophe. Both of these punctuation marks are curved in shape in most fonts. If your intent is to make a foot mark, go the other route. A foot mark is always a straight vertical mark.

It’s a matter of typography. One way is correct; the other is not.

Solution 5 - Html

If your text will be consumed by non-browsers then it's safer to type the character with the keyboard-combo option shift right bracket because &rsquo; will not be transformed into an apostrophe by a regular XML or JSON parser. (e.g. if you are serving this content to native Android/iOS apps).

Solution 6 - Html

One risk of using the keyboard shortcut is that it requires using a non-ASCII encoding. That might be fine, but if your source is loaded by different editors in different locales, you might hit trouble somewhere along the line.

It might be safer to use either &#8217; or &rsquo; (which are equivalent) as both are ASCII.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2238214View Question on Stackoverflow
Solution 1 - HtmlExplosion PillsView Answer on Stackoverflow
Solution 2 - HtmljsringView Answer on Stackoverflow
Solution 3 - HtmlManuel Gutierrez RojasView Answer on Stackoverflow
Solution 4 - HtmlLori123View Answer on Stackoverflow
Solution 5 - HtmlGabeView Answer on Stackoverflow
Solution 6 - HtmlDrew NoakesView Answer on Stackoverflow