The Complete WebDeveloper (42 Blogs) Become a Certified Professional

How To Best Use HTML Attributes?

Published on Aug 26,2019 16 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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,

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:

Output -HTML Attributes - Edureka

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:

Output -HTML Attributes - Edureka

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:

Output -HTML Attributes - EdurekaThis 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.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.