How to Insert Pictures Into XHTML
XHTML has a stricter syntax than HTML. Unlike HTML, all XHTML tags must be properly ordered, closed and written in lowercase. Fulfill these requirements when inserting a picture into an XHTML document. Also learn to use image attributes correctly. Improper use of images and their attributes may pass for valid even under strict XHTML standards, yet they can have awkward results. Always preview your webpages in web browsers to make sure you achieve the look you want.
Other People Are Reading
Instructions
-
-
1
Open the XHTML document in a text editor. Scroll down the XHTML page to where you want to insert a picture.
-
2
Enter the image element tag or IMG tag with the attributes "src" and "alt." Type all characters in lowercase:
<img src="" alt="" >
-
-
3
Enter the values for the XHTML attributes. The "src" attribute must contain the source or location of the image:
<img src="pictures/xhtml.jpg" alt="" >
-
4
Type a text label for the image in the "alt" if you want an alternate text to appear in case the image is not displayed (for example, if the user's browser has images disabled). Leave the "alt" blank for decorative items like bullets:
<img src="pictures/xhtml.jpg" alt="XHTML Compliant" >
-
5
Add a forward slash or "/" at the end of the image tag:
<img src="pictures/xhtml.jpg" alt="XHTML Compliant" />
If you forget to add this character, the code will be invalid according to XHTML standards.
-
6
Add the width and height attributes if desired. The width will tell a web browser how wide the picture is; the height describes how tall it is:
<img src="pictures/xhtml.jpg" alt="XHTML Compliant" height="115" width="125" />
-
7
Save the XHTML document. Upload to your website using your web host's file upload tool or an FTP client. View the webpage with a web browser to verify that the image is displayed properly.
-
1
Tips & Warnings
Use an XHTML code validator to check your code for errors (see Resources).
