HTML: How to Markup Subtitle

By Xah Lee. Date: . Last updated: .

This page shows you the proper ways to markup subtitles, alternative title, taglines.

Using the right tag to markup is important, because otherwise search engine may not properly categorize your page. (aka SEO.)

Firsts of all, by W3C's recommendation, you should not use sub-section header such as “h2” to mark subtitle.

Here's proper ways that will be recognized by Google Search.

Using Colon in “h1” Tag

One simple way is to use a colon. Like this:

<h1>Lord of the Flies: on Human Nature</h1>

Using “span” in “h1” Tag

Another way is to use “span” tag for the subtitle. Like this:

<h1>Lord of the Flies <span>on Human Nature</span></h1>

Using “header” Tag

A more elaborate way is to use the “header” tag, like this:

<h1>Lord of the Flies</h1>
<p>on Human Nature</p>

Use CSS to style them.

[see Visual CSS]

Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Reference
  5. DOM Scripting
  6. SVG
  7. Blog