HTTP / TLS protocols — Simple

flowchart LR
  C([Client])
  H1[HTTP 1.1<br/>text, keep-alive]
  H2[HTTP 2<br/>binary, multiplex over TCP]
  H3[HTTP 3 - QUIC<br/>multiplex over UDP]
  T[TLS 1.3<br/>1-RTT or 0-RTT]
  S[Server]
  C --> T --> H1
  C --> T --> H2
  C --> T --> H3
  H1 --> S
  H2 --> S
  H3 --> S

    classDef client fill:#dbeafe,stroke:#1e40af,stroke-width:1px,color:#0f172a;
    classDef edge fill:#cffafe,stroke:#0e7490,stroke-width:1px,color:#0f172a;
    classDef service fill:#fef3c7,stroke:#92400e,stroke-width:1px,color:#0f172a;
    classDef datastore fill:#fee2e2,stroke:#991b1b,stroke-width:1px,color:#0f172a;
    classDef cache fill:#fed7aa,stroke:#9a3412,stroke-width:1px,color:#0f172a;
    classDef queue fill:#ede9fe,stroke:#5b21b6,stroke-width:1px,color:#0f172a;
    classDef compute fill:#d1fae5,stroke:#065f46,stroke-width:1px,color:#0f172a;
    classDef storage fill:#e5e7eb,stroke:#374151,stroke-width:1px,color:#0f172a;
    classDef external fill:#fce7f3,stroke:#9d174d,stroke-width:1px,color:#0f172a;
    classDef obs fill:#f3e8ff,stroke:#6b21a8,stroke-width:1px,color:#0f172a;
    class C client;
    class H1,H2,H3,T,S service;

Three generations of HTTP solve the same problem at different layers: HTTP/1.1 is text + connection-per-request, HTTP/2 multiplexes streams over one TCP connection, HTTP/3 moves multiplexing to QUIC over UDP to avoid head-of-line blocking.