Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Introduction to Web Development. Join the course to learn more.
Robot looking at a magazine called 'HTML Style', with subheadings 'This seasons font colours', 'Alter your image size' and 'Change the appearance of your elements'

HTML attributes

Last week I introduced you to some HTML attributes. In this step you are going to learn about other attributes and how they can engage visitors to your website.

All HTML elements can have attributes that provide additional information about an element. You can use attributes to:

  • Change the appearance of that element
  • Link the element to another webpage
  • Change the size of the element
  • Include alternative text for images, for screen readers to use

Where tags come in pairs, attributes are always placed in the opening tag.

  1. Use your version of the Raspberry Pi Fan Club page or create a copy of this Trinket.
  2. Can you recognise where the following attributes are used?
Attribute Description
href Gives the URL for a link
src Gives the source location for an image

Height and width of images

With an attribute you can control some aspects of the element. For example, when working with images, it is important to be able to resize an image from its original dimensions. This will allow you to make the image larger or smaller, depending on its purpose.

The code below uses the height and width attributes to resize the image to 200 pixels by 200 pixels:

<img src="/Raspberry-Pi-4-hero-shot.jpg" width="200px" height="200px">

The number after the attribute represents the number of pixels for the height or width attribute. A pixel is a point of colour. Lots of pixels are combined to form a digital image. The size of a pixel varies by device; a 24” screen will have bigger pixels than a 20” monitor running the same resolution (number of pixels).

Alt attribute

In a previous step you debugged a webpage and corrected a broken link to an image. If this happens on your website, no image will be displayed and the browser may display the alt, or alternative text, which is set using the alt attribute.

The HTML below for an image shows the alt attribute being set to describe the image:

<img src="girlsclimatechange.png" alt="Two girls at a climate change protest holding a banner that has an image of the world with the writing 'The seas are rising but so are we!'">

Two girls at a climate change protest holding a banner that has an image of the worlds with the writing "The seas are rising but so are we!"

The text in the alt attribute will also be read by screen-reading software so that a visually impaired visitor to your website can listen to a description of your image.

Title

The reason to use a title attribute is to give extra information about the element to your audience. On most desktop browsers, moving the mouse over an element will cause the text from its title attribute to pop up over it; this is known as a tooltip. This can be used when you want to add details about a heading, or explain a term that is difficult to understand, although most mobile browsers will not display this text.

<h2 title="I'm a header">The title attribute</h2> can sometimes be seen as a tooltip.

Note that this is different from the <title> tag in the header of the webpage.

Fonts

To change the format of the text you can add the style attribute to a tag. You can set the style attribute to change the colour, font size, or type of your climate change website.

The HTML below will create a paragraph where the text is red and the font size is 14 points. This is referred to as in-line styling, because the style is applied to an HTML element in the same line of HTML code.

<p style="color:red; font-size:14pt">this paragraph<p>

You can modify elements in many ways by setting the style attribute; you will learn more about this in the next step.

This is a summary of the attributes you have used so far:

Attribute Description
href Gives the URL for a link
src Gives the URL for an image or link
width Gives the width for an element
height Gives the height for an element
alt Displays alternative text when the image cannot be displayed, and provides the text for screen readers to read
style Gives in-line style for the element
title Specifies extra information about an element, displayed as a tooltip on a laptop or desktop

Share this article:

This article is from the free online course:

Introduction to Web Development

Raspberry Pi Foundation