How to add the service mark symbol with HTML

HTML has a tag known as <sup> which stands for superscript text. This tag properly places text half a character above the baseline.

Example:
bite size technology, design and marketing ideasSM

In order to achieve the service mark symbol as you see above, you need to align your “SM” text to the top of its line-height and decrease the font size to 50% of its original size. The following code samples will produce the service mark symbol on your web pages.

CSS code:

sup { vertical-align: text-top; font-size: 50%; }

HTML code:

bite size technology, design and marketing ideas<sup>SM</sup>

Let me know in the comments section if this code helps you, or better yet, share it with others who might need it.

6 Comments

  1. Michael
    Posted December 21, 2010 at 1:35 pm | Permalink

    ℠ (& # 8 4 8 0 ; – no spaces)

  2. Posted July 14, 2011 at 6:21 am | Permalink

    Michael is right.

    Also, the and tags should be avoided. They aren’t formally deprecated, but they should be – they describe presentation, not semantics.

    CSS is for presentation. HTML is for semantics.

    If you need superscripted text, wrap it in a with a meaningful class name, and set “vertical-align: super;” in your CSS file.

  3. Posted July 14, 2011 at 6:21 am | Permalink

    …that should read “the and tags should be avoided”.

  4. Posted July 14, 2011 at 6:22 am | Permalink

    Oh, holy hell. “The [sup] and [sub] tags”.

  5. Posted July 14, 2011 at 6:23 am | Permalink

    …and “wrap it in a [span] with a meaningful class name”.

    Mario, perhaps you can edit the original comment, and discard these followups? :)

  6. Posted July 14, 2011 at 5:42 pm | Permalink

    @Travis – thank you for the clarifications :-)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.