HTML 5 Attributes with Example

HTML 5 Attributes: The Attributes in HTML are used to describe the additional properties and characteristics like height and width of any image. These attributes mostly defined in the start tag and contain name or value pair such as “name=” value”. The attributes must be enclosed with quotation marks only.

For an example take <img> tag which contains attribute “src” and “alt” attributes.

HTML 5 Attributes Example

<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">

Here the <img> tag has “src” which is the attribute and its value is the image path. Similarly <a> tag contains “href” attribute with the link as its value.

Boolean Attributes

Some of the attributes does not require name or value pairs but contains name those are called as boolean attributes. A few of them are required, checked, disable, read-only.

Boolean Attributes Example

<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>

Purpose of HTML5 Attribute

Some of the attributes can be used as a majority of HTML elements such as id, title, class, style.

The Id Attribute

The “id” element provides a unique name to the element inside a document which makes to select any element easily.

The Id Attribute Example

<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>

HTML5 cxClass Attribute

Like the “id” element the “class” element is also used to identify elements but not unique in the document. So you can apply the same class for many elements in the document.

The Class Attribute Example

<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>

The Title Attribute

In HTML the “title” element is used to define the content or particular element. Let’s see the following example.

The Title Attribute Example

<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>

The Style Attribute

The “style” attribute used to specify the CSS styling rules like font, color, border directly inside the element.Let’s see the following example.

The Style Attribute Example

<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>