What are HTTP headers?

HTTP headers are a fundamental part of how web browsers and servers communicate. They carry essential metadata about requests and responses. For example, they help browsers understand how to interpret responses and whether they can store responses in the browser cache for better page performance.

This article takes a look at common HTTP headers and how you can view header values for any website.

HTTP headers explained

HTTP headers are metadata fields that are sent along with HTTP requests and responses between a client (like a web browser) and a server. They provide essential information about the request or response, or about the data being transmitted.

Headers work in pairs of name and value, separated by a colon. For example:

Content-Type: text/html
Cache-Control: max-age=3600

There are two main types of HTTP headers:

• Request headers: Sent by the client to the server with each request. These headers provide information about the client, the requested resource, or the type of response the client can accept.
• Response headers: Sent by the server back to the client. These headers provide information about the server, the response, or the resource being returned.

HTTP headers serve many purposes, including:

• Controlling caching behavior
• Managing authentication and security
• Specifying content types and encoding
• Setting cookies
• Enabling compression
• Managing CORS (Cross-Origin Resource Sharing)
• Providing information for debugging and analytics

Examples of HTTP headers

Let's take a look at some common HTTP headers.

Request Headers

User-Agent

Identifies the browser or client making the request. This helps servers understand what type of device and browser is accessing the site, which can be useful for analytics or serving different content to different devices.

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

This example shows a Chrome browser with version 140 running on a Mac.

tip

User agents often contain references to other browsers than the browser requesting the resource. This is due to legacy reasons, where some servers require a certain string to be present in order to work.

Accept

Tells the server what content types the client can understand. The server can use this to determine the best format to send the response in.

Accept: text/html, application/json

This means the browser can accept both HTML and JSON responses.

Cookie

Sends stored cookies to the server. Cookies are often used for session management, user preferences, and tracking.

Cookie: session_id=abc123; user_pref=dark_mode

This sends two cookies: a session ID and a user preference for dark mode.

Referer

Indicates the URL of the page that linked to the current resource. This helps servers understand where traffic is coming from.

Referer: https://example.com/page1

This means the user clicked a link on https://example.com/page1 to reach the current page.

tip

Web developers can use the rel="noreferrer" attribute on <a> tags to tell the browser to omit the Referer header.

Response Headers

Content-Type

Specifies the media type of the resource being returned. This tells the browser how to interpret and display the content.

Content-Type: application/json; charset=utf-8

This means the response contains JSON data encoded in UTF-8.

Cache-Control

Controls how the response should be cached by browsers and intermediate caches like CDNs. This is one of the most important headers for web performance, as it reduces page weight for subsequent visits, causing websites to load faster.

Cache-Control: max-age=3600, public

This means the response can be cached for 3600 seconds (1 hour) and can be stored by any cache, including CDNs. Learn more in our Cache-Control header guide.

Set-Cookie

Sends cookies from the server to the client. The browser will store these cookies and send them back with future requests to the same domain.

Set-Cookie: session_id=abc123; HttpOnly; Secure

This creates a cookie named session_id with value abc123. The HttpOnly flag prevents JavaScript from accessing it (for security), and Secure means it will only be sent over HTTPS connections.

Content-Encoding

Indicates the compression algorithm applied to the response body. HTTP compression reduces the amount of data transferred, improving page load time.

Content-Encoding: gzip

This means the response has been compressed using gzip, and the browser needs to decompress it before using it.

Content-Security-Policy

Defines security policies for content loading, helping prevent cross-site scripting (XSS) attacks and other security vulnerabilities.

Content-Security-Policy: default-src 'self'

This means the page can only load resources (scripts, images, etc.) from the same origin as the page itself.

Are HTTP headers case sensitive?

HTTP header names are case-insensitive according to the HTTP specification. This means that Content-Type, content-type, and CONTENT-TYPE are all treated as the same header.

However, header values may be case-sensitive depending on the specific header. For example:

• The value of Content-Type: text/html is case-insensitive (you could write TEXT/HTML)
• Cookie names and values are generally case-sensitive
• Authorization tokens are case-sensitive

tip

While header names are case-insensitive, it's a common convention to use Title-Case formatting (also called Pascal-Case with hyphens) for HTTP headers, such as Content-Type and Cache-Control. This improves readability and is the standard format used in HTTP specifications.

How to view HTTP headers

Understanding what headers are being sent and received is often helpful for debugging. Here are several ways to view HTTP headers, for example you can use:

• An online header checker
• Chrome DevTools
• The DebugBear website test

HTTP header checker

DebugBear provides a free HTTP Header Checker tool that allows you to enter a page URL and view the headers returned by the server.

This is a quick way to check headers for a specific page. Hover over the question marks to view a tooltip that explains the role of the HTTP header.

Chrome DevTools

Chrome's developer tools can show all requests made on a page as part of the Network tab. You can expand each request there to view more information including request headers.

To view headers in Chrome:

1. Right-click the page and select Inspect
2. Switch to the Network tab
3. Reload the page to see all network requests
4. Click on a request in the list

You'll see both request headers (sent to the server) and response headers (received from the server).

Provisional headers are shown

Sometimes DevTools shows a message saying that only provisional request headers are available. This can happen for a number of reasons:

• The response was served from a local cache or web worker
• An extension blocked the request (for example an ad blocker)

In general, seeing provisional headers suggests that Chrome didn't make a network request to the server.

DebugBear website test

Our free website speed test lets you test your page speed and lists all resources that were loaded as part of the request waterfall.

To view request and response headers:

1. Open the Requests tab
2. Click on the request to expand it
3. Select the Headers view

If you use DebugBear synthetic website monitoring you can also track your website's headers over time and check changes using Compare mode.

That way you can identify new and removed headers or see how header values have changed between two test results.

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

• In-depth Page Speed Reports
• Automated Recommendations
• Real User Analytics Data

Start Free TrialGo To App