What is HTML Attributes?
Attributes are like enhancers which spices up or customizes an html element. Attributes must be included in the starting tag of an element.
Where to use HTML Attributes?
If suppose you would like to add some background color to your webpage. This can be easily done by adding an attribute bgcolor to element as: . This is how we can enhance the look and feel of our website using html attributes.
List of HTML Attributes
| Attribute Name | Options / Value | Function of the Attribute |
| align | left, center, right | Used for Horizontal alignment of the content within the given tag |
| valign | top, middle, bottom | Used for Vertical alignment |
| bgcolor | color name(black, blue), RGB Values (rgb(250,250,250), Hexadecimal value (#000000) | Adds a background color for the element |
| background | url(“imgsrc.gif”) | Adds a background image |
| width | numeric value in px(pixels) or %(percentage) or pt(point) or em (for e.g.:width=50% or width=500px) | Assigns the horizontal length for the given element within the browser window |
| height | numeric value in px(pixels) or %(percentage) or pt(point) or em (for e.g.:width=50% or width=500px) | Assigns the vertical length for the element within the browser window |
| title | user defined text | It is a user defined text mainly used for SEO purpose. The text given will be shown as popup in the browser window on mouse hover of the element. |
| id | User defined name | The name given will be unique for the element and cannot be reused for the other elements. Mainly used for writing styles for the id name |
| class | User defined name | This is similar to id, but the only difference is class name is not unique. A class name can be used for any number of times. |
How to use HTML Attributes?
- Attributes must be given in the starting tag of html with Attribute name=”options/value”.
- Each attribute differs in its function, so the value should be assigned correctly.
- Attribute values should always be enclosed in quotes. Double quotes are used more commonly though single quotes are also accepted.
- Some attributes would not work for certain html tags. Those things with the reason can be seen in detail while learning each element.
- More than one attribute can also be assigned.
Example:
<html>
<head>
<title>Example for HTML Attributes</title>
</head>
<body bgcolor=”yellow” color=”black” width=”950px”>
<h1 align=”center”>HTML Attributes</h1>
<img alt=”smiley” width=”32” height=”32” src=http://www.iconarchive.com/icons/icontexto/emoticons/icontexto-emoticons-03-32×32.png/>
</body>
</html>
<head>
<title>Example for HTML Attributes</title>
</head>
<body bgcolor=”yellow” color=”black” width=”950px”>
<h1 align=”center”>HTML Attributes</h1>
<img alt=”smiley” width=”32” height=”32” src=http://www.iconarchive.com/icons/icontexto/emoticons/icontexto-emoticons-03-32×32.png/>
</body>
</html>
Next we are about to look html links through which the web pages are linked to each other.
Advertisement
