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.

Kathrinekathryn

And your actual HTML would be..? – Unzip

something like <span class="extHeading"><h3>Skill Ratings</h3>(scale of 5)</span> – Kathrinekathryn

Wrap everything in a div and float the elements so they line up or use absolute and relative positioning. – Faydra

but then again, i don't know -- that is why i am asking this question to find out. I want to have Skill Ratings (scale of 5) all in one line where "Skill Ratings" is recognized as a heading and "(scale of 5)" is not, yet is on the same line – Kathrinekathryn

Answer 1

HTML

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

CSS

h1 span { font-size:16px; }

Pickpocket

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.

Nawab

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
}

Hexose

Can anyone explain why is this not recommended (judging from the -1 on the answer)? – Pressurize

i can't, sorry. I thought i misunderstood the question "have a heading and then some less important text on the same line" meaning for me H1 /H1 + some text .. Maybe op was changed and the answer is no longer relevant .. I don't know. The 'scale of 5' is in outter parent element, less semantic form. ?? – Hexose

This worked fine for me so +1. The OP wasn't very clear about wanting the (scale of 5) within the h1 tag. – Corset

Link is broken at the moment. Does that solution work with style="display:inline" also? – Lemmueu