Open In App

HTTP headers | Content-Type

Last Updated : 29 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

The Content-Type header is used to indicate the media type of the resource. The media type is a string sent along with the file indicating the format of the file. For example, for image file its media type will be like image/png or image/jpg, etc.

In response, it tells about the type of returned content, to the client. The browser gets to know about the type of content it has to load on the machine. Every time its byte stream of the file that browsers receive, by the Content-type header, the browser will do something known as MIME sniffing i.e. it will inspect the stream it is receiving and then loads the data accordingly.

Syntax:

Content-Type: text/html; charset=UTF-8
Content-Type: multipart/form-data; boundary=something

Directives: There are three directives in the HTTP headers Content-type.

  • media type: It holds the MIME (Multipurpose Internet Mail Extensions) type of the data.
  • charset: It holds the character encoding standard. Charset is the encoding standard in which the data will be received by the browsers.
  • boundary: The boundary directive is required when there is multipart entities. Boundary is for multipart entities consisting of 70 characters from a set of characters known to be very robust through email gateways, and with no white space.

Example: This example display how the images are read by browser with and without setting the Content-type header.




<?php
  
header('Content-type: image/jpeg');//with header Content type 
  
?>


Output :

Now without using Content-type header we will get the content of the image in bytes, So it is not of any use to us.




<?php
  
// Without header
?>


Output:

?PNG  IHDRX??'?iCCPsRGB IEC61966-2.1(?u??+DQ??3????????????63??P????H?U????l??RDJV???9oF?
$sn????{N???pZ??^?d?Z(p?E?]??h??QEW?f??T??{, f???????????z?aE??????y???6%]>vkrA?;S?????d??M?
¡?6???`%?????&???Q-Z?j????BSZo?a???}N ?._u {??#??N?g?{-bKGD??????? pHYs.#.#x??vtIME?4_?X 
IDATx??w?U??????MB$??$@@? 2t?"EDa???"? C?*C????Hq?ja??w ????????L{??}?}??w?;??{???{.4, ???j???
q10??_??h2]`P??:^?5??@?W?=????????XY??? w.??9??`z?1?!V??B????XM~^?|?1?qm???(?h??C?OV?js{e?+ 
L?b?{%?@`?+:sQ?@?

Here, it is clearly visible that by applying the Content-type header information tells the browser, the type of response it is getting from the server.

All possible values of HTTP Content-type header:

Type Values
Application application/EDI-X12
application/EDIFACT
application/javascript
application/octet-stream
application/ogg
application/pdf
application/xhtml+xml
application/x-shockwave-flash
application/json
application/ld+json
application/xml
application/zip
application/x-www-form-urlencoded
Audio audio/mpeg
audio/x-ms-wma
audio/vnd.rn-realaudio
audio/x-wav
Image image/gif
image/jpeg
image/png
image/tiff
image/vnd.microsoft.icon
image/x-icon
image/vnd.djvu
image/svg+xml
Multipart multipart/mixed
multipart/alternative
multipart/related (using by MHTML (HTML mail).)
multipart/form-data
Text text/css
text/csv
text/html
text/javascript (obsolete)
text/plain
text/xml
Video video/mpeg
video/mp4
video/quicktime
video/x-ms-wmv
video/x-msvideo
video/x-flv
video/webm
VND application/vnd.oasis.opendocument.text
application/vnd.oasis.opendocument.spreadsheet
application/vnd.oasis.opendocument.presentation
application/vnd.oasis.opendocument.graphics
application/vnd.ms-excel
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
application/vnd.ms-powerpoint
application/vnd.openxmlformats-officedocument.presentationml.presentation
application/msword
application/vnd.openxmlformats-officedocument.wordprocessingml.document
application/vnd.mozilla.xul+xml

Supported Browsers: The browsers compatible with HTTP headers Content-type are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



Similar Reads

HTTP headers | X-Content-Type-Options
The HTTP headers X-Content-Type-Options acts as a marker that indicates the MIME-types headers in the content types headers should not be changed to the server. This header was introduced in the Internet Explorer 8 of Microsoft. This header block the content sniffing (non-executable MIME type into executable MIME type). After that, all the other br
1 min read
HTTP headers | Access-Control-Expose-Headers
The HTTP Access-Control-Expose-Headers header is a response header that is used to expose the headers that have been mentioned in it. By default 6 response headers are already exposed which are known as CORS-safelisted response headers. They are namely- Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma. Syntax: Access-Co
1 min read
HTTP headers | Access-Control-Allow-Headers.
The HTTP Access-Control-Allow-Headers header is a response-type header that is used to indicate the HTTP headers. It can be used during a request and is used in response to a CORS preflight request, that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers, which includes the Access-Control-Reque
1 min read
HTTP headers | Access-Control-Request-Headers
Access-Control-Request-Headers is a request-type header used by browsers that contains information about the different HTTP headers that will be sent by the client in the ensuing request. Whenever a client initiates a request to a server, the browser checks if the request needs a CORS preflight or not. In case a CORS preflight request is required,
2 min read
HTTP headers | Content-Range
The Content-Range HTTP header is a response header that indicates where a partial message belongs in a full body massage. This header is sent with a partial entity-body to specify where in the full entity-body the partial body should be applied. Syntax: Content-Range: &lt;unit&gt; &lt;range-start&gt;-&lt;range-end&gt;/&lt;size&gt; Content-Range:
1 min read
HTTP headers | Content-Encoding
The HTTP headers Content-encoding is used to compress the media type. It informers the server which encoding the user will supported. It sends the information to the Accept-encoding. The server selects any one of the proposals, uses it and informs the client of its choice with the Content-Encoding response header. Syntax: Content-Encoding: gzip | c
2 min read
HTTP headers | Content-Language
HTTP headers are used to provide additional information in HTTP request and HTTP response. HTTP headers Content-Language is used to define, which language speaker document is intended to. It doesn't define the language of the document. In case this header is not specified, it is assumed that the document is intended for all language speakers. Synta
1 min read
HTTP headers | Content-Length
HTTP headers are used to pass additional information in HTTP request or HTTP response. HTTP Content-Length entity-header is used to indicate the size of entity-body in decimal no of octets i.e. bytes and sent it to the recipient. It is a forbidden header name. Basically it is the number of bytes of data in the body of the request or response. The b
1 min read
HTTP headers | Content-Security-Policy-Report-Only
The HTTP Content-Security-Policy-Report-Only response header allows the web developers to test the policies by keeping an eye on their effects. These violation reports consist of JSON documents sent through HTTP POST request to the specified URI. It is a response-type header Syntax: Content-Security-Policy-Report-Only: &lt;policy-directive&gt; Dire
3 min read
HTTP headers | Content-Location
The HTTP Content-Location header is an entity-header that gives another location for the data that is returned and also tells how to access the resource by indicating the direct URL. Its usage is often confused with another HTTP Header which is Location. The main difference between them is that Location gives the URL of the resource where the redir
1 min read