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

I generate output with php. I've been reading about caching HTML el开发者_运维知识库ements (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.

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.

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).