SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Questions about <h1> and <h2> header elements...

    Hi guys,

    I have defined 2 headers: <h1> and <h2>. Now, I am unsure about two things:

    1/ I have defined all the fonts with em except the body (of course), and the headers <h1> and <h2>. That is cause I include <h1> and <h2> in <divs in which I define let's say font-size: 0.5em. That way, only the text that is not "header text" get changed, which is exactly what i want. Is it a good idea to "block" the font-size of the headers to be able to use them in <divs (some of which the dynamically defined text' font sizes are changed) without never getting altered in font size.


    2/ Is it ok to use the headers <h1> and <h2> in other things than headers: What I mean is for example I use the <h2> in a horizontal list (<ul> with display: inline. Is that a commonly accepted usage of headers by you pro CSS developers or should I go by another method?


    BETTER EXPLANATION BELOW



    Thank you
    Last edited by aqw; Feb 24, 2006 at 11:57.

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi agw,

    to my understanding, and what I put to practice is as follows:

    A website can almost be called a "Document" which is pretty much is, and in the document there should be a certain structure to.

    for example, the header <h*> tags should be in a logical order.

    HTML Code:
    <body>
       <div>
      	<h1>Heading 1</h1>
      	<p>some text here</p>
      
      	<h2>Heading 2</h2>
      	<p>Some text here</p>
       </body>
    To answer your first question, no I dont think that there is anything wrong with putting heading tags inside other elements such as <div>, <span>, or <p>

    getting back to the above example, the h1, h2, h3, h4, h5, h6 tags should be used in this manner above, as it *to me makes sence* and as far as I have researched is the "more correct" manner of creating a website / *document*

    a bad practice of using <h*> tags would be as follows:

    HTML Code:
    <body>
       	<h2>Heading 2</h2>
       	<p>some text here</p>
       
       	<h1>Heading 1</h1>
       	<p>Some text here</p>
       
       	<h4>Heading 4</h4>
       	<p>Some text here</p>
      
       	<h3>Heading 3</h3>
          <p>Some text here</p>
       
       
       </body>
    as you can see from the above example, the heading's are out of place in an ideal structure.

    But to answer you origional question, you can change sizes of font's etc for <h*> tags within your document, but use the <h*> correctly.

    with regards to the second question about the <h*> tags in a <ul> I dont know if there is a set rule abou this, but I would not recommend using them inside a <ul> as that is what a <ul> is defined for , a LIST, not for headings. If you want to make heading of lists, then you might be better of doing something as follows:

    HTML Code:
    <h2>List heading 1</h2>
       	<ul>
       		<li>list point 1</li>
       		<li>list point 2</li>
       		<li>list point 3</li>
       	</ul>
       <h2>List heading 2</h2>
       	<ul>
        		<li>list point 1</li>
        		<li>list point 2</li>
        		<li>list point 3</li>
        	</ul>
       <h2>List heading 3</h2>
       	<ul>
        		<li>list point 1</li>
        		<li>list point 2</li>
        		<li>list point 3</li>
        	</ul>
    The above is simply my opinion based on reading I've done

    Hope that helps in some way

    /Ox
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will try to explain myself better:

    1/

    What I mean is this:

    For example I define <h1> like this:

    Code:
      h1 {
         font-family: Arial!important;
         font-size: 16pt;
         }
    Then I have this div:

    Code:
       <div id="mostpopularjokes">
         <h1>Most popular jokes
         <ul>
         <li>blabla
         <li>blabla
         <li>blabla
         </ul>
         <a href="http://yahoo.com">More popular listings by clicking here!</a>
         </div>

    Code:
       #mostpopularjokes
         {
         font-size: 93%;
         }

    This way, the font size of the header is preserved (remember 16pt) whereas all the other text font sizes are reduced (I define all the other fonts sizes in the css file with either "em" or "%").

    So my question is:

    Is it a good idea to "block" the font-size of the headers (!important) to be able to use them in <divs without them never getting altered in font size??



    2/

    For example let's take this:

    Code:
    <div id="jokecat">
     <h1>The real heading of a div</h1>
     <ul>
     <li><img src="some img"> <h5>French Jokes</h5></li>
     <li><img src="some img"> <h5>Norwegian Jokes</h5></li>
     <li><img src="some img"> <h5>Other jokes</h5></li>
     </ul>
     </div>

    In CSS:

    Code:
       #jokecat ul li h5 {display: inline;}

    Isn't this nice CSS programming?

  4. #4
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's good programming... what do you all think?

  5. #5
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply Ox... very helpful

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi agw,

    Regarding your font-size question - I wouldn't define anything with px or pt. IE has a very well known problem whereas it doesn't allow font-sizing unless using a flexible unit (such as % or em). It may be a long way round to achieve, but I would actually define yet more header styles specifically for the #mostpopularjokes div.

    e.g
    Code:
    #mostpopularjokes h1 {
    font-size:120%;
    }
    or, I wouldn't define a font-size for the #mostpopularjokes div, and instead target the elements within.

    e.g.
    Code:
    #mostpopularjokes p, #mostpopularjokes ul {
    font-size:93%;
    }
    Regarding your second question of using <h> tags inside your ul - this is not recommended. The only reason I could see you wanting to do this is for the benefit of search engines. Whilst it wouldn't have any fundamental problems in the rendering of the code, it's not exactly semantic is it? They're simply tags that are not required...


Bookmarks

Posting Permissions

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