Description
Thesrc
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 www.example.com/.” 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="http://www.example.com/giant-prawn.jpg" alt="The Giant Prawn at Ballina"/>
Example
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"/>
Value
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 thehttp://
protocol, the server name, and the path to the document on that server.
Frequently Asked Questions (FAQs) about SRC HTML Attribute
What is the SRC attribute in HTML and how is it used?
The SRC attribute in HTML is used to specify the source of an embedded content. It is commonly used in tags like , <script>, <iframe>, and to provide the URL of the content that should be embedded. For instance, in an tag, the SRC attribute is used to provide the URL of the image that should be displayed.
Can the SRC attribute be used with all HTML tags?
No, the SRC attribute cannot be used with all HTML tags. It is specifically used with tags that embed external content, such as , <script>, <iframe>, and . Using the SRC attribute with other tags that do not support it will result in an HTML validation error.
What happens if the SRC attribute is not specified in an tag?
If the SRC attribute is not specified in an tag, the browser will not be able to locate and display the image. Instead, it will display the alternative text specified in the ALT attribute, if provided. If the ALT attribute is also not provided, it will display an empty box in place of the image.
Can the SRC attribute be used to embed content from different domains?
Yes, the SRC attribute can be used to embed content from different domains. However, this is subject to the same-origin policy and CORS (Cross-Origin Resource Sharing) settings of the browser and the server hosting the content.
How can I specify multiple source files using the SRC attribute?
The SRC attribute can only specify one source file. However, you can use the
Can I use relative URLs with the SRC attribute?
Yes, you can use relative URLs with the SRC attribute. Relative URLs are URLs that are relative to the current document. For instance, if you have an image in the same directory as your HTML file, you can simply specify the image file name in the SRC attribute.
What is the difference between the SRC and HREF attributes?
The SRC and HREF attributes are both used to specify the source of a content. However, the SRC attribute is used to embed the content within the document, while the HREF attribute is used to link to the content.
Can I use the SRC attribute to embed audio and video files?
Yes, you can use the SRC attribute to embed audio and video files using the
What is the maximum file size that can be embedded using the SRC attribute?
There is no specific maximum file size for content embedded using the SRC attribute. However, larger files may take longer to load and may impact the performance of your webpage. It is recommended to optimize your files for web use.
Can I use the SRC attribute to embed content from a secured (HTTPS) website into a non-secured (HTTP) website?
While it is technically possible to embed content from a secured (HTTPS) website into a non-secured (HTTP) website using the SRC attribute, it is not recommended due to security concerns. This can lead to mixed content warnings in the browser and may impact the security and user experience of your website.
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.