React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
(7200)
Attribute defines the characteristics of an HTML element which is placed inside the elements opening tag. In this article we would be exploring HTML Attributes. Following pointers will be covered in this article,
- HTML Attributes
- Sample Code For Alignment Attribute
- Attribute
- Title Attribute
- Class Attribut
- Style Attribute
So let us get started with this article
HTML Attributes
In HTML we use the heading tags <h1>,<h2> be it paragraph tags <p> and other tags.These are the tags in their simplest form.These tags can also have attributes.These attributes are nothing but extra bits of information.
Attribute defines the characteristics of an HTML element which is placed inside the elements opening tag.There are two parts in an attribute
Name
It is the property the user wants to set.
Example: <p> is an attribute which means to align,which can be used to fro alignment of paragraph on the page.
Value
It is the property to be set and it will always be in quotations.
Example:for the <p> attribute there will be three possibilities to align the text be it left,center,and right.
Note:Attribute names and values are case-sensitive.The World Wide Web recommends lowercase attributes and attribute values in the HTML 4 recommendation.
So moving on with this article on HTML attributes,
Sample Code For Alignment Attribute
Example for the alignment attribute:
</p> <!DOCTYPE html> <html> <head> <title> Align Attribute Example</title> </head> <body> <p align="left">This is left aligned</p> <p align="center">This is center aligned</p> <p align="right">This is right aligned</p> </body> </html> <p style="text-align: justify;">
This will display the following result:
Basically there are four core attributes that can be used for majority of HTML elements.They are:
- Id
- Title
- Class
- Style
So moving on with this article on HTML attributes,
Id Attribute
The id attribute is used to identify any element in an HTML page.The importance of this attribute is:
If id attribute is carried as an identifier,it is possible to identify that element and its content. Two elements are present with the same name within the style sheet the user can use this attribute to distinguish between those elements
Example
<p id=”intro”>This para is the introduction of the page</p>
<p id=”summary”>This paragraph is the summary of the page</p>
So moving on with this article on HTML attributes,
Title Attribute
As the name suggests it gives extra bit of information about the title of the element. The syntax is similar to the id attribute.
It is often displayed as the tool tip when the cursor comes on top of it or while the element is loading.This attributes action depends upon the element.
Example
</p> <!DOCTYPE html> <html> <head> <title> title attribute </title> </head> <body> <h3 title="i give extra bit of information about the heading">Move the cursor upon this text</h3> </body> </html> <p style="text-align: justify;">
The output of the following will be:
So moving on with this article on HTML attributes,
Class Attribute
The class attribute is used to associate an element with a CSS style sheet.As the name suggests it specifies the class of the element.In CSS pseudo classes are used to add special effects.
It is mainly linked with CSS.
Example
class=”classname1 classname2 classname3”
So moving on with this article on HTML attributes,
Style Attribute
The style attribute is mainly linked with the CSS where we can apply the specifications on the element.Like the color coding and the font.
Example
</p> <!DOCTYPE html> <html> <head> <title>Style attribute </title> </head> <body> <p style="font-family:calibri; color:#00FF00;">Style is done to this text.</p> </body> </html> <p style="text-align: justify;">
The output of the following will be:
This brings us to the end of this article on HTML Attributes
Now that you know what is HTML, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Got a question for us? Please mention it in the comments section of this article and we will get back to you.
