Spacing between H1-H6 paragraphs

Discussion in 'HTML & Website Design' started by Yoeld, Nov 2, 2007.

  1. #1
    Hi,

    I am using <H1> for my main title page, <H2> for secondary title and <H3> for content.

    So it looks like:
    <h2>Secondary title</H2><H3>Main content + blabla</H3>.

    I would like to control the spacing between the secondary title and content. As default, it is really large spacing.

    Any suggestion?

    Thanks.
     
    Yoeld, Nov 2, 2007 IP
  2. rojar123

    rojar123 Peon

    Messages:
    934
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #2
    can i have the link to your site, so i can have a look? cheers
     
    rojar123, Nov 2, 2007 IP
  3. Yoeld

    Yoeld Peon

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
  4. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    to change the spacing inbetween h1,h2 etc..

    padding, margin and border control the space around a block element...

    use css

    <style type="text/css">
    h1, h2 {
    padding-top: desired padding;
    padding-bottom: desired padding;
    margin-top: desired margin;
    margin-bottom: desired margin;
    }
    </style>
     
    Jamie18, Nov 2, 2007 IP
  5. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    also i just took a quick look at your site and it appears your h3's should probably be p's
     
    Jamie18, Nov 2, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    GAH, content is NOT a header. There's using headers to your advantage, and then there's abusing them to the point where no search engine is going to take you seriously.

    Jamie's right, all those H3 should be P - and I'd probably use the H1 for the PAGE header, downgrading your H1 to a H2 and your H2 to a H3.

    The abuse of tables (from the layout there should only be one on the page, and even that could be ditched) is just icing on the cake.
     
    deathshadow, Nov 2, 2007 IP
    Lever likes this.
  7. Yoeld

    Yoeld Peon

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi all,

    Thanks for your feed-back.

    Referring to deathshadow comment on header, do you mean i don't need H1, just H2 and change H3 in p?

    I read somewhere an article that for SEO, you should have H1, H2 and H3 on pages. Do you agree with this or is it BS?
     
    Yoeld, Nov 2, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    Lol.

    You're marking paragraphs as headers. A header is a header. A header is not a paragraph. If you have a header, you mark it up with <h1>, <h2>, or <h3> in that order and if you need more go ahead and use <h4>, <h5>, and <h6>.

    I can't think of anything ATM so I'm just going to use an example page from Wiki.

    http://en.wikipedia.org/wiki/Bill_Goldberg

    That right there is an example of proper usage of headers. Go visit any wiki page and look at the source to see how they use headers.
     
    soulscratch, Nov 2, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Good example there SS. Pretty much you should think of your document as a tree (it's a great analogy for most computer technologies). The H1 is the trunk, your h2's are branches off that trunk, h3 is branches off the branches, etc, etc. down the line. A tree should only have one trunk, and the only thing before that would be the roots (the <head></head> part of the document)... Page content - well, that's the leaves... and you usually don't see leaves growing off the trunk either unless it's right at the top ;)

    I'm not saying don't use headers, I'm saying use headers to mark your headers, NOT your content.
     
    deathshadow, Nov 3, 2007 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    And to answer the other question, no it's not BS... sure, you don't HAVE to have headers; so long as you have text, Google can read it. But, headers tell the bots what the page writer thinks is important, and figures that the headers denote what the content is about... thus it is a factor (one out of many many though) in SEO.
     
    Stomme poes, Nov 3, 2007 IP
  11. Yoeld

    Yoeld Peon

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks. I have updated the page. Further comments are welcomed.
     
    Yoeld, Nov 3, 2007 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Careful what you ask for.

    Stylistically - the column of images pushing past the width of your header makes the layout look broken - and I'd seriously consider CENTERING the whole thing. The gap below your header image and the menu (which only appears in opera, FF and Safari) is another 'error', the grey background colors on the inputs (which again only appear in Opera, FF and Saffy) make it hard to see what you are typing, and the content spacing is VERY inconsistant between browsers... and I'd add some spacing between the LI items in the body to make them easier to distinguish from each-other and I'd probably give the page a footer to make the appearance more 'consistant'.

    On the code side, you've got a table wrapping that top image for NO reason, being a header that should probably be your H1. Likewise the menuBar div is a complete waste of code and should probably just be a list. You have a UL wrapped in a paragraph for no reason (Is a UL a paragraph? No it is NOT) and you've inlined a slew of javascript functions that really should be in an external file... and seriously, switch all your tags to lowercase to be consistant with the rest of the world. The title is too long and should simply say where the user is, not what the page is about...

    and axe that stupid 'bookmark this page' rubbish! If the user wants to do that their browser lets them do that. Likewise get rid of all the target= nonsense, as that's just intrusive to the user... and I'd suggest working towards validating your code.

    I'd ballpark about a quarter to a fifth of the HTML that's in there being unneccessary.
     
    deathshadow, Nov 8, 2007 IP