<H2> followed by <Sup>

Question

Well, I have a H2 tag with a company name and next to that in the same line we need to have a Superscript tag (TM), I have:

<h1 class="Red">Company Name</h1><sup>&#8482;</sup>

I get:

Company Name

™

I guess there is a way to avoid this newline between those tags using CSS or something but I am not able to figure it out, I will appreciate any help.

Answer 1

The proper format is to wrap the entire phrase inside your <h1> tag like so

<h1 class="Red">Company Name<sup>&#8482;</sup></h1>

Answer 2

Add this to your CSS.

.Red {
    display:inline;
}

Header tags default to line breaks so you need to set it to display inline which will not break after the end h tag

Answer 3

Keep in mind with this answer that any styles you apply to the h1 tag will apply to your sup tag as well.

<h1 class="Red">Company Name<sup>&#8482;</sup></h1>

The main issue I run into with sup tags is that they can push up the line-height on lines containing them. It's easy to fix with the following CSS; just figured it was worth mentioning.

h1.Red sup { line-height: .1em;}