SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Subheadings

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Subheadings

    Should subheadings be placed in a seperate <h2> or should they be included with their parent <h1> heading?

    For example:

    Code:
    <h1>Matt Sanchez</h1>
    <h2>Web Designer</h2>
    ---------- or -------------

    Code:
    <h1>Matt Sanchez <span class="subHeading">Web Designer</span></h1>
    Which is more semantically correct?

    Thanks in advance

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi mattSanchez. Welcome to the forums.

    It's a good question, and it kind of depends on context. But in the example you've shown, I'd say that the best option here is definitely the second (using the span), because in terms of heading structure, an h2 is definitely not meaningful there. Really, this is one heading, so if you want visual differentiation between the two bits, then a hook like a span is the way to go.

    Anther option would be to use <b> tags around the first part of the heading and style that, so that, with CSS off, there's still some differentiation between the two parts of the title.

  3. #3
    Non-Member
    Join Date
    Oct 2012
    Location
    delhi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    of course you should place subheading in different tags and if you want to make visual effect then you should use list styling or table like

    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>

    </dl>

    which may look like

    Coffee
    - black hot drink

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by apnavarun View Post
    if you want to make visual effect then you should use list styling or table
    Remember that HTML is for semantics rather than visual effect (which is the job of CSS), so perhaps I shouldn't have opened that can of worms. <b> and <i> can be used the same way as a <span>, and have the small added benefit that they do create a sight visual effect with CSS off ... but that's incidental.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As ralph said:
    Remember that HTML is for semantics rather than visual effect (which is the job of CSS),
    Which is more semantically correct?
    what is correct will depend on exactly what you mean to say with your pages content.


    So: Let say you have a site about Matt. S, and this page talks about him begin a designer.
    <h1>Matt Sanchez</h1>
    <h2>Web Designer</h2>
    or even
    <div>Matt Sanchez</div>
    <h1>Web Designer</h1>
    ( of course am supposing that you are empathizing that you are a web designer rather than you are Matt )

    But both are equally important you say???

    then there is your answer.. you don't want a semantic differentiation between the two terms .. merely a visual one. In which case using an H1 and a semantically neutral tag such as SPAN, , B, or I will possibly be your best bet.

    If you are concerned ( and you should not be) how the page will look with CSS off , you could use SMALL (and even BIG if you aren't using HTML5)

    eg:
    <h1><small>Matt Sanchez</small><br />Web Designer</h1>


    hope that helps

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    <h1><small>Matt Sanchez</small><br />Web Designer</h1>
    Rather than the <br> there, I's set the <small> to display: block.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You are right, Rallph. I was including the BR in case it was important for him to have the line break when CSS was off. ( and when CSS is on you can always do h1 br{display:none; })

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually never considered what it would look like with CSS disabled (I've only been studying web design for a year.) Are there common scenarios where it would be disabled?

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    California
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a link to my site for context, mattsanchez.info. I currently have the subheading in a separate <h2> tag. Everybody seems to agree that that is the wrong approach, which is what I assumed.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    SE and screen readers ignore MOST CSS ( but that not relevant to the example I gave). Maybe OLD cell phones? Still a USER can choose to disable images, .js, and/or CSS at her digression. This is why its best practice to think content first.

    The above suggestion was merely a personal preference; when I code I to to make the page SEMANTIC, then 'followable' as pure text (CSS disabled, as it might have been seen in '98)... then make LAYOUT/bg in CSS and make it as cross browser friendly as I can and so that all the content is still readable and accessible, then I flesh it out with bg/graphics, etc (my art direction/ graphic design), then I add any other bells and whistles or effects, finally I will add polyfill. This way Ia m always sure the page gracefully degrades.

    I would have to see the working site ( there is only one page), but I would go with what I suggested above.

    as you dont have a loto of content its hard to tell.. but I am really not sure that 'hello', 'let's talk' , 'let's work' (and perhaps that should be say 'my work history' anyway )are h4s


    Tip: imagine you are witting your content as an outline for a presentation or report. If it's not a heading of a sun section then... it's not an Hx.


Tags for this Thread

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
  •