Skip to main content

src (HTML attribute)

By Adam Roberts



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95


The src attribute instructs the browser where on the server it should look for the image that’s to be presented to the user. This may be an image in the same directory, an image somewhere else on the same server, or an image stored on another server.

The example refers to an image that’s located in the same directory as the web page that’s calling it, but if the image was stored in a directory that was one level higher than the referencing document, the syntax would be as follows:

<img src="../giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>

Here, ../ equates to “move up one directory in the hierarchy.”

You can also reference an image relative to the web site’s root (that is, any file or folder after the domain name):

<img src="/giant-prawn.jpg" alt="The Giant Prawn at Ballina"/> 

This basically means “display the image giant-prawn.jpg that can be found in” This is a very handy way of referencing the file, as you could move the document that referenced the image to any location on the file system without breaking the link.

If you’re referencing an image that’s held on another server, you’d express the src using a complete URI, as follows:

<img src=""
    alt="The Giant Prawn at Ballina"/> 


The src attribute for this image shows that the image is located in the same directory as the web page:

<img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>


This attribute takes as its value the location of the image relative to the referencing document, relative to the server root, or as a complete URI containing the http:// protocol, the server name, and the path to the document on that server.

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!

Google, Netflix and ILM are Python users. Maybe you should too?