The only time I think I’ve seen the piece of markup below used in real life is in the context of a Single Page Application:
What I hadn’t realized, until yesterday, is that if you’re at a page like this:
And there’s a relative image referenced in the DOM like this:
Then that will normally resolve in an HTTP request to
https://example.com/user/12335/edit/avatar.png but if you have
<base> element defined like above, then that will resolve in an HTTP request to
https://example.com/avatar.png. It’s always a funny feeling when you learn something fundamental about something you’ve been familiar with for ages but haven’t given any thought to.