How to Display Trademark Symbols in HTML

Incorporating trademark symbols into your HTML code is essential for accurately representing protected brand names, logos, and slogans.

This blog will explore various methods to display the trademark (™), registered trademark (®), and service mark (℠) symbols in HTML, ensuring your content adheres to legal standards and enhances brand integrity.

Understanding HTML Entities

HTML entities are codes used to represent characters that have special meanings in HTML or are not readily available on standard keyboards. Utilizing these entities ensures that symbols are displayed correctly across different browsers and platforms.

Trademark Symbols and Their HTML Codes

Here are the primary symbols related to trademarks and their corresponding HTML codes:

• Trademark Symbol (™): Indicates an unregistered trademark.

◦ HTML Entity: ™

◦ Decimal Code: ™

◦ Hexadecimal Code: ™

• Registered Trademark Symbol (®): Signifies a trademark registered with the appropriate trademark office.

◦ HTML Entity: ®

◦ Decimal Code: ®

◦ Hexadecimal Code: ®

• Service Mark Symbol (℠): Denotes a service mark, used for services rather than goods.

◦ HTML Entity: &servicemark; (Note: Not all browsers support this entity)

◦ Decimal Code: ℠

◦ Hexadecimal Code: ℠

Implementing Trademark Symbols in HTML

To display these symbols in your HTML content, you can use the respective HTML entities or numeric codes. For example:

1<p>Our brand name&trade; is well-known.</p>
2<p>Our brand name&#8482; is well-known.</p>
3<p>Our brand name&#x2122; is well-known.</p>

​

All three lines above will render as:

Our brand name™ is well-known.

Similarly, for the registered trademark symbol:

1<p>Our registered brand&reg; is protected.</p>
2<p>Our registered brand&#174; is protected.</p>
3<p>Our registered brand&#x00AE; is protected.</p>

​

These will display as:

Our registered brand® is protected.

Using CSS for Trademark Symbols

While HTML entities are straightforward, CSS can also be employed to insert trademark symbols, especially when styling is required. For instance:

1<span class="trademark">Brand Name</span>

​

1.trademark::after {
2  content: "\\2122"; /* Unicode for ™ */
3  font-size: 0.8em;
4  vertical-align: super;
5}

​

This CSS will append a superscripted trademark symbol to the "Brand Name" text.

Typing Trademark Symbols Directly

Depending on your operating system, you can directly input trademark symbols:

• Windows: Hold the Alt key and type 0153 on the numeric keypad for ™, and 0174 for ®.

• Mac: Press Option + 2 for ™, and Option + R for ®.

Ensure that the font used supports these symbols to display them correctly.

Legal Considerations

Proper use of trademark symbols is crucial for legal protection. The ™ symbol indicates an unregistered trademark, while the ® symbol is used exclusively for registered trademarks. Misuse of these symbols can lead to legal complications. Always consult with a legal professional or the appropriate trademark office to ensure compliance.

The Bottom Line!

Accurately displaying trademark symbols in your HTML content is vital for brand representation and legal protection. By utilizing HTML entities, numeric codes, or CSS, you can ensure that these symbols are rendered correctly across various platforms and browsers.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.