HTML Attributes

Attributes

HTML elements can have attributes in the opening or start tag. Attributes provide additional information about that element. HTML attributes are added to the opening tag and can have a value. Some popular global attributes are class, id, title, style, etc.

HTML attributes are always defined in the start tag. Attributes are written in name/value pairs like: <tag attribute="value">. An attribute can be used only once in the same element.

For attributes like class, multiple values can be assigned separated by spaces, but the class attribute itself appears only once per tag.

HTML Attributes Type

HTML Attributes are categorized on the basics of their functionality and the way they are written in HTML.

Class Attribute

Class attribute is used to define a group of elements having same CSS properties. Class can have single or multiple values with whitespace separation. With CSS, use of class attribute is compulsory. Multiple elements can share the same class.

Class name should be descriptive. For example, for a top-most div, a preferred class name is header. For navigation, use nav; for main content, main; and for the last div, footer.

Class Attribute Example

<style>
    p{ font-family:sans-serif}
    .red{ color:red}
    p.bold{ font-weight:bold}
</style>
		
<p class="red bold"> Font with class red and bold</p>
<p class="red"> Font with class red only</p>
<p> Font without any class name</p>

ID Attribute

Id attribute is used to call a unique element. In a single webpage, an id name is always used once. An HTML element can have a single ID attribute and single value of id. As per W3C, using the same id on multiple elements is a W3C validation error.

ID Attribute Example

<style>
    .red{ color:red}
    #blue{ color:blue}
</style>
		
<p class="red" > Font with class red</p>
<p class="red" > Font with class red</p>
<p id="blue"> Font with id blue</p>

Title Attribute

HTML Title Attribute is a global attribute used to show a tooltip on mouse hover. Title Attribute is also compulsory for the <abbr> tag to provide the full expansion of abbreviations.

    <abbr title="Hypertext Markup Language">HTML</abbr>                
            

Tags where title attribute is recommended

• <abbr> - For abbreviations
• <iframe> - For describing embedded content
• <input> - For additional help text
• <img> - For image descriptions (though alt is preferred)

Size Attribute

Size Attribute defines the size for the input tag (number of characters visible) and was used for the font tag (deprecated). Since the font tag is removed in HTML5, the size attribute is now primarily used for input elements to control their width.

<input type="text" size="6" >
<input type="text" size="10" >
<input type="text" size="20" >
<input type="text" size="30" >