OpenCart Templates
Monday , March 19 2018


HTML attributes give addition information about HTML Elements that are used to configure the element or use to adjust the behavior of an element into various ways, according to the demands of web page developers or users demand. Html attributes is use to define the additional information of an HTML element and they are placed with the opening tag of an element, all the HTML attribute come into two parts like name and value (name=“value”) and the name and value are separated by (=) sign

Content of the HTML Attribute Tutorial

  • The lang Attribute
  • The id Attribute
  • The title Attribute
  • The class Attribute
  • The style Attribute
  • The href Attribute
  • The size Attribute
  • The dir Attribute
  • The alt Attribute
  • The quote Attribute
  • The xml:lang Attribute

Video Tutorials On HTML Attribute


HTML Attribute Part 6 In Html Tutorial For Learning Web


Name of an attribute shown the property that users or HTML developer set. Like the <p> carries an attribute align that you can use to indicate the alignment of such paragraph into the web page.


The value shown the assigning value of the property and always put into the quotations. Such as a <P> tag have an attribute name align and value is center, it shown all the paragraph written into the web page will be in center of a page.

<p align=“center”> here is the paragraph </P>

<!DOCTYPE html>



<title>Align Attribute  Example</title>



<p align=”left”>This is left aligned</p>

<p align=”center”>This is center aligned</p>

<p align=”right”>This is right aligned</p>



HTML Attributes types

Basically there are four types of attributes such as required attribute, optional attribute, slandered attribute and event attributes.

Required Attribute: it needed by specific element type for that element type to furcation correctly.

Optional Attribute: it is used to change the default furcation of an element.

Slandered Element: it used to support a large number of elements type.

Event Attributes: used to change element type to require a script to be run under specific circumstances. 

Some Important HTML Attributes

Lang Attribute

The language of an HTML script declared under the lang attribute, lang attribute is the basic and important HTML Attribute. It helps the screen reader or application and search engine to access easily. In HTML 5 the language of any document can be declared in <htm> tag.


 <!DOCTYPE html>

<html lang=“en-US”>







The first two letter (en) specifying the language and if there is a dialect, use two more letter (US).

Core Attributes

Here we discuss four core attributes that can be used in majority of HTML Elements like,


Id Attribute

The HTML element uniquely identified within an element page to the help of id attribute, you can use id attribute within page by following two reason

If an element carries an attribute as a unique identifier it is possible to identify just that element ant its content.

If you have more than one elements of the same name within a web page then you can use id attribute to differentiate between elements that have a similar name.

Title Attribute

Title attribute added into the <p> element as a suggested title of the element and it will be shown as a tooltip when mouse hover over into the paragraph.


<p title=“I’m a tooltip”> this is a paragraph </p>

Class Attribute

This attribute is used to associate an element within a style sheet and also specify the class of an element, we will discuss it in later or may be in CSS class <cascading style sheet)

Style Attribute

The use of CSS rules into the HTML elements is covered under the Style Attributes.


< p style= “font-family:arial; color: #ff0300;”>  put the text here </p>

The href Attribute

All the HTML links can be defined with <a> tag and the link address is specified in the href attribute. Such as,

<a href=“” Here is a link </a>

The size Attribute

All the images in HTML defined with the <img> tag with a file name of the source (scr) and a specific size (width and height) of images all are provided under the size attribute.

<img src=“myaktion.jpg” width=“200” height=“300”>

The dir Attribute

This attribute is used to show the direction of web page text and The dir attribute use to indicate the browser in which direction the test should flow, it can be taken one or two values such as,

Ltr : left to right (it is a default vale)

Rtl : right to left (it is used to write other languages such as Arabic or Urdu)

The alt Attribute

The use of alternative text are specified by the alt attribute, it can be use within an image and alt text will be shown when the image cannot be displayed. This value can also be used to help the users like listening attribute allow to a listen the use particularly for those who cannot see but hear (blind person).

The quote Attribute

In HTML 5 does not require quotes around the attribute vale and the href attribute demonstrated above can be written as:

<a href=“” >

But sometimes use of quote is necessary such as

<p title=“about MyAkTiON>

Single or Double Quote

Sometimes single quote can also e use as compared to the double quote  such as when the attribute value itself contain double quote then the use of single quote is necessary.


<p title=“Aksa ‘shout gun’ Enemy”> or

<p title=’Aksa “shot gun” Enemy’>

The  Xml:lang Attribute

The xml:lang attribute is the replacement of XHTML FOR lang attribute. This value should be an ISO-639 country code.



Keep visiting for more lesson and keep sharing with your friends. feel free to ask any question related this tutorial.

About My Aktion

Aksa Sahi I am a web developer and SEO expert and also an Economist, I earned the degree of (Hons) in Agricultural and resource Economics from the University of Agriculture Faisalabad in 2013. Exploring the World of Technology and traveling the adventure place is my passion working as a teacher and as a freelance web developer. I love to explore the world of IT.

Check Also

How To Add Google Analytics To WordPress Website

How To Add Google Analytics To WordPress Blog

It is important to every blogger to make a knee eyes to the visitor to ...

Leave a Reply

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