How to insert an image with HTML

Techwalla may earn compensation through affiliate links in this story.
Add images to your Web pages using HTML.
Image Credit: Courtesy of Microsoft

Spice up your websites by adding images to them. You can insert images into HTML files using the tag, which you use to specify the location of the image on the Internet, the height and width of the image and alternative text that shows up if the image doesn't load or if someone uses a screen reader to view the page. Three common image file types used on the Web are GIF, PNG and JPEG.

Advertisement

Step 1

Open an HTML file.
Image Credit: Courtesy of Microsoft

Open the HTML file for the Web page you want to add an image to in a text editor like Notepad or Web development software.

Step 2

Add an <img> tag and specify the image's source, src.
Image Credit: Courtesy of Microsoft

Add an tag to the file. Place the tag after the element you want an image to appear under when the HTML file is opened in a browser. The tag does not have a separate closing tag. Within the tag, you must specify the source of the image you want to display by typing the image's location on the internet with the src attribute. If the image is stored in the same folder as the HTML file, type the image's name and extension. If the image is stored elsewhere, type the full URL of the image.

Advertisement

Step 3

Add descriptive text with the alt attribute.
Image Credit: Courtesy of Microsoft

Add the alt attribute to your tag. In HTML5, the alt attribute is required. Use this attribute to describe the image in case it cannot load. If an image cannot load, the browser displays the text you enter after the alt attribute. In addition, the alt attribute is important for screen reader software used by people with visual disabilities. The software reads the text in the alt attribute so that the person with a visual disability viewing your website can hear what is in the picture even though they can't see it.

Advertisement

Step 4

Add height and width values.
Image Credit: Courtesy of Microsoft

Specify the image's dimensions in pixels with the height and width attributes. If you don't specify the dimensions, the browser does not know how much space to leave for the image as the page loads. This results in a page loading choppily, as the text loads first, leaving a small space for the image, then jumps apart as the image loads and causes the space to expand. With the dimensions specified, the browser leaves exactly the right amount of space between the other elements on the page for the image to fill in when it has finished loading.

Advertisement

Step 5

Load the HTML file into a browser to test the image.
Image Credit: Courtesy of Google

Test your code to be sure the image displays in the right location by opening your HTML file in a browser.

Tip

Use CSS to move an image to the left or right side of the screen or have text wrap around it. For example, you can use style="float:left;" or style="float:right;" within the tag.

If you don't know both the height and width of an image, it is fine to just use either the height or width attribute alone. You can also use CSS to specify the height and width; for example, with a 100 by 100 pixel image, use the style attribute: style="height:100px;width:100px."

Make the image into a clickable link by placing the tag within an "a href" tag pair. For example, if you want an image to link to Facebook, type the following.

Description

Warning

Don't use the alt attribute to try to boost your page's SEO. Search engines have long been aware that some Web designers try to stuff the alt attribute with extra keywords, and therefore they ignore the text in the alt attribute.

Advertisement

references