Subheadings

mattSanchez · October 21, 2012, 1:11am

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

For example:

[COLOR=#FF0000]<h1>Matt Sanchez</h1>
<h2>Web Designer</h2>[/COLOR]

---------- or -------------

[COLOR=#008000]<h1>Matt Sanchez <span class="subHeading">Web Designer</span></h1>[/COLOR]

Which is more semantically correct?

Thanks in advance

ralphm · October 21, 2012, 1:42am

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.

system · October 21, 2012, 1:46am

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

ralphm · October 21, 2012, 1:56am

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.

dresden_phoenix · October 21, 2012, 4:27am

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

ralphm · October 21, 2012, 4:33am

Rather than the <br> there, I’s set the <small> to display: block.

dresden_phoenix · October 21, 2012, 7:02am

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; })

mattSanchez · October 21, 2012, 8:12pm

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?

mattSanchez · October 21, 2012, 8:18pm

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.

dresden_phoenix · October 21, 2012, 8:23pm

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.