www.webdeveloper.com
Results 1 to 14 of 14

Thread: H1 Tag Difficulties!!!!!!!!!!!!!!!!

  1. #1
    Join Date
    May 2006
    Posts
    100

    H1 Tag Difficulties!!!!!!!!!!!!!!!!

    Hi Everybody!

    I would like to enclose two words of a 18 word sentence in a H1 tag. BUT, every time I do so, the two words enclosed with the H1 tag appear on a separate line. I want the two words enclosed with the H1 tag to appear on the same line as the rest of the sentence.

    Can anybody tell me how to do this? Below is my css code:

    First I tried this:

    h1 {
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    }

    And then I tried this:

    .h1text {
    font-size: 14px;
    font-weight: bold;
    }

    But the text enclosed in the h1 tag still appears on a separate line!

    Thank you,
    Cowgirl

  2. #2
    Join Date
    Jul 2012
    Posts
    5
    I would have to see your html as well. By the way, I love your username

  3. #3
    Join Date
    May 2006
    Posts
    100
    Hey html5whiz, glad you like my username

    Here is the code:
    <li class="indexbodytext750">Download one of the many <h1>layouts<h1> available from this website</li>

    and I tried this code too (though on restrospect, I dont think this works, as it is missing the all important h1 tag, which is the whole purpose of doing this):
    <li class="indexbodytext750">Download one of the many <span class="h1text">layouts</span> available from this website</li>

    Thank for your help!

  4. #4
    Join Date
    Mar 2011
    Posts
    1,142
    <h1> is a block-level element. That's why it appears on a new line. Changing to a <span> was a much better choice because it is an inline element. If you absolutely *must* embed your <h1> in an <li></li> pair, set the CSS for the tag to include:
    Code:
    display:inline;
    You may also need to include:
    Code:
    margin:inherit;
    padding:inherit;
    line-height:inherit;
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jun 2012
    Posts
    48
    Hello CowGirl,

    Did you already tried this?
    Code:
    <style>
    h1 {
    display: inline;
    }
    </style>
    
    <li class="indexbodytext750">Download one of the many <h1>layouts</h1>  available from this website</li>
    Regards

  6. #6
    Join Date
    Jun 2012
    Posts
    48
    Oops ... rtrethewey was a little bit faster to hit the "submit reply" button

    Sorry!

  7. #7
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Quote Originally Posted by CowGirl View Post
    Hey html5whiz, glad you like my username

    Here is the code:
    <li class="indexbodytext750">Download one of the many <h1>layouts<h1> available from this website</li>

    and I tried this code too (though on restrospect, I dont think this works, as it is missing the all important h1 tag, which is the whole purpose of doing this):
    <li class="indexbodytext750">Download one of the many <span class="h1text">layouts</span> available from this website</li>

    Thank for your help!
    Sorry, but that really isn't the way to use heading tags. You could possibly be penalized by SEs for not being semantically correct in addition to not using tags in a proper syntax. You are asking viewers to download layouts and that really should be a link to them at least.

  8. #8
    Join Date
    Jul 2012
    Posts
    10
    display:inline;
    margin:0px;
    padding:0px;

    and if you like you can float:right

  9. #9
    Join Date
    Jul 2012
    Posts
    20
    It is doing that because they are meant to be in a line by themselves. You can de-pad and de-space it in you css like someone mentioned, but that may mess you up on other pages. Only do it that way if you want them all to be that way. What is easiest for me on just h1 (or whatever) is to use the <span style="font-size:24px;font-weight:bold;color:#345345;"> etc in the middle of the <h1> where I want it, that way it doesn't mess up my formatting on other pages.
    Last edited by Williamsun; 07-29-2012 at 05:27 PM.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,563
    In case you did not realize, the H1 tag is a structural part of the web page I.e.:
    - There should be one, and only one H1 tag on a web page.
    - It should closely follow the <body> tag.
    - It is to be used as the main heading.
    - Alternatively, you can use a graphical image where the main heading should go. In which case you STILL need an H1 tag but may choose to hide it by putting in the CSS:

    h1 {
    display: none;
    }

  11. #11
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Quote Originally Posted by jedaisoul View Post
    In case you did not realize, the H1 tag is a structural part of the web page I.e.:
    - There should be one, and only one H1 tag on a web page.
    - It should closely follow the <body> tag.
    - It is to be used as the main heading.
    - Alternatively, you can use a graphical image where the main heading should go. In which case you STILL need an H1 tag but may choose to hide it by putting in the CSS:

    h1 {
    display: none;
    }
    More than one H1 on a page: good or bad? (Video): http://www.youtube.com/watch?v=GIn5qJKU8VM

  12. #12
    Join Date
    Aug 2012
    Posts
    2
    I was also experiencing same problem but now this is resolved.

  13. #13
    Join Date
    Aug 2012
    Posts
    6
    float:left;
    margin:0px;
    padding:0px;

  14. #14
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37
    Quote Originally Posted by Major Payne View Post
    Sorry, but that really isn't the way to use heading tags. You could possibly be penalized by SEs for not being semantically correct in addition to not using tags in a proper syntax. You are asking viewers to download layouts and that really should be a link to them at least.
    Major Payne is right, that is not the correct way to use an h1 tag. Header tags are meant to be semantic, not used for design. Semantic means that they are important for the page meaning. h1 tags should be used as close to the top of the page as possible in order to give the body of the text an overall subject and focus. If you want to emphasize the meaning of the word "layout", you could put it in a <strong></strong> tag and then remove the bold in css (which is automatically attributed) like this:
    strong { font-weight:normal;}

    In html5, you can use more than one h1 tag, but only within <section></section> tags. But this needs to be done correctly and again, <section> tags should be used semantically and not for desired visual effect.
    Life is short. Be Max.


    http://www.webitseo.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles