HTML - SPLessons

HTML Attributes

Chapter 9

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Attributes

HTML Attributes

shape Introduction

This chapter demonstrates about the HTML Attributes which gives some additional information about the elements. Following are the concepts covered.

  • About Attributes
  • Types of Attributes

About Attributes

shape Description

Html Attributes are defined as the name/value pairs Eg: href=”URL” ((href= name) and(URL=value)). Html elements have several types of attributes to display the various types of information. The attributes should be added in starting tags only, the below figure explains about the attributes.

The code below demonstrates the Attributes of the html elements.

<!DOCTYPE html>
<html>
	<body>
		<a href="https://www.splessons.com/">This is a link</a>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Rules and Values

HTML Attribute possess some rules. Following are some of the rules to be followed while using attributes.


HTML elements have attributes, these attributes defines additional information about elements.User have to give attributes always in start tag, and it will come as pair i.e. name and value.

Syntax

<tagname attributename="Value"></tagname>

Example

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

HTML allows to write multiple attribute for a single tag as shown below.

<a href="https://www.splessons.com/" class="myclassname" ></a>

Also HTML allows user defined attributes.

<a href="https://www.splessons.com/" class="myclassname" myattribute="Myvalue" ></a>

More examples
The code below demonstrates the HTML Attributes as shown.

<html>
	<a href="https://www.splessons.com/">Click Here to go SPLessons Home Page</a> <!-- Anchor tag used in navigation.-->
	<br />
	<br />
	<img src="https://www.splessons.com/wp-content/uploads/2013/11/SPLessonsSmall.png" alt="Logo" /> <!-- img tag used display images in web page.-->
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Types of Attributes

shape Description

In order to define the basic html elements, user have several types of attributes as listed below.

Boolean Attributes
The code below demonstrates the Boolean Attributes which do not require any value.

<!DOCTYPE HTML>                        
<html>  
	<body> 
		<audio controls loop> 
		<!-- Here controls and loop are boolean -->
		<source src="horse.ogg" type="audio/ogg" />
		<source src="horse.mp3" type="audio/mp3" />
		</audio>	 
	</body> 
 </html> 

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Custom Attribute

The code below demonstrates the custom attributes which is also called as data attributes.

<!DOCTYPE HTML>                        
<html>  
	<body> 
		<audio controls loop data-music="horse" >
		<!-- data-music is custom attribute -->
		<source src="horse.ogg" type="audio/ogg" />
		<source src="horse.mp3" type="audio/mp3" />
		</audio>	 
	</body> 
 </html> 

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

href Attribute

The code below demonstrates the <a> tag , the linked address refers to the href attribute.

<!DOCTYPE html>
<html>
	<body>
		<a href="https://www.splessons.com/">This is a link</a>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Size Attribute

The code below demonstrates the <img> tag which contain source attribute (src), width and height of the image.

<!DOCTYPE html>
<html>
	<body>
		<img src="splessons.jpg" width="104" height="142">
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape Key Points

  • Attributes should be always given in the starting tag only.
  • Attributes are utilized to give the extra information of the elements.
  • Attributes can be written in lowercase or upper case.