Overview

HTML Attributes are used to control HTML elements behaviour like what is source of image in <img> tag. HTML attributes are defined inside opening tag.

  • HTML attributes works like modifiers of HTML Elements
  • HTML Attributes also provide extra information about HTML Element.
  • Most HTML attributes are in key/value pairs where key is attribute name and value is the value for the attribute. Some of the HTML attributes does not key/value pair like "disabled".

In this tutorial we will be going through some of attributes in HTML.


Attributes

The Class Attribute

Class attribute used to point a class in style sheets like CSS. We can also modify HTML Element in JAVASCRIPT using class attribute through HTML DOM

Example: Use of class attribute.

Class Attribute


<!DOCTYPE html>
<html>
<style>
.pica {
color: red
}
</style>
<body>
<div class="pica">Picallens</div>
</body>
</html>


The Src Attribute

This attribute is used in many tags like in <img> tag for url of image. So most generic definition of this attribute is "It specifies the location/url/path of resource file.

Src Attribute


<img src="..." />

Src Attribute Example


<!DOCTYPE html>
<html>
<style>
.pica {
color: red
}
</style>
<body>
<img src="https://storage.cloud.google.com/picallens/PicallensLogo.png?authuser=2" />
</body>
</html>

There are two ways to specify the URL in the src attribute:

  • Absolute URL: Absolute URLs include the whole address, from the protocol (HTTPS) to the domain name (picallens.com), as well as the placement inside your website's folder structure (/picallens.
  • Relative URL: The relative URL does not include the whole web address; just the place after the domain is included. It assumes that the link you add is located on the same site and belongs to the same root domain.

Example: Absolute URL vs Relative URL

Absolute URL & Relative URL


<!-- This is Absolute url -->
<img src = "http://www.picallens.com/xyz.png" />
<!-- This is Relative url -->
<img src = "/xyz.png" />

The href Attribute

The href attribute mostly used in <a> tag is used to define the link address to which the link goes to. It can be either in same website or different website.

Example: The href Attribute


<a href="www.picallens.com">Link</a>

Try href Attribute


<!DOCTYPE html>
<html>
<style>
.pica {
color: red
}
</style>
<body>
<a href="https://www.picallens.com" />
</body>
</html>

Suggestions

Quotes

We recommend using quotes around attribute values. However HTML does not require those.

Example: Quotes


<!-- Bad Way to define attributes -->
<a href=www.picallens.com>
<!-- Good Way to define attributes -->
<a href="www.picallens.com">

Are attributes case sensitive?

However attributes names are not case sensitive i.e, we can use attribute names in capital cases as well. But for good coding practice we recommend using lower case.


There are more attributes that can be used to define the behaviour or multiple HTML elements like width, height, alt, etc. We will be discussing them in details when we are going to learn for those particular tags. In next lesson we are going to learn "Style Attribute or HTML styles". Thanks for your Support!