HTML Attributes

Attributes are define in all the HTML tags. With attributes, you can configure the contents of the tags according to you.

Attributes are use for advanced configuration. Attributes are give additional commands by the interpreter, which tells them how to show the content of an element.

Syntax of HTML Attributes

The general syntax for defining attributes in HTML given below.

<tagName attrName="value">
some content here…
</tagName>

As you can see in the syntax above, the attributes are always define in the start tag. These are written in pairs of name and value.

Example

It is very easy to use attributes. You just need to know which place to use which attribute. Let’s try to understand the use of attributes with an example.

<!DOCTYPE html>
<html>
<head>
<title>myPage</title>
</head>
<body bgcolor="black">
<h1 style="color:pink"> Heading </h1>

<p style="color:yellow">
This is a paragraph. And you are learning HTML.</p>
</body>

</html> 

Guidelines For Using HTML Attribute

There are some guide lines to use HTML attributes. By following which you can make better use of attributes. These are being given below.

  • Always define attributes in lowercase.
  • Always define the attributes of values ​​in the quotation mark.

HTML Global Attributes 

HTML has global attribute that are commonly used with all HTML tags. Their list is being given below.

CLASS

Class attribute is also similar to id attribute. The id of a tag is unique and can not be define for the second tag. But many elements can define the same class. This is use to apply the same styles to multiple tags.

<tagName1 class="myClass">other content </tagName1>
<tagName2 class="myClass">other content </tagName2>

ID

Id attribute is use to define the unique id of a tag. Different styles can be apply to that tag from the value define in this html attributes.

<tagName id="id-here">other content</tagName>

STYLE

Style attribute is use to apply CSS rules to an element. The CSS apply by this attribute called inline CSS.

<tagName style="rule:value;">content</tagName>

TITLE

With the title attribute you can specify the name of an element or give more information about it.

<tagName title="name">content</tagName>

ACCESSKEY

With this attribute you can define a shortcut key to create a focus on a tag.

<tagName accesskey=" ">content</tagName>

DIR

This attribute defines the direction of the content defined in the tag inside the tag. This attribute can be define by rtl, ltr and auto three values.

<tagName dir="value">content</tagName>

LANG

This attribute is use to define the language of content inserted inside the tag.

<tagName lang="EN">content</tagName>