Bullet (•) in HTML
The bullet is the round list marker character. Its named reference is • and its code point is U+2022, and in most markup you want a real list element rather than the character itself.
At a glance
- Character
- •
- Named entity
- •
- Decimal reference
- •
- Hex reference
- •
- Unicode code point
- U+2022
- Unicode name
- BULLET
- In the entity reference
- Punctuation, and pinned in quick access
In detail
The bullet drawn beside an unordered list item is not this character. Browsers generate the marker from the list-style property, and it is not part of the text content, which is why you cannot select it and why changing it is a style change rather than an edit. Typing the character at the start of each line produces something that looks the same and is a paragraph, not a list.
That difference matters to anyone not reading with their eyes. A real list is announced with its length, so a listener knows there are four items before hearing the first. A stack of paragraphs each starting with a bullet character is announced as prose containing an unfamiliar symbol, repeatedly.
Where the character earns its place is as a separator in a single line of metadata: an author name, a date and a reading time strung together. Even there it is decoration, so mark it aria-hidden and give it horizontal padding rather than surrounding it with literal spaces, because spaces around it will collapse or wrap in ways padding will not.
It has a smaller relative worth knowing about. The middle dot sits lower and smaller and is the more conventional inline separator in several European typographic traditions, while the bullet reads as a list marker wherever it appears. Picking the wrong one is not an error, but the bullet in running text always looks slightly like a list that lost its line breaks.
Examples
<!-- do this -->
<ul>
<li>Resize</li>
<li>Compress</li>
</ul>
<!-- not this -->
<p>• Resize<br>• Compress</p><p>
<span>Johin</span>
<span aria-hidden="true" class="sep">•</span>
<span>4 min read</span>
</p>
.sep { padding: 0 0.5em; color: #888; }Things that catch people out
- Pasting a bulleted list out of a word processor gives you the literal character plus a tab on every line. It looks like a list and exports as one long paragraph.
- The character sits on the baseline differently in every typeface. Vertically centring it against text needs a small transform or a line-height tweak, not a guessed margin.
- Using it as a loading or status indicator without an accessible label leaves listeners with nothing at all, since a decorative character with no text has no announcement.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Middle dot (·) in HTML
The interpunct at U+00B7, its entity forms, its use as a byline separator, its role in Catalan spelling, and how it differs from the bullet and dot operator.
Ellipsis (…) in HTML
The horizontal ellipsis at U+2026 versus three typed periods. Entity forms, line breaking behaviour, search implications and the CSS text-overflow case.
Box drawing characters in HTML
The box drawing block at U+2500 to U+257F, the light, heavy and double stroke sets, and the CSS and font rules that stop a text diagram falling apart.
Curly quotes: ‘ ’ “ and ”
The opening and closing single and double curly quotes, their entities and code points, when they help prose and when they break code and search.
Guillemets (« and ») in HTML
The double angle quotation marks at U+00AB and U+00BB, how their direction changes by language, the French spacing rule, and why they are poor UI chevrons.
Section sign (§) in HTML
The section sign at U+00A7 with its entity forms, how the doubled form marks a range of sections, and why it should never be separated from its number.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues