What is an attribute in HTML 5

 What are attributes in HTML?

 In the last tutorial, we have already covered basic HTML tags and their usage such as heading tag, paragraph tag, anchor tag, etc. We have used all tags in their basic form. HTML tags can also have various attributes in them which provides some extra information.

In the simplest way, you can say attributes are special words used inside the opening tag that provides more information about elements and control element behavior.

Attributes are always assigned inside the elements opening tag. Generally, an attribute consists of two parts name and value

name = " value " 

The name is the property you want to set for example you have a heading tag <h1> with attribute name align which you can use to align the heading in your website.

The value is the property that you want to set for aligning elements. for example, we have three align properties left, center, right. If we want to align our heading in the center we can use align attribute in this way shown below.

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

<p  align = " left " > This is paragraph alignment </p>

Here the name of the attribute is indicated with red color and value with green color. This was just an example there are many attributes in HTML we will be discussing all one by one.

1) The href Attribute 

href attribute is used to link a specific URL to the element. href attributes are used inside anchor tags.

<a  href = " https://www.google.com" > Google</a>

Here href value is set to (www.google.com) so when some click on Google it will take the user to the google homepage. 

2) The src Attribute

the src attribute is used to specify the file path for example if we are using the src attribute inside the image tag then we need to specify the location where the image is stored.

There are two ways to specify the path inside the image tag by using either absolute URL or relative URL.

Suppose if we want to insert an image in our website which is not located in our system but located on someone else website then what we will do simply is right-click on the image and copy the image address and put it inside the src attribute.
This type of URL is called an Absolute URL.

<img  src = " https://media.istockphoto.com/vectors/abstract-business-arrow-up-logo-icon-vector-design-template-vector-id1140553971?k=6&m=1140553971&s=612x612&w=0&h=fDXoATNoJYbj0C19ooaxXaWimcliIT9TsxNAw_Dd3Fw=" >

If we have the image stored in our system then we need to specify the image path inside the src attribute. This type of URL is called a relative URL.

<img  src = "/images/logo.png " >

It's always a good practice to use relative URLs inside a website. Because if you use an absolute URL there are chances that the image can be deleted or removed then it will affect your website as well.

3) The alt attribute

The alt attribute specifies an alternate text for the image If for some reason image can't be displayed. One may face this problem if they are using an absolute URL or if you have entered the wrong extension of images such as jpeg instead of png or vice versa.
<img  src  = "/images/logo.png alt  = "  logo "  >

If you use alt attribute inside your element & your image can't load due to some reasons then these alternate text will be displayed. 

In the above example logo will be displayed on the screen instead of an image. 

4) The width and height attribute

width and height attributes are used to specify the height and width of the image. The value of width and height attributes are given in pixels.

<img  src  = "/images/logo.png "   width  = "  350px "  height  = " 300px "  >

5)The style attribute

The style attribute is useful in adding style to an element such as color, font family, font size, etc.

<p  style = " color : red ; font-size : 24px ; " > This is a styled paragraph </p>

This will give red color & font-size of 24px to paragraph element. 

6)The title attribute

The title attribute is used to give some extra information about the element. The information will be displayed as a tooltip when the user mouse over the element.

<h1  title = " This is a heading " > CodersOrigin </h1> 

The text inside the title attribute will be displayed when the user mouse over CodersOrigin.

7)The class and id attribute 

id and class are user-defined attributes you can give any name you want to them they are mostly used while styling using CSS. 

Ids are unique you can't have two ids with the same name in a document.

<div  id = " home" > ..... </div>  ✔️
<div  id = " home" > ..... </div>  

In CSS  you can access Ids by (#idname)
 for example : #home{....}

Classes are not unique you can create multiple classes with the same name.

<div  class = " contact " > ..... </div> ✔️
<div  class = " contact " > ..... </div> ✔️

In CSS you can access classes by (.classname)
 for example:  .contact{....}

8) The target Attribute

The target attribute defines where to open the linked document. By default the value of the target attribute is set to self, Therefore It will open all documents in the same tab. 

there are different  types of target values like _blank, _self, _parent, _top

_blank: Opens the linked document in new tab. 

<a  href = " https://www.google.comtarget = " _blank " > Google</a>

_self Opens the linked document in the same frame.

<a  href = " https://www.google.com"  target = " _self " > Google</a>

_parent: Opens the linked document in parent frame

<a  href = " https://www.google.com"  target = " _parent " > Google</a>

_top: Opens the linked document in full window

<a  href = " https://www.google.com"  target = " _top " > Google</a>

Today we have discussed attributes used in HTML with examples.I tried to keep everything as simple as I can. If you have any doubt ask in the comment section below or ping me on Instagram @codersorigin.



Post a Comment