HTML Tag Attributes and Values

[peshawarman]

HTML Tutorial: HTML Tag Attributes and Values

If you've followed this series from the beginning you've already learned what HTML tags are and the you've learned the basic HTML skeleton. Now I'll introduce a new tag, plus tag attributes and values. Tag attributes and values provide additional instructions to the browser. For example, suppose you want to put an image on your web page. An image tag is written as follows:
<img />
That's the basic image tag, but it doesn't tell the browser which image to display or where to find it. We give the browser that information by adding the source attribute and value.
The source attribute is written as src, with the vowels removed from the word source. If the image you wanted to add was a picture of your new bicycle and the picture was saved as bike.jpg, and it was kept in the same folder as your HTML page, then the attribute and value you'd add to the image source tag is:

src="bike.jpg"
In that example, src is the attribute and bike.jpg is the value of the attribute. IN HTML, an attribute usually either indentifies a source or defines an element. In this case, the attribute identifies the image source.
An example of an attribute defining an element would be adding the width and height attributes and values to the image.

So then, an attribute defines or identifies an element, and the attribute has a value attached to it by the equal sign (=), with the actual value enclosed in quotation marks. The entire code then, would be written as:

<img src="bike.jpg" />
Note: Most HTML elements have a corresponding closing tag, but there isn't a closing tag for the image element. To make HTML tags that don't have a corresponding closing tag up to date, which means compliant with XHTML, a space and forward slash is added to the end of the tag, thereby making it a self-closed tag. This is optional, however, and coding an image without the trailing space/slash is perfectly valid at this time.

If it seems complicated, relax. In the next step we'll have you make a simple web page in just minutes so you can see how easy it really is!

[RaheelSaudia]

nice shering