HTML elements can support more than one attribute inside tag. HTML Attributes provides a proper meaning to elements like how it looks, behavior, style, title, alternate text and much more.
Attributes comes with pairs of attribute_name=”attribute_value” for e.g, <div id=”page-container”></div>. Where, id is “attribute_name” and page-container is “attribute_value”, separated by = sign and must be enclosed with double or single quotes. You can use mostly all attributes with any HTML element. Attributes can be optional for some HTML elements.
Listed below are the most common attributes that can be added to any available HTML elements to define its behavior. The four core attributes that can be used on the majority of HTML elements are id, class, title, style.
| Attribute | Value | Description |
|---|---|---|
| accesskey | character | Represents a shortcut key to focus an element for eg. “o” for open, “c” for close etc |
| align | center left right |
Represents horizontal align for an HTML element |
| class | user_defined | Represents a style for an element which is used in CSS style sheet |
| height | pixels | Represents height for an element |
| id | user_defined | Represents unique id for an element |
| lang | lang_code | Represents the language of the element for it’s content |
| style | css_properties | Represents an inline style for an element for e.g style=”color:red;text-decoration:underline;” |
| tabindex | numeric_value | Represents tabbing index or order for the control for e.g. tabindex=”1″, tabindex=”2″ and so on |
| title | user_defined | Represents a tooltip information for an elements like img, a, abbr etc |
| valign | bottom middle top |
Represents vertical align for an HTML elements like table, img, p etc |
| width | pixels | Represents width for an element |
Sample Code
<html>
<head>
<title>Common HTML Attributes Example</title>
<style type="text/css">
.links {
color: #F15A23;
text-decoration: none;
cursor: pointer;
font-size: 13px;
}
</style>
</head>
<body>
<!-- Body Part Starts -->
<div id="page-container">
<p style="color: green">
This is the example of inline style attribute
</p>
<!--Example of a tag with id, title, tabindex and class attributes-->
<a id="lnkClickHere1" href="https://www.aspneto.com/" tabindex="1"
class="links" title="anchor tag 1" tabindex="1">Click Here 1</a>
<br />
<a id="lnkClickHere2" href="https://www.aspneto.com/html-attributes/" tabindex="2"
class="links" title="anchor tag 2" tabindex="2">Click Here 2</a>
<!--Note:href is not supported by all elements except some elements like a tag, base tag-->
<p>This is also a valid statement without any attribute</p>
</div>
<!-- Body Part Ends -->
</body>
</html>
Sample Result
This is the example of inline style attribute
This is also a valid statement without any attribute
