Get a free trial // Grow your CSS skills // Land your dream job

h1 and h2 tags on same line

  • # October 30, 2008 at 8:39 pm

    How can you write a line of text with the first 2 words bold and the rest of the words in the line normal.

    I tried wrapping the first 2 words in a h1 tag and the rest in h2, but the h2 part gets pushed down to another line when previewed.
    <h1>First words</h1><h2>the rest of the sentence</h2>

    Thanks, Steve

    # October 30, 2008 at 8:42 pm

    <strong>hey</strong> hey


    # October 30, 2008 at 9:07 pm

    The h2 elements get pushed down because h1, h2, etc are block elements instead of inline elements.

    You may want to put all of your text in the h1 element, and then the part you want to be bigger in a span element.



    This is biggerthan this text

    Then in your css you could assign a class to that text, or just style all the span elements

    span {font-size:25px;}


    Yeah, just re-read your post. If you want to bold your stuff, it would probably look like this:


    Bold text is fun

    # October 30, 2008 at 10:45 pm

    Yep Brian is right, I just would recommend strong tags instead of the deprecated b tags:


    first words rest of sentence

    # October 31, 2008 at 2:49 am

    couldn’t you use the disply:inline property to fix this?

    <div id="heading">
    <h1>first words</h1> <h2>Second words</h2>

    then in the stylesheet do

    #heading h1, h2 { display: inline; }

    # November 2, 2008 at 6:01 pm

    The strong tags didn’t work. No idea why. This is what ended up working OK:

    <h1 style="display:inline;">Bold text goes here</h1> <h2 style="display:inline;">normal text goes here</h2>


    # November 3, 2008 at 7:53 am

    Only use H tags if the text you are displaying is supposed to be classed as a header. If it is a header, then


    bold text this is non-bold

    Of course you wouldn’t use inline styling – but for purposes of illustration I have done so here.

    If it isn’t actually a header, then simply use <strong> tags as mentioned previously.

    # December 31, 2014 at 11:01 am

    same problem, but cybershot`s worked 100%

    <h1>first words</h1> <h2>Second words</h2>

    then in the stylesheet do

    #heading h1, h2 { display: inline; }

    # December 31, 2014 at 11:37 am

    I mean, this accomplishes getting the text on the same line with different weights, but it’s not semantic. If this is a header, use one tag and use a span with a class that styles the text within that span or use strong. If it’s just regular text, use a paragraph tag and do the same. In the examples given, you’re splitting up one piece of text amongst two separate tags to achieve a side effect of them being in separate tags, and that is a bad idea for a number of reasons.

    Edit: Of course, if what you REALLY want is an h1 tag and an h2 tag on the same line, this is the way to go. But I’m just not thinking that’s the actual need here from the examples provided.

    # December 31, 2014 at 2:34 pm

    @criewel, you do realize this discussion ended six years ago, yes?

    But in any case, GSutherland is right: this was a styling problem, not a semantic one. There are not two headings; only one heading with differently-styled words. They belong in the same heading element.

    In fact, I’ll go as far as saying that <b> tags would be correct here (not <strong>), because there is absolutely no semantic purpose: the first few words aren’t more important. It’s purely stylistic, and <b> does just that while imposing no semantic meaning.

    # December 31, 2014 at 2:57 pm

    wow, i didn’t even look at when this topic was from.


Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed