In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario.
Read them here:
jQuery Mobile data-title behavior with multi-page template
jQuery Mobile data-title behavior in single-page template
Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app.
So we see that there are 3 options available to set the page title,
- The <title> tag
- The data-title attribute of the page container
- The header text in the header container
Now the question is which one to use?
And here are my recommendations,
- For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same.
- For multi-page template, use data-title for every page container, including the first container in the document. After first load, every subsequent Ajax transition uses this attribute.
- The header container (data-role="header") text should better be used for the page header and not the title. No point in having the same title and header, its plain non-intuitive!
So what do you think?