Limitations of HTML's title element


How much do you know about the humble <title> tag? It has been there since the earliest HTML specification. The 1995 spec says:

There may only be one title in any document. It should identify the content of the document in a fairly wide context.
It may not contain anchors, paragraph marks, or highlighting.

Remarkably little has changed in the intervening decades. The modern HTML5 spec defines it as only containing text. That means you can't nest tags inside it. For example, this is invalid:
<title>I love <em>you</em>!</title>
Try it - you won't get emphasised text.

This is a problem for internationalisation and accessibility - and one the HTML5 editors have been wrestling with.

(Usual disclaimer, I'm HMG's representative on the W3C's Advisory Committee and I'm an editor on HTML5 - these are my personal views.)

Let's imagine this potential page title which includes multiple languages:

<html lang="en-gb">
<head>
   <title>A review of La vie en rose</title>
   ...

At the moment a screen reader would assume the whole title, including "la vie en rose", is in British English (the document's language). Hearing a computerised voice reading French in a British accent is akin to hearing Vogon poetry read in Dick Van Dyke's "cockornay". Unpleasant for all involved.

What we want to write is something like:

<html lang="en-gb">
<head>
   <title>
      <span lang="en">A review of</span> <span lang="fr">La vie en rose</span>
   </title>
   ...

This is invalid HTML - in most browsers it will display like this:

The raw HTML displays in the tab.

Incidentally, this is a long known limitation. How can we fix it?

Possible Solutions

  1. Change the element
  2. Make a new meta element
  3. Something else

Changing the element

This is impossible if we want to maintain backwards compatibility. Either we accept that older browsers will see garbled titles, or that newer browsers may get confused by older pages.

Any page with a title like <title>This page is about the <span> element</title> is going to require a work-around for new browsers.

New meta element

How about a new element like <title-multilang>

Nope! If a browser doesn't recognise an element in the <head> it will print it in the body.

Something else

Here are two existing things which could be repurposed.

The accessibility attribute longdesc lets an author place a "long description" elsewhere in the page. It is currently only valid on the <img> element. But let's imagine it used elsewhere:

<title longdesc="#desc">A review of La vie en rose</title>
</head>
<body>
   <h1 id="desc"><span lang="en">A review of</span> <span lang="fr">La vie en rose</span></h1>
   ...

That might help screen readers - but it doesn't improve the semantics of the page.

Here's some Schema.org MicroData:

<html lang="en-gb">
<head itemscope itemtype="https://schema.org/WebPage">
    <meta itemprop="alternativeHeadline" content="A review of <span lang='fr'>La vie en rose</span>"/>
    <title>...

That might be better for semantics, but would require screen readers to support it.

We could also hope that AI improves sufficiently that it can immediately recognise individual words within a sentence are from a different language. A task which befuddles most humans.

Next steps

What should be done? If you're interested in working on this - come join in with the HTML5 development process at the W3C

Support this blog

Enjoyed this blog post? You can say thanks to the author in the following ways:

Donate to charity
Give to charity.
Buy me a birthday present
Amazon Wishlist
Get me a coffee
Donate on Ko-Fi.

7 thoughts on “Limitations of HTML's title element

  1. Would it be possible to just have multiple title tags each with a different language specifier? I don't know if historical browsers will display, by default, the first or last of them - but that can be the 'default' page title.

    1. That does not help where a single title has multiple languages within it.
      As discussed on the linked GitHub issue - multiple titles behave inconsistently on older browsers.

  2. How about a new optional meta tag containing a list of language-keyed optional title overrides? Then it could be up to modern/future browsers to display it or not as the title based on local settings/environment?

  3. Isn't ara-describedby already a sufficient alternative to title[longdesc] partial solution?

    1. It solves the problem for screen readers - but that doesn't necessarily solve it for things like Alexa.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.