How to tell the browser to cache a specific element in HTML document

Question

I generate output with php. I've been reading about caching HTML elements (e.g. images, text) in the browser so that these don't have to be reloaded.

However, I haven't found the right directions on how to get it done. It's like "simply cache the elements you want and you're done!" - great, but how do I cache something like this:

<div id="ubiquitous_heading">
    <img src="logo.png" alt="logo" />
    <span>Welcome to this dummy website</span>
</div>

Is there a header that can target HTML elements and designate what to cache and what not? I'm referring to something structured like:

#ubiquitous_heading {
   cache: yes;
}
#no_cache_please {
   cache: no;
}

Is there a way to do that? What exactly do people mean when they say "you can cache a specific element in your HTML?" referring to every element (including links to css, js).

Thank you for clearing this up for me.

Answer 1

You can only cache responses to HTTP requests, not parts of them. In theory, you could place a shared header in a frame and have it cached, but most often it'll be messier and not really worth the trouble. What you can and should cache is images, scripts and stylesheets; generally, all external resources which are static and fetched in a separate request.

Answer 2

Only resources can be cached. Your standard web request has the following resources:

• html page(s)
• script files
• stylesheets
• images
• fonts (hopefully coming soon!)

Any and all of these can be cached, however, you cannot cache part of one resource at the browser level (e.g. one rule in a stylesheet, or one element in an html page).

Answer 3

Check out this question as well.