Plain HTTP is readable by anyone on the path: the café Wi-Fi, your internet provider, any router in between. They could also change it. HTTPS is HTTP inside TLS (Transport Layer Security), which fixes both: the traffic is encrypted so it can't be read, and checked so it can't be changed without it being noticed.
Encryption alone isn't enough: you also need to know you're talking to the real site, not someone pretending. So the server shows a certificate: a document that says "this key belongs to quackgames.net", signed by a certificate authority (CA). Your browser and operating system come with a list of CAs they trust, and check the signature, the name and the expiry date. If anything doesn't match, you get a full-page warning.
The TLS handshake goes roughly like this: the browser says hello and which ciphers it supports; the server replies with its certificate; the two do a key exchange, a clever bit of maths that lets them agree on a shared secret key even though anyone could be listening; and from then on everything is encrypted with that key. TLS 1.3 does all this in one round trip.
The padlock means the connection is private and the site is who the certificate says. It doesn't mean the site is honest: a scam site can get a certificate for its own name. HTTPS also doesn't hide everything. The path, the page and your cookies are encrypted, but your network can still see which IP address you're talking to, and usually the site's name too.
Certificates are free now (Let's Encrypt gives them out automatically), so nearly every site uses HTTPS. Browsers mark plain HTTP pages "Not secure".
What does HTTPS add to HTTP?
| HTTPS | HTTP inside TLS. Port 443. |
|---|---|
| TLS | Encrypts and checks the connection. |
| Certificate | "This key belongs to this name", signed by a CA. |
| CA | Certificate authority; browsers trust a list of them. |
| Key exchange | Agrees a secret key in public. |
| Padlock | Private connection to that name, not an honest site. |