Subheadings and Alternative Titles

Common Idioms without Dedicated Elements – Part 1

Foreword: In this part of the series, I talk about HTML5 suggestions for features that do not have mark up elements; these features are: subheadings, subtitles, alternative titles, taglines, bread crumb navigation and tag clouds.

By: Chrysanthus Date Published: 5 Aug 2015

Introduction

This is part 1 of my series, Common Idioms without Dedicated Elements. In this part of the series, I talk about HTML5 suggestions for features that do not have mark up elements; these features are: subheadings, subtitles, alternative titles, taglines, bread crumb navigation and tag clouds. I explain this vocabulary first before I give the suggested coding.

Here is a quotation from HTML5 specification: “h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.”.

Pre-Knowledge
HTML does not have a dedicated mechanism for marking up subheadings, subtitles, alternative titles, taglines, bread crumb navigation, tag clouds, conversations and footnotes.

This series is part of the volume, HTML Course. At the bottom of this page, you have links to the different series you should have read before coming here.

SubHeading
Here is a quotation from the Oxford Advanced Learner’s Dictionary, for the meaning of subheading: “a title given to any of the sections into which a longer piece of writing has been divided.”

HTML5 officially has no element for a subheading; it does not have a suggestion either. However, looking at the dictionary meaning of subheading, a heading element (h1-h6) should be used for a subheading.

Subtitle
Here is a quotation from the Oxford Advanced Learner’s Dictionary, for the meaning of subtitle: “a second title of a book that appears after the main title and gives more information.”

In the following example the title and subtitles of a web page are grouped using a header element. As the author does not want the subtitles to be included in the table of contents and they are not intended to signify the start of a new section, they are marked up using p elements.

    <header>
        <h1>Perl Today</h1>
        <p>A vocabulary and associated APIs for Perl</p>
        <p>Editor's Draft 9 May 2015</p>
    </header>

Now, the title is in the h1 element. There are actually two subtitles, each in a paragraph element. You can then go on to use CSS to style the title differently from the subtitles.

So, one suggestion by HTML5 for subtitles, is to place the title (heading element) and any subtitle in a header element. Any subtitle goes into a paragraph element.

In the following example the subtitle of a book is on the same line as the title, separated by a colon:

    <h1>The Lord of the Circles: The Two Pillars</h1>

So, the second suggestion from HTML5 for a subtitle is, that you place the subtitle after the title, separated by the colon.

In the following example, part of a musical album title is included in a span element, allowing it to be styled differently from the rest of the title. A br element is used to place the album subtitle on a new line.

   <h1>Enjoyment<br>
   <span>Yeah! Lets Dance</span>
   </h1>

So, the third and last option from HTML5 for a subtitle, is to place the subtitle in the same heading element as the title, but in a span element, and then use the br element to force the subtitle to the next line.

Tagline
Tagline means punchline or slogan. Punchline means the last few words of a joke that makes it funny. Slogan means “a word or phrase that is easy to remember, used for example by a political party or in advertising, to attract people’s attention or to suggest an idea quickly.”

In the following example the title and tagline for a news article are grouped using a header element. The title is marked up using an h2 element and the tagline is in a p element:

    <header>
        <h2>3D movies set for popularity slide </h2>
        <p>First drop in 3D box office projected for this year despite hotly tipped summer blockbusters, according to Media Rank report</p>
    </header>

You can then style the heading element differently from the paragraph element.

In the previous example, the title and taglines for a news magazine are grouped using a header element. The title is marked up using an h1 element and the taglines are each in a p element.

    <header style="width:450px">
        <p>Magazine of the Year</p>
        <h1 style="text-align:center">THE WAVES</h1>
        <p style="text-align:right">The Best of US and Foreign Media</p>
    </header>

You should try this code to see what it looks like: The text of the top paragraph is on the left and the text of the bottom paragraph is on the right.

So, coding the title and taglines, is to place both in the header element: the title in a heading element (h1-h6) and a tagline in a paragraph element. You use CSS to style the title and taglines differently.

Bread Crumb Navigation
A good site has a home directory with subdirectories to the home directory. The index or home page is in the home directory. Other HTML files are in subdirectories. Consider a website for products where one of the products is pans: Assume that you have an index file in the home directory called, index.htm; then a file called products.htm in a subdirectory called products, which is a subdirectory to the home directory; and then a file called pans.htm in a subdirectory called, pans, which is a subdirectory to the products directory. A typical bread crumb navigation, after arriving at the home page, then the products page and then the pans page, would appear as follows:

Home>Products>Pans

where each of these words is a hyperlink to the relevant page. You can produce this bread crumb links as follows:

<a href="index.htm">Home></a><a href="site.com/products/products.htm">Products></a><a href="site.com/products/pans/pans.htm">Pans</a>

However, HTML5 does not encourage this. HTML5 would like you to place the links in a list element in a nav element and then style it to come out in one line. HTML5 would like that you use a different sign for the indicator, >. Well, I will not go into the details of the HTML5 suggestion, here.

Tag Cloud
A tag cloud is a list of keywords that apply to a group of web pages. Here is a quotation from the HTML5 specification, “In general, authors are encouraged to either mark up such lists using ul elements with explicit inline counts that are then hidden and turned into a presentational effect using a style sheet, or to use SVG.” And here is an example from the specification:

<ul class="tag-cloud">
<li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
<li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span>
<li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
</ul>

So in this code, the word, “apple” occurs in the apple page, 28 times; the word, “kiwi” occurs in the kiwi page, 6 times; and the word, “pear” occurs in the pear page, 41 times. The list of keywords are apple, kiwi and pear.

Summary
HTML5 does not have any element or suggestion for subheading. Based on the meaning of subheading, I suggest you use a heading element (h1 – h6).

For subtitles, HTML5 has three suggestions: You can use a colon to separate the title and the subtitle while using a heading element for both, or you can use a heading element for both while placing the subtitle in a span element (for styling) or you can place the title in a heading element, place any subtitle in a paragraph element and place all of that in a header element.

For tagline, HTML5 suggests that you place everything in a header element: the title goes into a heading element and any punchline or slogan goes into a paragraph element. A paragraph can be above the heading element but the paragraphs and heading element all have to be in the header element. A tagline is a punchline or a slogan.

For bread crumb navigation, HTML5 suggests that you place each line in an li element and the list in a list element and the list element in a nav element. You then use CSS to turn the list into a horizontal line.

This is what HTML5 says about tag clouds: “In general, authors are encouraged to either mark up such lists using ul elements with explicit inline counts that are then hidden and turned into a presentational effect using a style sheet, or to use SVG.” Here a cloud is a keyword.

That is it for this part of the series. We take a break and continue in the next part.

Chrys

Broad Network

Related Articles

Subheadings and Alternative Titles

Common Idioms without Dedicated Elements – Part 1

Introduction

Related Links

Comments