What they actually are
Both are containers, not codecs - a wrapper holding a video stream, an audio stream and metadata. What is inside matters more than the extension.
An MP4 almost always contains H.264 video and AAC audio. That combination has hardware decoding built into practically every phone, laptop, smart TV and set-top box made in the last fifteen years, which is why it plays everywhere without spinning up the CPU.
A WebM normally contains VP9 (or increasingly AV1) with Opus audio. These are royalty-free, which is exactly why Google built the format and why the open web adopted it. VP9 typically delivers the same perceived quality as H.264 at roughly 30–50% less data.
Where MP4 is the right answer
Uploading to a social platform. Every network accepts MP4, and several either reject WebM or silently re-encode it, which costs you a generation of quality for nothing.
Sending a file to someone else. MP4 opens on a colleague's Windows laptop, an iPhone, a TV stick and an editing timeline without a conversation about codecs.
Anything that will be edited later. Editing software support for H.264 is universal; VP9 support is patchier and often slower to scrub.
Where WebM is the right answer
Embedding video directly on your own website. A WebM served to modern browsers loads meaningfully faster than the equivalent MP4, and page speed is a real ranking factor.
Background loops and short autoplay clips, where the file is downloaded before anything plays and every kilobyte shows up in load time.
Anywhere you control the playback environment and know it is a current browser.
The quality question
Converting between them is not free. Both are lossy formats, so a round trip - MP4 to WebM and back - throws away detail twice. If you have the original, always convert from that rather than from an already-converted copy.
If you need a genuinely lossless intermediate, neither of these is it: that is what ProRes and similar editing codecs exist for, at enormous file sizes.
The short version
Publishing to a platform or sending to a person: MP4. Embedding on a site you control: WebM. If you are unsure, MP4 - the compatibility is worth more than the megabytes.