HTML5 website coding

The WWW is largely a visually rich experience. A single HTML web page can be (and usually is) made up of more than just one single HTML file. The page often includes numerous images and even videos, as well as CSS & JavaScript files. Web pages load progressively, that is: content is often displayed by the browser before all the assets are downloaded.

In this post:

  1. The <img> tag
  2. Attributes
    1. Dimensions
    1. Source
    2. Alt text
    3. Dimensions
    4. Borders
    5. Horizontal alignment
    6. Vertical alignment

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.

2. Attributes

Like all HTML tag attributes, the image tag attributes are expressed as attribute="value" pairs. Some are required, others are optional.

2.1 Source

It is best practice for image file names to be all lowercase, to not start with a number and to include no spaces or special characters.

The 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

The 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).

2.3 Dimensions

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" />

Adding the width & 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:

Windows File properties
  1. Right-click on the image file and select the Properties option
  2. Select the Details tab
  3. 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.

HTML image missing from page when image dimensions are excluded.HTML image missing from page when image dimensions are included.

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.

HTML image missing from page when image dimensions are included.HTML image correctly coded.

Deprecated means the element or attribute is outdated.

2.4 Borders

<img ... border="1" />

The border attribute adds a border around the image. This attribute is deprecated in HTML5.

2.5 Horizontal alignment

See the Pen HTML Images by David Fox (@foxbeefly) on CodePen.

<img ... align="right" />

The align attribute can have the following values: left, right, 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.

See the Pen HTML basics: <img> vertical alignment by David Fox (@foxbeefly) on CodePen.


Of course, CSS offers much more control and many more options. Read my CSS primer here.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.