Html Attributes

0
34
Html - Attributes

Html – Attributes : 

In this artical, we are going to discuss about HTML Attributes and we will learn how we can use html attributes inside html code.

What are Attributes – 

An attribute consists of an extra or some additional information about an elements.

  • All HTML elements consists an attributes. Attributes are meant to provide additional information about an element.
  • Attributes have 2 parameters one is known as name and another is called as value. these two parameters describe about element’s properties.

Are Attributes are Case Sensitve ?

  • The parameters are case sensitive, there is a recommendation by W3C that it is necessary to write parameters in lowercase only, not in capital case

How to Use HTML Attributes in HTML Code – 

  • The usage of such parameters are quite easy, just we need to place it inside the opening tag of the element.
  • parameters are written in quotes.

Multiple use of Attributes –

  • It is possible that we can add multiple attributes in only single HTML element, but for this, we will need to give spaces between two attributes before adding another attributes.

Syntax of HTML Attributes – 

<element attribute_name="attributes_value"> Content Here </element>

Lets understand with an Example –

<html>
<head>
<title> HTML attribute- Mrtechcode </title>
</head>
<body>
<h1>  HTML - Attributes </h1>
<p style="height: 50px; color: blue">Hello, welcome to MrTechCode Website</p>
<p style="color: red">This Paragraph is colored with red</p>
</body>
</html>

It will result like : 

Html attributes example
Html attributes example

Title Attribute- 

  • The title attribute works as a text tooltip in almost all web browsers. it works when a user takes mouse over any text. as result, A tooltip will show that defines an element.

Example –

<html> 
<head> 
	<title> Title Attribute </title> 
</head> 
<body> 
	<h3 title="Mrtechcode"> Hover on Text </h3> 
</body> 
</html>

Output Here : 

title attributes example
title attributes example

Src Attribute – 

Src Attribute : If we need to insert an image, in that case, we will use the <img> tag and the src attribute. Src attributes is used to describe the address of the image as the attribute’s value and written inside the double quotes.

<html> 
<head> 
  <title>src Attribute</title> 
</head> 
<body> 
 <img src="https://www.mrtechcode.com/wp-content/uploads/2019/12/MrtechCode-Footer-Logo-1.png"> 
</body> 
</html>

Output Here :

MrtechCode-Footer-Logo-1

alt Attribute :

Alt attribute is known as alternate tag. when img doesn’t show or display due to any reason then alt attribute displays text instead of img which is missing due to wrong src link or broken link. along with it, it is to define image to a developer who is actually sitting at the back end of code.

<html> 
<head> 
  <title> Alt Attribute </title> 
</head> 
<body> 
 <img src="https://www.mrtechcode.com/wp-content/uploads/2019/12/MrtechCode-Footer-Logo-1.png.png"
 alt="Mrtechcode"> 
</body> 
</html>

Output Here :

alt attribut

The width and height Attribute : 

  • When we need to set width and height of an image then, we use width attribute and height attribute.
<html> 
<head> 
	<title>Width and Height</title> 
</head> 
<body> 
	<img src="https://www.mrtechcode.com/wp-content/uploads/2019/12/MrtechCode-Footer.png"
 alt="Mrtechcode" width="300" height="150"> 
</body> 
</html> 

Output Here :

width attributes

id Attribute :

ID attribute is used to define an unique identification for element. some times, there are Situations, when we have to access a particular element which are having similar name as the others. In that condition, we can use id attribute later they can be uniquely used for others purposes. Mostly, Id attribute is used in CSS. we will talk about in  later in CSS Tutorials.

Lets understand with an Example –

<html> 
<head> 
	<title>id Attribute</title> 
</head> 
<body> 
	<p id = "id1"> Hello Learners </p>
	<p id = "id2"> MrtechCode  </p>
	<p id = "id3"> Welcomes you in Coding Platform </p>
</body> 
</html> 

 

Follow Facebook Page

LEAVE A REPLY

Please enter your comment!
Please enter your name here