ToughQuiz VII - The semantics of subtitles

Currently I'm working on the HTML of a ministry site, and I encountered one persistent problem that I don't know the "right" answer to: subtitles. Which tag do we use for them? A header, or not? I don't really know, and I'd like to ask your opinion.

In many instances, a regular <h2> or <h3> is followed by a subtitle that gives a little more information about the subject being discussed in the normal text below the header(s). The most obvious example is a subtitle for an entire page.

A subtitled page looks as follows right now:

  1. h2. Page title (the h1 is reserved for the ministry name)
  2. p?. Subtitle
  3. p. Normal text.
  4. h3. Header in text
  5. p. More normal text.

The subtitle always occurs directly below the regular header. The question is whether this subtitle should be an <h3> or a <p>; or maybe even an <h2>.

Right now I've opted for a <p> element, because:

  1. I find a header following a header odd. To my mind, a header should always be directly followed by a bit of normal text; a <p>, in other words. But maybe this is a matter of writing style, and not of semantics.
  2. If we'd make the subtitle an <h3>, logic dictates that the headers in the text should become <h4>s. That's possible, but at this rate we go through the header hierarchy rather quickly. On some pages we need sub-headers and sub-sub-headers, which then would become <h5>s and <h6>s, respectively. If we need a sub-sub-sub-header, we have a problem.

So the questions for today are:

  1. Should the subtitle in the example above be an <h2>, an <h3> or a <p>?
  2. If an <h3>, should the normal headers in the text become <h4>s?

Discuss.

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m around at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are closed.

1 Posted by Wilfred Nas on 3 October 2007 | Permalink

In my opinion a h3 should be the way to go, if you need anything more sub headerish than h6, you can always opt for a strong...

But should the h1 always be filled with the name of the ministry. The question is if this adds anything, you can set this in the page title. I heard somewhere that google doesn't like the h1 to be always the same, but I have to look into that...

If you opt for the ministry name in the page title, you win your self a header level...

2 Posted by cole on 3 October 2007 | Permalink

Subtitle for me still constitutes a part of the title.
Semantically could this then be achieved by a span element within the appropriate header tag, applying CSS to provide a presentational distinction (if required)?

3 Posted by Brian LePore on 3 October 2007 | Permalink

Why can't the name of the ministry and the page title both be h1s? I look to A List Apart as an example of a semantically driven site that uses an h1 for their master head and then later another h1 for their article page's header. Yes, they're different things but I do believe it's fair to use an h1 for both.

If you're uncomfortable with this, I would go with the h3 as the subtitle and bump down the previous h3's to h4's.

4 Posted by stefan on 3 October 2007 | Permalink

I go with Cole here. The subtitle in this case is actually part of the title, and should be inside the header in some way or other. I'm just not sure this would be semantically correct, even though I can't think of a reason for this to be wrong.

If that is no option, then h3 would be my second choice. p is too generic for a subtitle.

5 Posted by pauldwaite on 3 October 2007 | Permalink

When I did this for my old company, it went:

1. h1 (page title)

2. h2.subtitle (sub-title)

3. p (Normal text)

4. h2 (Heading in text)

I justified this to myself by deciding that a sub-title was like a sub-heading for the introduction of the article, so it was okay to use the same heading element as other sub-headings in the article.

If I was doing it again, I think I’d be tempted by the span-within-h1 option, or maybe even small-within-h1, to suggest de-emphasis of the subtitle. Thing is, if a sub-title follows a title on the same line, there’s usually a comma in between them. Difficult to get rid of that when you’re styling them to be on different lines.

6 Posted by Ben Kendall on 3 October 2007 | Permalink

Depending on how important it is to read the subtitles with the page title I'd look into having them in the same h2 tag, and use a line break with a span to stylize the subtitle. If it's not that important though I'd go with Brian's answer and use h1's the way A List Apart does using it for both the master head and page header.

7 Posted by Maaike on 3 October 2007 | Permalink

I think the subtitle should be a h3 and the headers in the text would then become h4 (and lower). Reason: a subtitle is just another kind of header. Yes, you might run out of h's if there are many subheaders, but that's a fault of html (why don't h7 - h10 exist anyway?) and therefore not your responsibility!
I don't think the 'webrichtlijnen' allow for multiple h1's, by the way.

8 Posted by Hristo Drumev on 3 October 2007 | Permalink

If you use heading tags to generate a table of contents of the document which tag is successful?

9 Posted by Chris Snyder on 3 October 2007 | Permalink

All very well and good, but what will you use for a _super title_?

I like pauldwaite's suggestion for its utter simplicity, and at the same time I lament the fact that some writers enjoy saying things with 5 different heading sizes and expect to be able to do so on the web.

10 Posted by Ben Boyle on 3 October 2007 | Permalink

Great answers already (I'd use strong within the heading for a "super" title btw).

There's no clearer answer with HTML5, but I thought the new "header" element (which can wrap multiple elements, including h1-6) is worth a mention :)

11 Posted by Azat Razetdinov on 3 October 2007 | Permalink

I consider subtitle as continuation of the header, so I prefer [h2] followed by [h2 class='sub']

12 Posted by Bob Marchman on 3 October 2007 | Permalink

In my work, I always use h2 for subtitles. The justification being that if CSS is disabled, the flow of document is easy to understand. The greatest emphasis is on the h1 title, the next greatest is on the h2 sub. Using a p tag doesn't have the same emphasis in screen readers and text based browsers (yes, there are people still using those), IMHO. Good topic for debate, though, as there ultimately isn't a right or wrong way.

13 Posted by Alex Jones on 3 October 2007 | Permalink

There are some very good points in the comments. The way I approach it is much like what was suggested above:

h1 - Page title, not the site title, as that isn't the most important element on the page

h2 - section title, or subtitle depending on the content. If it's a subtitle I add an appropriate class, and or a span within it for styling. A long document can have several H2s, so there's nothing wrong with using them as a subtitle for the page.

h3 - h6 - Use them as appropriate, using the next lower header tag when subtitles are used for lower levels. If by some twist of fate I use an h6 AND it has a subtitle, I'd use a strong, appropriately classed, but that's never happened.

The terms "header" and "title" are not different in any meaningful way, and if the information is important enough to be a subtitle, it should be given semantic weight.

14 Posted by Eric TF Bat on 3 October 2007 | Permalink

I generally go with h1 for the page title and h3 for headings within the text. I reserve h2 for hidden section headings, for readers without CSS support, like screen readers and Googlebot: the standards are Main Content, Navigation, User Authorisation and Page Summary. Under that principle, I suppose I could replace Main Content with a subtitle and make it not invisible via a class, but I prefer the paragraph option. It just feels right. I guess the rationale is that a subtitle isn't a heading, so it shouldn't be styled as one. Think about your typical WordPress blog: it has a blog title and a tag line, initially "Just another [name of blog] blog" in the WordPress MU (Multi-User) version. The tag line isn't a heading; if anything, it's a description of a heading. So paragraph fits, and h2 doesn't.

Ultimately, whatever you pick will be right, provided you pick it for reasons other than "Microsoft FrontPage does it that way"...

15 Posted by Adam J. McIntyre on 3 October 2007 | Permalink

Add me to the h3 subtitle + h4 content header group.

The subtitle seems to be of a higher semantic value than the in-content headers as it describes the overall content of the page, and should be "promoted" to a higher h value.

Since the subtitle is further describing the main page title, it doesn't seem to fit all that well as a classed child element of that child; it's semantically different, so it should be a different tag. Therefore, I'd kick it up to an h3.

@Maaike: I agree! If you run out of meaningful h tags, it's not your fault that enough weren't designed to represent all content.

16 Posted by Christophe Denuzière on 3 October 2007 | Permalink

Why don't use for page title.
Exemple, it's a commercial site, we want to focus on the products and not one the sitename

I think all page have a different ministry name and in this cas for exemple it's each products.

17 Posted by Stephen Brewer on 3 October 2007 | Permalink

The heading and subheading are both part of the overall heading, with the first part being the most important. So, how about and h2 around all of it and a strong around the heading part.

h2 strong HEADING strong SUBHEADING h2

I would prefer this to a using a span around the subheading as it (correctly) gives more weight to the heading over the subheading.

18 Posted by Gerben on 3 October 2007 | Permalink

I'd opt for another option. Since a sub-title is, as the name says, still a title; why not put them both in the header element. e.g.:
[h2][strong]Main title[/strong ][br /]Sub title[/h2]
Just a rough version. Maybe a span for the subtitle is better, and the br could maybe be omitted.

Another solution might be, Since the title and subtitle are related to each other, a definition list.
[dl]
[dt][h2]Main title[/h2][/dt]
[dd][p]Sub title[/p][/dd]
[/dl]

Just my two ideas.

19 Posted by John Riviello on 3 October 2007 | Permalink

I've wondering the same thing in the past when marking up press releases, which often contain a heading directly followed by a subheading. I've opted for using an H2 for the heading and H3 for the subheading (H1 being the company name). Taking a look at how the W3C marks up their press releases (see http://www.w3.org/2007/07/grddl-pressrelease for an example), they too have chosen to give the subheading a Heading tag one level lower than the heading (H1 & H2 in their case).

20 Posted by Aaron Barker on 3 October 2007 | Permalink

My suggestion is identical to Alex (#13). Save the h1 for the page title (use h1 on the homepage for the site title, but not on internal pages), and then use a span for the sub-title within the given h2/h3/etc. This gives you plenty of levels to work with in your hierarchy.

21 Posted by Alex on 3 October 2007 | Permalink

I would go:

h2 Page title /h2
p strong Sub-title /strong /p
p Normal text /p
h3 Header in text /h3
p More normal text /p

I agree completely that there should be 'real' content after each heading.

Having an h# with no content is like an empty section, even if the element after it is an h(#+1). Another way to look at it is to imagine if someone with a nonvisual browser were navigating by page headers. They would essentially hear the same section twice for every section. The header is meant to title a section, and the strong text following it can give a more detailed explanation if the heading entices the reader.

22 Posted by Krijn Hoetmer on 3 October 2007 | Permalink

I think I'd use a [p], although it depends on the content and context.

But what if the 'subtitle' is put before the title (although perhaps then it's not a subtitle anymore :), like this:

[Category foo]
Title of article

Would the hx/hx+1 people put the subtitle in an [hx] and the title itself in an [hx+1]?

23 Posted by Seb Frost on 3 October 2007 | Permalink

I think we'd need a proper example to be able to give a good response, but my choice would (I suspect) be a paragraph tag with a class of "lead-in" or something like that.

To me a header should be just a few words, and it sounds to me like you're talking about a short paragraph summarising the following section.

24 Posted by Alejandro Moreno on 3 October 2007 | Permalink

There are some great points made. My vote goes to:

h2 - title
h3.sub - sub-title
p - text
h3 - sub-header

... which works okay on screen readers and text browsers. It also addresses my doubt that a sub-title is hierarchically superior to a sub-header.

I also like the idea of the subtitle being a part of the title, but don't really like the markup that it entails.

25 Posted by Eric Wendelin on 3 October 2007 | Permalink

I will vote for the [h3] because the tag itself is more descriptive (and therefore more accessible). I think using [h4]s in the text would be OK. If you need anything deeper than [h6] there may be a point at which you would consider restructuring the content because its hierarchy is too complex.
-Eric

26 Posted by marrone on 3 October 2007 | Permalink

I like pauldwaite's suggestion for using just the single header with the sub-title contained within a small tag to deemphasize it. To me that is the most semantically correct, still allows you to style however you want, and in unstyled browsers the default look will still show the sub-title in smaller text indicating it is a 'sub-title' or has less emphasis.

27 Posted by jerone on 3 October 2007 | Permalink

I think you should make it in the order of importants;

h1. Site/business name (in this case ministry name),
h2. Page title,
h4. Subtitle,
h3. Header in text,
p. Normal text.

A subtitle contains to my opinion some extra info about what you're showing on the page. So this title is less important then the header in the text. Thats why i made it a 'h4'.

28 Posted by Christopher Boomer on 3 October 2007 | Permalink

I'm with Alex @#21. The strong paragraph gives the semantic emphasis required without repeating the header itself.

A subtitle is surely the explanation of the title, rather than a heading in itself? It's there to keep the title punchy without losing its meaning entirely.

I've run into similar problems recently producing user guides in Word. The subtitle does not merit inclusion in the table of contents, and was therefore styled as Body Text.

29 Posted by Alex on 3 October 2007 | Permalink

Christopher @ #28:

Well said indeed!

I must come to the conclusion that people love H elements because H elements are a microchosm of the spirit of (X)HTML: a heirarchy exists between the available tags, there is a finite and arbitrary selection of tags, and there are certainly many concensuses that exist surrounding their use, although not always (as evidenced by this discussion).

Regardless of the temptation, H elements should only be used for what they're intended for. I won't bother quoting the W3 specs ( http://www.w3.org/TR/html401/struct/global.html#h-7.5.5 ), but will bring attention back to what Chris said by quoting "Heading information may be used by user agents, for example, to construct a table of contents for a document automatically." Not exactly canon, but shouldn't be ignored either.

30 Posted by Kris Kowal on 3 October 2007 | Permalink

Header tags, in my opinion, are a bit of an anomaly in the hierarchical structure of an XML document; I would think that there would be nested section tags where the level of the heading would be implied by its depth. I find that I end up using div tags for this purpose for some sites.

It's best to be able to infer the structure of your document from headers and following sections. Graded headers should have a one to one mapping with a section/header layout so that you could algorithmically scan your document and construct a hierarchy based on your headers and the _content_ that follows them.

To that end, I think we should use a colon followed by a div within a level one header to express subtitles. This will be readable in text browsers, styleable in graphic browsers, and analyzable by search engines or TOC generators.

<h1>Title: <div class="subtitle">Subtitle</div></h1>

31 Posted by Circeus on 3 October 2007 | Permalink

I'd definitely go with Cole's suggestion. It's the standard way to treat subtitles in bibliographic data, so it's not like you're threading in unknown terrain...

32 Posted by Alexander Chernyakevich on 3 October 2007 | Permalink

Right after reading this post (in lunch time) I created simple page with following markup:

<h2>
Title
<p>Subtitle</p>
</h2>


and CSS like:
h2 { ... }
h2 p { ... }

It looked for me very convenient and does not require to use any named style classes.

At home I have checked in details comments and found similar proposal in comment #30. Generally it has the same idea but uses named class. So my version is just optimization though was created independently. ;)

33 Posted by Tino Zijdel on 3 October 2007 | Permalink

I agree with Kris Kowal (#30), and that is also what HTML5 is currently suggesting ( http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sections.html#headings0 ): by nesting sectioning elements and associating heading elements with those sections using a simple algorithm it is easy to generate an outline of the document.

Basically than you can simply do this:

BODY
-H1
-SECTION
--H1
--P
--SECTION
---H1
---P

You'll never run out of heading-levels anymore this way :P

By lack of some explicit sectioning elements in HTML4 you could use a simple DIV with e.g. class="section" or class="article" and just use H1 again within that pseudo-section to indicate the heading for that section.

34 Posted by Maaike on 4 October 2007 | Permalink

Dutch ministry sites have to comply with the Dutch 'webrichtlijnen' (web accessibility guidelines). And according to these, you can only have 1 h1 per page. Check this discussion: http://stijlgids.overheid.nl/actueel/weblog/kopregel_hierarchie/ (in dutch, sorry).
I wonder whether *each* page has a subtitle, or only some of them? Because in the latter case you can't use a h3 for the subtitle, as that would mean pages without subtitles have no h3, which would mean you have to skip a header level. So on second thought I think Cole's suggestion is more practical.

35 Posted by Tino Zijdel on 4 October 2007 | Permalink

Maaike: allowing only one H1 per document is a silly requirement.

Simple usecase: http://core.tweakers.net/nieuws/49651/sony-en-qimonda-gaan-samen-dram-ontwikkelen.html

An article about 1 subject, which is mentioned in an H1 element. So far so good.

Now take a look at this page: http://tweakers.net/nieuws

That's a collection of all of today's articles. So I wouldn't be allowed to mark up the headings for each article here with an H1? Should I add a more generic H1 heading saying "today's articles" and than replace all of the article's H1 elements with H2? Even though each article is well defined within it's own 'section' so there is no question as to what part of the content each heading belongs to? That's backwards...

36 Posted by Gary Turner on 4 October 2007 | Permalink

It is quite clear to me that a sub-title/heading is either a part of the header element or it is an abstract of the page/section/sub-section.

It has been my habit to do it like so:

[h1]
Dr. Strangelove
[span class="h1sub"]or How I Learned to Stop Worrying and Love the Bomb[/span]
[/h1]

or;

[h1]Job[/h1]
[p class="abstract]A comedy of justice in four parts, in which a poor schmuck is the plaything of god until saved by the devil.[/p]

cheers,

gary

37 Posted by Maaike on 4 October 2007 | Permalink

Tino: hee, ik heb het niet verzonnen :-)

But actually I think it makes a lot of sense to only have 1 h1. And yes, I do think that in your case, you should have a h1 that says 'News' or something like that (hidden with css, if you want).
I guess though that in these matters, there are no universal do's and don'ts - it often comes down to personal preferences.

But we're straying off-topic here...

38 Posted by Tino Zijdel on 4 October 2007 | Permalink

Maaike: remember that the Dutch Government Web Guidelines are just that: guidelines. They are by definition a contemporary (limited) vision on perceived best practices, and so they can be wrong or mis-informing (such as in this case).

Also note that HTML4 is already hinting at an algorithm as described by the HTML5 draft. Personally I also don't see harm in 'skipping' heading-levels - the 'x' in Hx is not meant to be an absolute level-indicator, people should stop taking tagnames too literal.

Enforcing unnecessary constraints with regards to defining hyarchie and associating headers is counter-productive and doesn't benefit anyone.

39 Posted by Steve Clay on 4 October 2007 | Permalink

[h2]Quirksmode II[br]
[small]The Quirkening[/small]
[/h2]

1. The subtitle is part of the title, so it should stay in the H2.
2. SMALL is the most reasonable element available for de-emphasis.
3. BR is a perfect logical stop. IMO it's better than ":" or SPANs with display:block.

40 Posted by Charles G. on 4 October 2007 | Permalink

So Steve sort of stole my thunder above, but I also agree. The way I've been handling this problem is like so:

[h2]My Heading [small]subtitle[/small][/h2]

However, I choose to opt out of using a [br /] tag in this case, I can just use CSS to style the [small] tag to my liking. I feel the subtitle is still a part of the heading, and appropriately de-emphasized by the [small] tag.

41 Posted by Sander Aarts on 4 October 2007 | Permalink

I don't really see a 'one solution fits all' answer to the subtitles question. Is the subtitle a synopsis of the document, an introduction? Does is clarify or nuance the main title or does it add something to it or give it a twist? Does it relate more to the main header than to the content of the document or not?

For synopsis and introductions I'd use [p], for the others I guess the best solution is to put the subtitle in the [h1] as well (I don't think [h2] is the right tag for the subtitle of an [h1] header. The [h2] would be part of the content that is headed by the [h1], meaning that the [h1] says something about the [h2] though with subtitles it's just the other way around).


@Tino: you're right that they are guidelines, but as soon as you have to comply to them they're not anymore even thought they're still called 'guidelines':

"... Als gevolg van het besluit moeten nieuwe websites van de rijksoverheid aan de webrichtlijnen voldoen."

(for those who can't read Dutch: "... As a result of that decision new government websites must comply to the web guidelines.")


I agree with Maaike that it would be better to replace the headers on the news page by lower level headers (maar je mag wel door naar het examen ;-) )

42 Posted by Tino Zijdel on 5 October 2007 | Permalink

"(for those who can't read Dutch: "... As a result of that decision new government websites must comply to the web guidelines.")"

That's silly, especially given the fact that some of these guidelines are highly subjective and progressing technology and new insights sometimes may provide far better alternatives.

"I agree with Maaike that it would be better to replace the headers on the news page by lower level headers (maar je mag wel door naar het examen ;-) )"

I disagree because this makes it harder to create templates for markup that can be re-used in different situations (the same goes for the 'don't skip levels for headings' guideline). There is absolutely no reason for these kind of draconic restrictions.

As for the exam: I probably won't qualify because I cannot meet the silly prerequisites :P

43 Posted by UI Engineer on 5 October 2007 | Permalink

I usually use a paragraph with a class of "intro":


Subtitle info here

ALthough semantically perhaps "h2" or even "dl"

44 Posted by BARTdG on 5 October 2007 | Permalink

The subtitle is a part of the title (althoug the word suggests something else), so the subtitle should be inside the same [h2] as the title.

I do not think the importance of the subtitle is so much less, that you'd have to enclose it in [small] tags. A [span] with a well chosen class name is the way to go.

45 Posted by Alex on 5 October 2007 | Permalink

If the title/subtitle read something like this:

------
Benefits

The benefits of separating content from style
------

Then it must be an H followed by STRONG P markup.

If however, it read something like this:

------
Benefits: markup and style should be seperate
------

Then it could all be in the H, and a span could be used to seperate the first word from the rest.

BRs must not be used in either context, because they are not part of the content, in fact they would be completely presentational in this context. If a line break is desired on the page, CSS must be used.

The two deciding factors for whether or not the subtitle
(A) could be inside the H, or
(B) must follow the H in a STRONG P,
are:

1) If you were making a table of contents, would you want the subtitle in the TOC too? (remember that most TOC's do not contain paragraphs)

2) If there were no style sheets, and (as explained above) no BR elements, would your H element make sense with the subtitle included inside it?

I would presume that in many cases, these two points would not be answered in the affirmative, and so the subtitle would need to be in a STRONG P following the H.

46 Posted by Magento on 6 October 2007 | Permalink

I always use h2 for the article title and h3 for the subtitle. Never thought of using anything else, untill now...;)

47 Posted by Roel Van Gils on 7 October 2007 | Permalink

I don't see any use for the extra h3's for subtitles. Subtitles are simply not needed to convey the structure of a document (and that's what heading tags are meant for). You don't see subtitles listed in the table of contents of a book either, right?

An eassy, but effective way to see how you should interpret the headings structure of a given page, is by showing them in an outline with the Web Developer Toolbar: 'Information' > 'View outline'.

My advice: stick with the p's :)

Also, I believe many will agree with me that using h1 for the site's name is not needed either. Use it for the _page's_ title instead. You're already using the page's title tag for the site's title.

48 Posted by Ben Gerrissen on 8 October 2007 | Permalink

quote: ..is followed by a subtitle that gives a little more information about the subject being discussed ...

Contextual, an extension of the main header and thus part of the mainheader.

[h1]Main cheese
[span class="sub"]Extra cheese[/span]
[/h1]

Just style the .sub differently.

If the subtitle extends to a paragraph:

[h1]Main cheese[/h1]
[p class="intro"]Explanatory text about cheese[/p]

Though don't think this is the case, otherwise you'd have figured it out by yourself.

49 Posted by Michiel Heijmans on 8 October 2007 | Permalink

I don't get it. What is wrong with

h1 Sitename, incl. tagline
h2 Pagename or sectionname
h3 Subtitle
p text?

using [small] is soooo eighties! But I also still use it..

It might just depend on the amount of content and the subsections the client wants. I don't thing you can actually make this a standard.

50 Posted by Tino Zijdel on 8 October 2007 | Permalink

I realized that I didn't actually give an example of a subtitle as opposed to a subheader. I'd say this would be a valid example and can in due time easily be converted to HTML5:

[body]
--[h1]Document heading[/h1]
--[div class="section"]
----[div class="header"]
------[h1]Section heading[/h1]
------[h2]Subtitle of section heading[/h2]
----[/div]
----[p]Content[/p]
--[/div]
[/body]

Alternative would be to use H1, H2 and H3 respectively although that wouldn't change any of the semantics since the section heading is associated to it's section and clearly not to the document itself (HTML4 already describes this!) and has the most important heading level for that section. A good outlining algorithm shouldn't make any other assumption.

Using [p] for the subtitle heading would imo have too little associative value with regards to the section mainheading, [p] should be used for meta-data such as a version number, source citation or other kind of things that you might want to put into a header element (in HTML4 a division) but that cannot be considered a subtitle that supplements the actual heading.

51 Posted by ppk on 10 October 2007 | Permalink

Thanks all for the reactions. After discussing the possibilities with my client, we decided to go for this solution:

[h2]Title[br /]
[small]Subtitle[/small]
[/h2]

Thanks again!

52 Posted by Goulven Champenois on 12 October 2007 | Permalink

I'm all for Alex' solution, number 45.
Headings of the same level should not follow one another directly, otherwise they loose their "heading" meaning.

If the subtitle really is part of the heading, make it so in the HTML (h2 and span). Otherwise, it needs its own tag (h2 followed by p).

53 Posted by Matthew Wiebe on 14 October 2007 | Permalink

I echo support for Alex in comment 45, but also for the test given by Roel in comment 47.

I was going to suggest a similar test using an example from wikis that auto-generate a page index. An h3 is nested (indicating a sub-section) while a second h2 creates duplicate headings, both of which seem undesirable.

This thinking rules out using multiple tags, unless you wish to use a p tag, which will be ignored because your subtitle is really just an abstract for the article. If I want the subtitle to appear in the index, then it should be part of the header tag (though semantically separated through strong, span, or small tags). That way you see the most important bits in the index, kind of like you would if the CSS was turned off, with the context still preserved.

54 Posted by Axel Berger on 20 October 2007 | Permalink

@ Roel:
Subtitles are listed on the contents page. Authors using them typically do in print something that is about equal to [H1]My Birth[/H1][H2]or how I came into the world[/H2] and the table of contents gives it in full.

On my own personal pages I use CSS very sparingly and mostly write for the reader and for old styleless browsers. Styles may add and enhance but must never be compulsory. I use just that structure as discussed here on my own compilation of readable newspaper articles (all with permission of the authors of course) on http://berger-odenthal.de/aktuell/index.htm

Two typical structures are:

[H1]Why stealing is bad[/H1]
[H4]Trust among people is a wonderful thing and ought not be destroyed[/H4]
[H3]By our resident Rabbi[/H3]
[P]
Internal titles are H3 or H4 (or rarely [H2]) depending on whether they just give a little order or introduce entirely new themes.

the other typical one is:

[H1]Why theft is good for replacement sales[/H1]
[H3]By Al Capone[/H3]
[H4]A reply to last week's commentary[/H4]
[P]
Internal titles as above.

As I said my main criterion for semantic elements is how they stand on their own when there is no style present and I found these to best represent the actual structure as found in the text.

Axel

55 Posted by neil craig on 23 October 2007 | Permalink

Personally, i see the heading tags as weightings of importance e.g. H1 is saying something more important than an H2 and so on. That's my understanding...

So, i'd go for the H3.

56 Posted by Marcus on 21 November 2007 | Permalink

And thus you represent all of the reasons I never can bring myself to agree that H1 is the "right" tag for a title.

A heading is a heading, a title is a title. I understand that HTML 4 doesn't have a title tag, nor a subtitle, but two wrongs just aren't making a right for me here.

If you're gonna stick with H1 for title, then the most reasonable is gonna have to be H1.subtitle. At which point you sit and ponder why you didn't just do p.title and p.subtitle in the first place.

Sad, but if you've dug the "H1 is a title" ditch, then you're gonna have to dig another for your subtitle.

(Sorry, the rant just comes out of me. This has annoyed me forever.)

Why, on earth does a subtitle get no love in the first place? Its as if people are afraid that if we define a subtitle tag, then there must be a gazillion other things we'd have to define too. But other than a couple things like byline and dateline, there really isn't much to stress over. Subtitle and friends are staples, and aren't gonna go away.

On the other hand, justifying separate H1 through H6 tags really is a disconnect nowadays, and isn't nearly as close-ended as the relationship between Title and Subtitle.