0

By "subtitles", I mean the literary definition: a secondary title beneath a title, such as the "A New Hope" part of "Star Wars". If you're still confused, see Wikipedia's article, Software (titling).

I am transferring a document to HTML. In this, there is a title (I'm using an h1 for this), its subtitle, and body content (I'm using ps for these). I initially considered doing this as a small within the h1, separated by a br. However, knowing HTML5, I also considered aside. Bootstrap recommends I use a p class="lead", but I don't like the idea of it semantically being exactly as inportant as the rest of the article. What element best represents a subtitle in HTML5?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ky -
  • 30,724
  • 51
  • 192
  • 308
  • 2
    http://html5doctor.com/howto-subheadings/ – yas Feb 06 '14 at 14:27
  • @dave are you saying there is no definitive answer? – Ky - Feb 06 '14 at 14:35
  • 2
    I would never use aside for something such as a subtitle. In my opinion (not sure what the spec has to say about this) an aside should be used for content of itself that only marginally or not at all relates to the main content of the page. Think of how Wordpress handles widgets (for instance "recent posts"): they are put in an aside. dave's example shows that it all depends on the case at hand. Personally, I often use a span inside the heading if it is quite short, and a seperate "p" if it is a full line of text or more. If the latter, wrap the "h"and the paragraph inside a `header` element. – Bram Vanroy Feb 06 '14 at 15:31

1 Answers1

5

aside is a sectioning element. I don't think it's appropriate to use it as a subheading element, since a subheading is just that, and not an entire section of content in itself. Furthermore, an aside can (and often does) itself contain other heading elements.

p is actually a pretty reasonable option, provided that you group that p and the h1 that it accompanies within a header element, like so:

<header>
  <h1>Title</h1>
  <p>Subtitle</p>
</header>

As far as HTML is concerned, a paragraph is just a self-contained unit of textual content. It doesn't have to represent a paragraph of text in writing. If you are really concerned about its semantics though, feel free to replace it with a div or a span and/or use an appropriate class name.

HTML5 itself doesn't really provide much more of a solution for marking up subtitles, unfortunately, but I would say that aside is not the element to use.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    I have always felt that a `div` is not a preferable element to contain plain text (unmarked by for instance paragraph tags). Yet again, I have no source to back me up, so it is a completely subjective thought. I tend to use divs as little as possible in HTML5. The new HTML5 elements (section, header, article, aside, nav) for a semantic document division and p, span, a for text containers. Divs are only needed in some cases where no other element of the former group is semantically relevant. Again, this is a personal opinion - but it helps to make your mark-up consistent across your work. – Bram Vanroy Feb 06 '14 at 15:40
  • @Bram Vanroy: Indeed +1 - I'm mainly suggesting it only as a last resort should the author not deem something like `p` appropriate. – BoltClock Feb 06 '14 at 15:43
  • What about `small`, then...? – Ky - Feb 06 '14 at 18:43
  • 1
    +1 Correct answer. I’d only add this link to the HTML5 (CR) spec: [Subheadings, subtitles, alternative titles and taglines](http://www.w3.org/TR/2014/CR-html5-20140204/common-idioms.html#sub-head). – unor Feb 07 '14 at 00:39
  • 1
    @Supuhstar: Well, I happen to use `small` on my landing page if that means anything :) – BoltClock Feb 07 '14 at 04:45