Home / Helpservices / Learn about HTML Attributes
html-attribute

Learn about HTML Attributes

An attribute is used to define the characteristics of an HTML element and is placed inside the opening tag. All attributes are made up of two parts:

  • Name : The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
  • Value: The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

 

Example

<!DOCTYPE html>

<html>

<head>

<title> Attribute  Example</title>

</head>

<body>

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

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

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

</body>

</html>

 

Result :

Attribute-Example Learn about HTML Attributes Helpservices Web

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are:

  • id
  • title
  • class
  • style

id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. Reasons that you might want to use an id attribute on an element:

  • If an element carries an id attribute as a unique identifier it is possible to identify just that element and its content.
  • If you have two elements of the same name within a Web page , you can use the id attribute to distinguish between elements that have the same name.

Example:

<p id=”html”>What is HTML</p>

<p id=”css”>What is Cascading Style Sheet</p>

 

title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute:

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

Example: <!DOCTYPE html>

<html>

<head>

<title> Attribute Example</title>

</head>

<body>

<h3 title=”Hello Allhelpservices!”>Titled Heading Tag Example</h3>

</body>

</html>

 

class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element.

The value of the attribute may also be a space-separated list of class names.

For Example:

class=”class1 class2 class3″

 

style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

Example

<!DOCTYPE html>

<html>

<head>

<title> style Attribute</title>

</head>

<body>

<p style=”font-family:arial; color:#ffffff;”> text here…</p>

</body>

</html>

Some more attributes:

  • The dir Attribute: The dir attribute allows you to indicate to the browser the direction in which the text should flow.
  • The lang Attribute: The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
  • The xml:lang Attribute: The xml:lang attribute is the XHTML replacement for the lang attribute.

We will discusses Generic Attributes in next article.

About Chetan Kalbande

• Working knowledge in Magento, Wordpress, Joomla, PHP, HTML5, CSS3, Bootstrap front-end framework and Foundation front-end framework. Experience of PSD to HTML and HTML to Wordpress. Having knowledge on theme development of Wordpress, directory structure and responsive UI of Magento. E-Commerce development using Magento, Opencart, Woo-Commerce . Clean , attractive and responsive website development using Wordpress and Drupal. Estimation, design and development of various modules. Work on Search Engine Optimization to improve the search engine rank of website. Working knowledge and handling experience of Google Absence and different affiliates account. • Knowledge of Jquery Mobile, Android application development and Phone gap. Experience of Developing and maintaining web base portal or directory website. Work closely with the other team members to meet client goals. Promote on page SEO activities and also the interactions that build ranking, profile and traffic.

Check Also

Business Online

9 Ways To Promote Your Business Online For Free

Promote Your Business Online : Here are 9 simple yet powerful marketing tips for promoting ...

Leave a Reply