Question

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?

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top