Reload part of the page

Question

There are actually two different problems here:

How to load content from the server and display it in the existing page, without reloading the whole page
How to make it look like you are on a new URL, without reloading the page

Neither of these have anything to do with .htaccess (by which is generally meant Apache's mod_rewrite module) because they are both about how the client is behaving, not the server.

The first part is generally referred to as "AJAX", about which you will find tons of information online. The "X" originally stood for "XML", but actually you can fetch whatever kind of data you want, such as plain text, or a piece of ready-made HTML, and use JavaScript to put it into place on your page. The popular jQuery library has a method called .load(), which makes a request to the server, and uses the response to replace a particular part of the page.

The second part is a little trickier - since the page hasn't actually been reloaded, you essentially want the browser to lie about the current URL. The reason you will see a lot of examples changing only parts of the URL after the # is precisely because these aren't sent to the server; traditionally, they're used to scroll the current page to a paticular "anchor". You can therefore change them as often as you like, and if the user bookmarks or shares your page, you can look at the part after the # and re-load the state they bookmarked/shared.

However, as part of the "HTML5" group of technologies, an ability was added to change the actual URL bar of the browser, by "pushing a state" to the history object. In other words, adding an entry to the back/forward menu of the browser, without actually loading a new page. There are obvious security restrictions (you can't pretend the user navigated to a completely different domain), but the API itself is quite simple. Here is the MDN documentation explaining it.

For your simple example, assuming jQuery has been included, you might do something like this:

// Find the div with a jQuery selector; this would be more specific in reality
jQuery('div')
    // Request some text from the server to replace the div
    .load(
        // This URL can be anything that generates the appropriate HTML
        '/ajax.php?mode=div-content&stage=second',

        // Add a callback function for when the AJAX call has finished
        function(responseText, textStatus, XMLHttpRequest) {
            // Inside the callback function, set the browser's URL bar
            // and history to pretend this is a new page
            history.pushState({}, '', '/second/');
    }
);

Note that jQuery is far from the only way of doing this, it just keeps the example simple to make use of an existing function that does a lot of the work for us.