When you open a webpage in your browser, HTML is usually delivered inside HTTP messages between your browser (client) and the website’s server.
HTTP messages are part of the client-server communication model.
1. What Are HTTP Messages?
HTTP messages are the formatted blocks of data exchanged between:
- Client → usually your web browser.
- Server → the machine hosting the website.
There are two main types:
- HTTP Request messages → sent by the browser to the server.
- HTTP Response messages → sent by the server back to the browser.
2. HTTP Request Messages
A request message asks the server for some resource (e.g., an HTML page, CSS file, image).
Structure:
<request-line>
<headers>
<blank line>[optional body]
Example – Requesting index.html:
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
- Request line:
GET /index.html HTTP/1.1→ method, path, protocol version. - Headers: Metadata like
Host,User-Agent,Accept. - Body (optional): Only for methods like
POSTorPUT(e.g., sending form data).
3. HTTP Response Messages
A response message contains the resource (like HTML content) and status information.
Structure:
<status-line>
<headers>
<blank line>[body]
Example – Server responds with HTML:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 125
<!DOCTYPE html>
<html>
<head><title>Example</title></head>
<body>Hello, World!</body>
</html>
- Status line:
HTTP/1.1 200 OK→ protocol version, status code, reason phrase. - Headers: Info like content type, length, caching instructions.
- Body: Actual content (HTML, JSON, image, etc.).
4. Common HTTP Methods in HTML Requests
| Method | Purpose | Example Use in HTML |
|---|---|---|
GET | Retrieve data | Loading a webpage (<a>, <img>, <link>) |
POST | Send data | HTML forms (<form method="post">) |
PUT | Update a resource | JavaScript fetch() |
DELETE | Remove a resource | JavaScript fetch() |
HEAD | Get headers only | Checking if resource exists |
5. How HTML Fits into HTTP Messages
- When you request a webpage, HTML is inside the body of the HTTP response.
- HTML elements like
<form>,<a>,<img>, and<script>trigger new HTTP requests for resources.
Example flow:
- Browser sends HTTP request:
GET /index.html - Server responds with HTML in the HTTP response body.
- Browser parses HTML → sees an
<img src="logo.png">tag → sends another HTTP request forlogo.png.
