H heading + some other text on the same line

Question

I am trying to have a heading and then some less important text on the same line:

Skill Ratings

(scale of 5)

but I really want (scale of 5) to be in the same line as well as that Skill Ratings be wrapped in the <h> tags for document structure semantics.

I am tight on real estate so I don't want another line, (scale of 5) will be linked to a CSS style.

Is this possible? If not, I will chose to not have Skill Ratings as a heading but would prefer that it be.

Answer 1

HTML

<h1>Skill Ratings <span>(scale of 5)</span></h1>

CSS

h1 span { font-size:16px; }

Answer 2

You can use Lowkase's answer, or if for some reason you needed to separate the elements into Headings and Paragraph tags, you could do this:

<h1>Skill Ratings </h1>

<p>(scale of 5)</p>

Then here is the css:

.h1 { display: inline; }
.p { display: inline; }

Lowkase's solution is more semantic, so it's probably a better solution, but this is another way to do it.

EDIT

Sorry, I just noticed you wanted it in the header tag, which means use Lowkase's answer.

Answer 3

Just make your <h1> display:inline. This way, it will render in the normal text flow.

Fiddled here

<h1>Skill Ratings </h1>(scale of 5)

h1 {
    display:inline
}