Explain Codes LogoExplain Codes Logo

Html code for an apostrophe

html
html-entities
typographical-standards
utf-8-encoding
Alex KataevbyAlex Kataev·Oct 30, 2024
TLDR

Use the HTML entity ' or ' to encode an apostrophe in your HTML. This will ensure compatibility and correct display across different browsers.

Example:

<p>It&apos;s sunny.</p>

Renders as: It's sunny.

Alternative HTML entities for apostrophe

Straight vs. Curly

Different HTML entities represent straight and curly apostrophes. The numeric HTML entity for a straight apostrophe is &#39;. Use &apos; in HTML5 for a straight apostrophe. For a curly apostrophe, use the HTML entity &rsquo;.

Typographical preferences

The choice between a straight or curly apostrophe lies within typographical standards. The graphic design community, such as A List Apart, often promotes using the &rsquo; entity over &#39; for aesthetic reasons.

Consider doc type

The &apos; HTML entity is defined in XML and XHTML, but it wasn't defined in HTML4. Thus, some legacy browsers may not recognize it.

Roundtrip: apostrophes, quotes, and encoding

The single-quotes gang

HTML offers entities for left and right single-quotes - &lsquo; and &rsquo; respectively. These entities allow developers to express the natural flow of text visually.

Double-quotes duo

For double-quotes, use the HTML entities &ldquo; and &rdquo; to ensure left-right symmetry.

Helpful hen or UTF-8 encoding

With UTF-8 encoding, you can bypass entities and write the apostrophe directly. Just remind your HTML doc of its character set:

<meta charset="UTF-8"> <!-- Remember, HTML: It's UTF-8, not TP for your bunghole.😅 -->

Be alert for any compatibility issues and make sure you've correctly declared your charset. Otherwise, direct apostrophe usage may result in unpredictable displays.

When to, when not to: using apostrophe entities

Picking an apostrophe may not seem to be of great significance, but the choice can convey different meanings depending on the context. Here's a brief guidance:

For UI text

For user interface text, a straight apostrophe (&apos; or &#39;) works perfectly and is less distracting.

Peace of text, Serious quotes

For body text, using &rsquo; (curly apostrophe) adds a professional look conforming to standard typesetting.

Code addicts, check this out!

Using straight apostrophes in HTML attributes (alt, title etc) is widely practiced as they coexist peacefully with the quotation marks that wrap these attributes.

Lost in translation? Maybe this can help

When localizing content, make sure to conform with the local typographic standards. Different cultures may prefer different types of apostrophes.