I am currently looking at jQuery mobile and its system of loading web pages with XmlHttpRequest. Thanks to that it is possible to automatically perform transition animations between two pages, for instance.
However, something is not clear to me. If I understand correctly, each new page of a jQuery mobile powered website is injected in the DOM of the initial web page. The documentation of jQuery mobile even tells that because of this mechanism, the <title> tag of new webpages are not taken into account.
So, in a way, if my initial webpage A.html loads a page B.html, I would tend to think that the webpage B.html does not need to have a full HTML grammar with the <html>, <head> or <body> tags.
My page B.html could directly begin with a <div> element.
Am I right?
Is a full html page needed when loading a HTML page with jQuery mobile?
What are the pros and cons about having a webpage with a wrong/truncated HTML syntax (appart that this page should not be accessed directly but through the main page)?
But then what happens when a user starts off on
A.html, then goes toB.html, and then refreshes the page? jQuery Mobile uses apushStateplugin that updates the URL as if the user had gone to theB.htmlpage normally. This means that if the user refreshes onB.html, there won’t be the proper includes to create your mobile site if it’s not a full document.My recommendation is to include the jQuery Mobile JS/CSS files in each document, to include the jQuery Core JS file in each document, and to include external custom JS/CSS files that holds all the necessary JS and CSS for your site. This way no matter what page in your site the user accesses, it will include all the necessary information. This doesn’t add a whole lot of bloat to your site, just a few lines of includes per page. Most of the time all of those includes will be ignored when jQuery Mobile pulls a page into the DOM via AJAX (jQuery Mobile only grabs the first
data-role="page"element and it’s contents, everything else in the document is ignored).Long Story Short:
The performance benefit to omitting a proper HTML structure to each document is not worth possibly breaking your user’s experience for common occurrences such as refreshing a page (which happens automatically on many devices when a user opens the browser to an already open page).
A major con for not using a valid HTML structure is that you’re hurting your SEO. The meta tags in the
<head>of the documents should still be unique to the content in the page, so that search engine crawlers can properly index your site.