Html entity for the middle dot

html

responsive-design

best-practices

semantic-accuracy

byNikita Barsukov·Nov 8, 2024

Expedite the aesthetic spacing of your site with a middle dot by employing · or ·.

<!-- Two peas in a pod or two items on a list? -->
<p>Item 1 &#183; Item 2</p>
<p>Item A &middot; Item B</p>

Dots and lots - Choosing your character

The right dot for the right spot

No comma drama or hyphen tension - you have 7 variations of the middle dot for your spacing needs. Check these out and see which one fits your style without compromising semantic accuracy:

Standard dot: The most used, · or · or ·
Bullet: To add some weight • or •
Unicode: When character meets code U+00B7 or U+2022
CSS: Embedding style with characters \00B7
UTF-8: Deep dive into binary rendering, varies based on entity

While all these variations are for a middle dot, semantics matter, always align your design with the intended content message.

Just a dot? No, a semantic spot!

Choosing the right HTML entity is crucial for semantic correctness. The bullet • looks like a big dot, but it's most frequently used for unordered list items, not inline separators.

Rule of thumb for inline text separators: Go for ·.

Different dots for different spots

The same dot might not fit in every font spot! Let's understand why rendering varies with applications and fonts.

Font dependent visuals

The appearance of your middle dot could look different across typefaces, it may appear as a smaller dot or larger, or with an unexpected vertical alignment. Always check the middle dot in your intended font family.

Application check before launch

Applications don't always agree on how to render the middle dot. It's a great practice to verify your dot on different browsers and devices to ensure a consistent look and feel.

Usage in context

Know where it fits, the correct use of middle dot in a sentence:

Navigation: Home · Photos · About // The dot, not us, connects you.
Decomposed Menu Item: Main Course · Desserts · Drinks // Food, separated by a dot :)
Visual Impact: Data Points: 75 · 85 · 92 // Divide and conquer.

Smart code - Usage and pitfalls

Using HTML entities smartly can be the key between a well-spaced readable site and a jumbled mess. Get familiar with some LEGO-like block usage of entities.

Future proof code

Keeping your HTML valid is essential, ensures entities are interpreted correctly.
Not all browser versions agree with your entities, don't forget to test across different browsers.
Mind the screen reader users, entities might not be read out as expected, add aria-labels when needed.

Avoid FacePalm moments

One size fits all? No, different environments might render your middle dot differently. A/B testing is a must.
Middle dot not a full stop! Larger bullet dot (•) might confuse if used improperly instead of middle dot (·).
Binary mishap, be sure your webpage's character set supports UTF-8, or you might end up with rarely used symbols instead of your entities.