HTML Tag Attributes and Values- Web Design Tutorial Part-03. If you’ve followed this series from the beginning you’ve already learned what HTML tags are and 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:
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 are:
In that example, src is the attribute and bike.jpg is the value of the attribute. IN HTML, an attribute usually either identifies 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 than would be written as:
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, 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!