HTML Attributes

HTML attributes define the characteristics of an HTML element. The attributes are placed inside the element’s opening tag. An HTML attribute has normally two parts. One part is name and another part is value. So, an HTML attribute comes in name/value pairs where:

They look something like:

<tag attribute="value"> Welcome to world of web development. </tag>

Most Important HTML Attributes

HTML has a lot of attributes those are applied to its element. Among them, this article will show top 10 important attributes those are used frequently to design a webpage.

The Title Attribute

This attribute is used to provide a suggested title for an HTML element. It provides extra information about an element when mouse is hovered on it. The title attribute creates a tooltip for the HTML elements. It is also a global attribute.

<h1 title="Renuka Technologies IT Solution Center">Renuka Technogies </h1>
Try it with the Editor

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

Use the title attribute to give your user a more interactive experience and to help your SEO rank!

The id Attribute

This attribute specifies a unique id of an HTML element. Every HTML element must have a unique id that means if you assign an id of an element, the id must be unique in the whole webpage. The id attribute is a global attribute. So, every HTML element can have an id attribute. The id attribute is specially used by JavaScript to select an HTML element. There are two primary reasons that you might want to use an id attribute on an element:

<p id="company info"> Tips and Track Web programming related courses and tutorials . </p>

The Class Attribute

This attribute is used to apply similar characteristics on multiple HTML elements. It is mainly used by CSS to select multiple HTML elements for applying same style. An HTML element can contain multiple classes. The class attribute is also global attribute. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.

class="className1 className2 className3" 

The Style Attribute

This attribute is used to apply inline CSS rule of an HTML element. It is also a global HTML attribute.

<p style="color:#333"> Tips and Track Web programming related courses and tutorials.</p>
Try it with the Editor

The alt Attribute

This attribute provides an alternate text for an image when the image will not be displayed. This attribute also provides information to the search engine about an image.

<img src="logo.png" alt="System Zone Logo Image"/>
Try it with the Editor

The src Attribute

This attribute is used to specify the source URL of an HTML element who creates the holding space for the remote contents. The elements who create a holding space are <img />, <script>, <iframe>, <video> and <audio>.

<img src="logo.png" alt="System Zone Logo Image"/>

The href Attribute

This attribute is used to indicate the destination of an anchor tag (<a> tag). This attribute also specifies the location of an external CSS file in the <link /> tag.

<a href="https://www.renukatechnologies.in">Tips and Tracks</a>

The width and height Attribute

These attributes are used to specify width and height of an HTML element in pixel. All elements are not support width and height attribute. The width and height supported HTML tags are <img />, <iframe> and <table>.

<a href="https://www.renukatechnologies.in">Tips and Tracks</a>

The action and method Attributes

The action attribute is used to indicate the location of an HTML form process file and the method attribute is used to indicate the sending method of form data.

<form action="process.php" method="post">
....
</form>

The name and value Attribute

The name and the value attributes are used by the child elements of a <form> element. The name attribute is necessary for the PHP program to retrieve form input value. The value attribute specifies the value of an <input /> tag and a <select> tag used inside an HTML form.

<form action="process.php" method="post">
....
</form>