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.
- Use your version of the Raspberry Pi Fan Club page or create a copy of this Trinket.
- Can you recognise where the following attributes are used?
|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).
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
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!'">
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.
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.
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:
|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|