What is the use of HTML Attributes?
2021-10-12 12:34 · 15 min read
What are ATTRIBUTES?
Attributes define additional characteristics or properties of the element such as image width and height.
HTML attributes are some special words used inside the opening tag of an HTML element to control the element's behavior. HTML attributes can modify HTML elements, so you can say HTML attributes are the modifier of HTML elements. HTML attributes usually consists of name/value pairs name="value"
some attributes must be required for certain elements. For example, a <img> tag must contain src and alt attributes.
<img src="../img/html5.png" width="30" height="30" alt="HTML 5 Icon">- The HTML attribute is added to an HTML start tag.
- HTML attributes generally appear as name-value pairs, separated by = eg. attribute-name ="value"
- Most every HTML element can have attributes
</Some General Purpose Attributes >
Usually, HTML elements can take any of several most common standard attributes
Attributes to Identify the element
The id Attribute
The id attribute is used to give a unique name or identifier to an element within a document, So we can easily identify elements and apply a style to them. This makes it easier to select the element using CSS or JavaScript.
Example
Here is a simple example of a id attribute.
<element id="unique-name">element content</element>Note: The id of an element must be unique within a single document. No two elements in the same document can be named with the same id, and each element can have only one id.ID have the high priority then class. mean style appied on id can overwrite class style.
The Class Attribute
Like the id attribute, the class attribute is also used to identify elements. But unlike id, the class attribute does not have to be unique in the document. This means you can apply the same class to multiple elements in a document and you can also add multiple to the same element separated by space class="tdb-school c-tdb-gray".
Example
Here is a simple example of a class attribute.
<!-- example of a class -->
<element class="tdb-school">element content</element>
<!-- apply same class on mutiple elemests-->
<element2 class="tdb-school">element content</element2>
<!-- apply multiple class on same element-->
<element2 class="tdb-school c-tdb-gray">element content</element2>
Do you know?
Since a class can be applied to multiple elements, therefore any style rules that are written to that class will be applied to all the elements having that class, and the class applied in the last have high priority and can overwrite the style of previously applied classes
e.g:-In class="tdb-school c-tdb-gray" c-tdb-gray have more priority than tdb-school and if you apply color style through both classes then c-tdb-gray will be applied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#uniqueName {
color: white;
background-color: rgb(0, 102, 255);
padding: 10px 35px;
border: none;
border-radius: 5px;
text-align: center;
}
.tdb-school{
color: white;
background-color: rgb(0, 255, 196);
padding: 10px 35px;
border: none;
border-radius: 5px;
text-align: center;
}
.c-tdb-gray{color: gray;}
</style>
</head>
<body>
<!-- simple example of a id attribute.-->
<div id="uniqueName">id example</div>
<!-- simple example of a class attribute-->
<h1 class="tdb-school">element 1</h1>
<!-- simple example of a same class attribute-->
<h1 class="tdb-school">element 2</h1>
<!-- simple example of a multiple class attribute-->
<h1 class="tdb-school c-tdb-gray">element 3</h1>
</body>
</html>
Some Other Attribute
The Title Attribute
The title attribute gives a suggested title for the element. This attribute is used to provide advisory text about an element or its content.
<element title="Title of this element.">element content</element>Do you know?
When you hover over an element that has a title attribute then you will see a tooltip by the web browsers when the user places a mouse cursor over the element.
The Style Attribute
The style attribute allows you to apply inline CSS to elements such as color, font, padding, margin, etc.
Let's check out an example to see how it works:
<p style="background-color:black;padding: 10px;color:white;margin:40px;">This is a paragraph.</p>
<div style="background-color:blue;">Some content</div>Do you know ? Inline style have the highest priority and style applied in inline style tag will overwrite all style . And intresting thing is you can overwrite every previour define style by using !important
Click here to learn more about style.
The scr and alt Attribute
The <img> tag is used to insert/embed an image in an HTML web page and the src attribute provides the path of the image.
and alt is used to define the alternate text that will show when the image is not found.
<img src="image.jpg" alt="This text display when image is not found.">Do you know ? Alt attribute is an HTML attribute applied to image tags to provide a text alternative for search engines. Applying images to alt tags such as product photos can positively impact on SEO.
The Width and Height image attributes
The width and height attribute specifies the width and height of the image.
The width and height are is specified in pixels by default:
<img src="img.jpg" width="100" height="200">Note :- Use only one (width/height)attribute at a time to maintain ratio of image width/height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TDB School </title>
<style>
.title_example{
color:#7D9029;
padding:2px 5px;
border:2px solid;
border-radius:5px;
cursor:pointer;
}
</style>
</head>
<body>
<!--simple example of a id title attribute.-->
<span title="Title of this element." class="title_example">Hover me for few second </span>
<!-- simple example of a style attribute-->
<p style="color: blue;font-size:15px;">This is a paragraph.</p>
<div style="background-color:black;padding: 10px;color:white;margin:40px;">Some content</div>
<!-- simple example of a same src and alt attribute in this example alt don't show because image source is correct-->
<img src="html5.png" alt="This text display when image is not found.">
<!-- simple example of a same src and alt attribute in this example alt show because image source is incorrect or image is missing-->
<img src="html-5.png" alt="This text display when image is not found.">
<br>
<!-- simple example of a width and height attribute-->
<img src="html5.png" width="100" height="200">
<!-- info :-Use only one (width/height)attribute at a time to maintain ratio of image width/height.>
</body>
</html>
Attributes.
| Attribute | Options | Functions | Elements |
|---|---|---|---|
| align | center, right, left | Change Horizontal alignment | <P> tag , <font> tag |
| bgcolor | numeric, hexidecimal, RGB values color | Set Background color | <body> tag |
| id | User Define | Unique Names of an element for use with Cascading Style Sheets.(id must be unique) | Most of the elements |
| class | User Define | Names of an element for use with Cascading Style Sheets.(Class can be same over multiple elements ) | Most of the elements |
| title | User Define | This attribute is used to provide advisory text about an element or its content | Most of the elements |
| Style | All CSS properties | use to apply inline CSS | Most of the elements |
| width | Numeric value(px) | set the width of tables, images, or table cells. | <table>, <images>, or <table cells> |
| Height | Numeric value(px) | set the Height of tables, images, or table cells. | <table>, <images>, or <table cells> |
| Event | onclick , ondblclick , onmousedown , onmousemove etc. You will learn more about Events in our HTML Event chapter. | set the Height of tables, images, or table cells. | <table>, <images>, or <table cells> |
