HTML Attributes

 

What is the HTML attributes?

HTML attributes are used to set various properties of an element. Some attributes can be used in all elements which is called Global Elements, while others can be used only in specific elements.

All attributes have a name and a value.

Note :

attributes can be written only in the start tag and can not be written in the end tag.

Example :

<h1 align="center"> WebPlover </h1>

HTML5 attributes are not case sensitive, therefore you can write it in uppercase, lowercase and mixed case.

Like this :

<h1 ALIGN="CENTER">WebPlover</h1>

<h1 AliGn="cEnTer">WebPlover</h1>

But the most common way is to write HTML5 attributes in lowercase.

In the above example align is the attribute name and center is the attribute value.

All HTML attributes will be written on elements in the below format.

<opening-tag-name attribute-name="attribute-value"> Element Content </closing-tag-name>

Some common HTML attributes

Below is the some common using attributes.

  • The style attribute

The style attribute is used to inline styling for an element.

Example :

<h3 style="color:red; background-color:pink; width:170px;">Heading value 3</h3>
Result

Heading value 3

 

  • The href Attribute

href attribute is used in anchor (<a>) tag, to add the link address in <a> tag.

Example :

<a href="https://www.webplover.com">Click here</a>
Result

Click here

 

  • The alt Attribute

The alt attribute displays an alternative text, if an image cannot be displayed.

alt attribute is written in <img> tag.

Example :

<img src="mango.png" alt="Mango with leaf" />
Result

Mango with leaf

 

  • The src Attribute

The src attribute is the most important attribute of the <img> tag. Without this attribute, img tag cannot display any image, because the value of the src attribute is the image name or the image link.

In other words, the src attribute defines image in the <img> tag.

Example :

<img src="mango.png" />
Result

 

  • The title Attribute

The title attribute is a global attribute, means this attribute can used in all HTML elements.

title attribute defines extra information about the element. When the mouse cursor moves over the element, the value of the title attribute displayed as a tooltip.

Example :

<h3 title="Heading level 3"> Heading </h3>
Result

Heading

 

  • The width and height Attributes

The width and height attributes defines the width and height of an element.

The value of the width and height attributes can be set both in pixels and percentage.

Example of width & height in pixels :

<img src="mango.png" width="100" height="150">

Example of width & height in percentage :

<img src="mango.png" width="60%" height="80%">

Note :

The value of width and height attributes without the percentage % sign, will be considered in pixels.

Its not necessary to write pixels with value.

 

If you find this tutorial helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Devhats

Leave a Comment

Your email address will not be published. Required fields are marked *