HTML ATTRIBUTES

Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value". Attribute values should always be enclosed in quotation marks.

Also, some attributes are required for certain elements. For instance, an <img> tag must contain a src and alt attributes. Let’s take a look at some examples of the attributes usages:

<img src="images/crane.png" width="30" height="30" alt="crane">
<a href="https://www.google.com/" title="Search engine">Google</a>
<abbr title="Hyper text markup language">HTML</abbr>
<input type="text" value="Luke Joe">

[su_label type=”info”]RESULT[/su_label]

In the above example src inside the <img> tag is an attribute and image path provided is its value. Similarly href inside the <a> tag is an attribute and the link provided is its value, and so on.

There are several attributes in HTML5 that do not consist of name/value pairs but consists of just name. Such attributes are called Boolean attributes. Examples of some commonly used Boolean attributes are checkeddisabledreadonlyrequired, etc.

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

[su_label type=”info”]RESULT[/su_label]

General Purpose Attributes

There are some attributes, such as idtitleclassstyle, etc. that you can use on the majority of HTML elements. The following section describes their usages.

The id Attribute

The id attribute is used to give a unique name or identifier to an element within a document. This makes it easier to select the element using CSS or JavaScript.

<input type="text" id="firstname">
<div id="caontainer">Some content</div>
<p id="infotext">This is a paragraph</p>

[su_label type=”info”]RESULT[/su_label]

The class Attribute

Like 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, as shown in the following example:

<input type="text" class="highlight">
<div class="firstText">SOME CONTENT</div>
<p class="Highlight">This is a paragraph</p>

[su_label type=”info”]RESULT[/su_label]

The title Attribute

The title attribute to is used to provide advisory text about an element or its content. Try out the following example to understand how this actually works.

<abbr title="world wide web consortium">W3C</abbr>
<a href="images/kites.jpg" title="click to view a larger image">
    <img src="images/kit.jpg" alt="kites">
</a>

[su_label type=”info”]RESULT[/su_label]

The style Attribute

The style attribute allows you to specify CSS styling rules such as color, font, border, etc. directly within the element. Let’s check out an example to see how it works:

<p style="color:blue;">THIS IS A PARAGRAPH.</p>
<img src="images/cloud.jpg" style="width: 300px;" alt="cloudy day">
<div style="border: 1PX solid red;">SOME CONTENT</div>

[su_label type=”info”]RESULT[/su_label]