In this post:
- The <img> tag
1. The <img> tag
<img src="" width="" height="" alt="" border="" />
The image tag creates an inline element, that is, it does not occupy the full with of the page (as for example the paragraph and heading tags do). It should always be nested between a structural element.
Like all HTML tag attributes, the image tag attributes are expressed as
attribute="value" pairs. Some are required, others are optional.
src attribute is a required attribute — the image tag would be pretty useless without “knowing” which image to display. The
src attribute must contain the full image name, including the file extension.
If the image file is not in the same directory as the HTML file then the attribute must include the path to the image. This path could be relative or fully qualified.
<!-- relative path - image is in subfolder called "images" in the website folder --> <img src="images/my-image.png /> <!-- fully qualified URL - image is on a different server --> <img src="http://cdn-stylus.co.za/my-image.png />
Read the post Organising website assets for more information on relative paths for your images.
2.2 Alt text
alt attribute allows the image to be described in words. The main reason for doing this is accessibility. A screen reader will read out the
alt text when it reaches the image. The
alt text should be in the form of a complete English sentence — including punctuation.
In the event that an image has been correctly coded, but is not displayed in the browser for any reason (the image file is missing or blocked by a browser setting) then the alt text will be displayed (see before/after screenshots in the next section).
Before I explain the correct use of the width and height attributes, let me explain what they are not used for as the following is a common error: they are not used to change the size of the image on the page. You can for instance take a large image and code its displayed size by changing the width and height dimensions in your code. This will “work”, but it is incorrect and as a result, you will be awarded no marks.
Read the post Editing images for your website to learn how to resize images for your website.
<img ... width="100" height="100" />
height attributes serve a very specific purpose: it is not to set the size of the image on the page, it is so that the browser knows how much space to reserve for the image when it draws the page and the image file itself is not available. An image may still be downloading, it may not be available (incorrectly coded, mistakenly deleted or relocated on the server) or the user may have blocked images in the browser settings.
By default, width & height are measured in pixels and expressed as integer values with no unit (there are other units of measurement). The physical dimension of an image can be discovered in the following manner:
- Right-click on the image file and select the Properties option
- Select the Details tab
- Check the Dimensions in the Image section
The two images in the compare image widget below illustrate this point. In both pictures the image file itself is missing from the web page, however, on the page on the left, the width and height attributes have been left out of the code, and on the right, the attributes have been included. As you swipe the before/after handle, notice how the text on the page shifts as space is made on the right for the image.
The code in both pages below is correct resulting in no difference in the layout of the page regardless of whether the image is displayed or not.
<img ... border="1" />
border attribute adds a border around the image. This attribute is deprecated in HTML5.
2.5 Horizontal alignment
<img ... align="right" />
align attribute can have the following values:
absmiddle. If you use right as in the code above, the image will be aligned to the right and text will be caused to wrap around the left side of it.
2.6 Vertical alignment
The Codepen below clearly demonstrates the different options, with
bottom being the default vertical alignment.
Of course, CSS offers much more control and many more options. Read my CSS primer here.