HTML From Scratch. 3:1 HTML Attributes
TweetFor links for this lesson (the W3C online validator) see separate sheet. resources
HTML attributes and value pairs: a winning combination.
HTML elements can take various attribute and value pairs, which tell the browser something extra about how to display the element, or give more information which can be used by web crawlers (Googlebot et al) or assistive devices such as screen readers.
We have come across an attribute-value pair before, when we looked at linking one web page to another.
<a href=”mypage.html”>next page</a>
In this example the attribute is href and its value is mypage.html. Attribute is another word for a property or quality. Examples could be colour, length, weight, etc. In HTML there are set attributes which any element can take, and you can look up a list of all of them on a website such as W3C Schools. There are also rules about what type of value each attribute may take – for example, the value mypage.html is a URL (page address: Universal Resource Locator), but it would make no sense to have a value of “3cm” instead.
Each attribute-value pair in HTML is separated by an equals sign: don’t put in any extra spaces here, or you may confuse the browser. The value may be surrounded by double or single quotes, or none at all. Make sure each pair is separated by a space.
Remember that we have been using the html5 DOCTYPE. This means that there may be some differences, as most HTML attributes are not valid HTML5. However, you can experiment with HTML attributes if you like. They can be very useful sometimes if you can’t easily solve a problem with CSS. Just remember that if you want your page to validate you may need to change the DOCTYPE.
If you like, you can change the background colour of your page and the colour of the writing like this:
<body bgcolor=”blue” text=”green”>
bgcolor means background colour and this will change the whole page to blue.
text means the colour of the text on the whole page, and this will change all of it to green. This attribute is only valid inside the body tag.
If you want to, you can use color to change the colour of text inside an element, instead of text.
In this example we have used the words green and blue. We will return to colour values later, but first we need to look at how to use CSS instead of HTML to change the appearance of items on the page.
The HTML method may be useful to know about but it is no longer used – you should use CSS instead if at all possible, and keep your HTML code as semantic markup.
Tags: assistive devices, attribute, background colour, bgcolor, body tag, element, elements, html attributes, lt, mypage, quality examples, quotes, screen readers, universal resource locator, value pair, value pairs, w3c schools, web crawlers, web page
This entry was posted on Friday, August 5th, 2011 at 11:12 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply