HTML Entity for Masculine Ordinal Indicator (º)

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 1 Code Example
Unicode U+00BA
HTML entity for Masculine ordinal indicator (U+00BA) — hex, decimal, º, and CSS tutorial

What You'll Learn

How to display the Masculine ordinal indicator (º) in HTML using named, hexadecimal, decimal, and CSS entity methods. This character is U+00BA (MASCULINE ORDINAL INDICATOR) in the Latin-1 Supplement block (U+0080–U+00FF)—used in Spanish, Portuguese, Italian, and Galician to form masculine ordinals (e.g. 1º primero, 2º segundo).

Render it with º, º, º, or CSS escape \00BA. Pair it with a number for correct ordinals: 1º → 1º. For feminine ordinals use ª (ª, U+00AA). Do not confuse º with the degree sign (°, U+00B0).

⚡ Quick Reference — Masculine Ordinal Indicator

Unicode U+00BA

Latin-1 Supplement block

Hex Code º

Hexadecimal reference

HTML Code º

Decimal reference

Named Entity º

Most readable option

Reference Table
Name           Value
────────────   ──────────
Unicode        U+00BA
Hex code       º
HTML code      º
Named entity   º
CSS code       \00BA
Meaning        Masculine ordinal suffix (1º, 2º)
Related        U+00AA = Feminine ordinal (ª); U+00B0 = Degree sign (°)
1

Complete HTML Example

This example demonstrates the Masculine ordinal indicator (º) using hexadecimal code, decimal HTML code, the named entity º, and a CSS content escape:

html
<!DOCTYPE html>
<html>
<head>
 <style>
  #point:after{
   content: "\00BA";
  }
 </style>
</head>
<body>
<p>Masculine Ordinal using Hexadecimal: &#x00BA;</p>
<p>Masculine Ordinal using HTML Code: &#186;</p>
<p>Masculine Ordinal using HTML Entity: &ordm;</p>
<p id="point">Masculine Ordinal using CSS Entity: </p>
</body>
</html>
Try it Yourself

🌐 Browser Support

The Masculine ordinal indicator entity is universally supported in all modern browsers:

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 4+
Android 4.4+
iOS Safari 1+

👀 Live Preview

See the Masculine ordinal indicator (º) in Spanish and Portuguese ordinal contexts:

Ordinals 1º 2º 3º 21º
Large glyph º
vs feminine 1º (masc.)   1ª (fem.)
Not degree º ordinal   vs   ° degree
Numeric refs &#x00BA; &#186; &ordm;

🧠 How It Works

1

Hexadecimal Code

&#x00BA; uses the Unicode hexadecimal value 00BA to display the Masculine ordinal indicator. The x prefix indicates hexadecimal format.

HTML markup
2

Decimal HTML Code

&#186; uses the decimal Unicode value 186 to display the same character.

HTML markup
3

Named Entity

&ordm; is the semantic named entity — the easiest to read in source HTML and the most self-descriptive option.

HTML markup
4

CSS Entity

\00BA is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.

CSS stylesheet
=

Same visual result

All four methods produce the Masculine ordinal indicator: º. Unicode U+00BA sits in the Latin-1 Supplement block (U+0080–U+00FF).

✅

Use Cases

The Masculine ordinal indicator (º) commonly appears in:

🌐 Spanish content

Ordinals like 1º, 2º, 3º in articles, legal text, and rankings.

🇧🇪 Portuguese

Masculine ordinals in Brazilian and European Portuguese web content.

📅 Dates & editions

1º de enero, 2º edición, and similar formatted dates.

⚖ Legal documents

Numbered articles, clauses, and official references in Romance languages.

🎓 Education

Language learning sites teaching Spanish and Portuguese ordinals.

📝 Multilingual sites

i18n content with proper ordinal typography per locale.

💡 Best Practices

Do

  • Use &ordm; for readable source markup
  • Place the indicator immediately after the number (1º)
  • Use º for masculine and ª (&ordf;) for feminine ordinals
  • Serve pages with UTF-8 (<meta charset="utf-8">)
  • Pick one entity style (hex / decimal / named) per project

Don’t

  • Confuse º (ordinal) with ° (degree sign)
  • Use º when the feminine ordinal ª is required
  • Insert a space between the number and ordinal (write 1º, not 1 º in Spanish typography)
  • Put CSS escape \00BA in HTML text nodes
  • Use padded Unicode notation like U+000BA—the correct value is U+00BA

Key Takeaways

1

Three HTML references all render º

&#x00BA; &#186; &ordm;
2

For CSS stylesheets, use the escape in the content property

\00BA
3

Unicode U+00BA — MASCULINE ORDINAL INDICATOR (not degree °)

4

Prefer &ordm; for readability—it’s the most self-descriptive named entity

5

Pair with numbers for ordinals: 1&ordm; → 1º

❓ Frequently Asked Questions

Use &ordm; (named), &#x00BA; (hex), &#186; (decimal), or \00BA in CSS content. Example: 1&ordm; renders 1º.
U+00BA (MASCULINE ORDINAL INDICATOR). Latin-1 Supplement block (U+0080–U+00FF). Hex 00BA, decimal 186. Named entity: &ordm;.
In Spanish, Portuguese, Italian, and Galician content for masculine ordinals (1º, 2º), dates, rankings, legal references, and multilingual typography requiring proper ordinal suffixes.
HTML entities (&ordm;, &#186;, or &#x00BA;) go directly in markup. The CSS escape \00BA is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.
No. º is U+00BA (masculine ordinal indicator). ° is U+00B0 (degree sign). For feminine ordinals use ª (U+00AA) with &ordf;.

Explore More HTML Entities!

Discover 1500+ HTML character references — ordinals, symbols, math operators, and more.

All HTML Entities →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Marriage Symbol (⚭) Measured Angle (∡)