HTML Attributes.

HTML  Attributes

About HTML Attributes:-

HTML attributes give additional information about elements. Most of the HTML tags can also have attributes, which are extra bits of information about the HTML element. An attribute is used to define the characteristics of an HTML element and it is placed inside the element’s starting tag. All attributes are made up of two parts − a name and a value like (name=”value”) For Example: <Tag Name  Attribute Name=”value” > Content goes here </tag name>

Example:- 

   <h1 align=”center”> This is heading tag </h1>

   <img src=”xyz.jpeg”>

   <p title=”hello world”> this is paragraph tag</p>
 

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

Some Core  HTML Attributes:-

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

  1. Id
  2. Class
  3. Title
  4. Style

1. The id Attribute:-

The id attribute of an HTML tag can be used to uniquely identify any HTML element within an HTML page. There are two primary 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 (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

Example:-

<P Id=”Id Name”> Paragraph content goes here </p>

Note:- The Id attribute specifies a unique id for an HTML element. The value of the  Id attribute must be unique within the HTML document.


2. The class Attribute:-

The Class attribute is used to specify a class for an HTML element.  And multiple HTML elements can share the same class attributes.

Example:- 

<P Class=”Class Name”> Paragraph content goes here </p>


3. The Title Attribute:-

The title attribute gives extra information about an element.

The syntax for the title attribute:  title=”text”

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

For example:-

<P title=” i m paragraph”> Paragraph content goes here </p>


4. The style Attribute:-

The style attribute allows you to specify an inline style within the element.

The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet. The style attribute is part of the Global Attributes and can be used on any HTML element.

For Examples:-

<h1 style=”color:red; text-align:right “>This is a header</h1>

<p style=”font-size:30px”>This is a paragraph.</p>


Some Global HTML Attributes:-

The global attributes are attributes that can be used with all HTML elements.

Some global Attributes are as follows in the table given below:-

AttributeDescription
accesskeySpecifies a shortcut key to activate/focus an element
classSpecifies one or more class names for an element (refers to a class in a style sheet)
contenteditableSpecifies whether the content of an element is editable or not
data-*Used to store custom data private to the page or application
dirSpecifies the text direction for the content in an element
draggableSpecifies whether an element is draggable or not
hiddenSpecifies that an element is not yet, or is no longer, relevant
idSpecifies a unique id for an element
langSpecifies the language of the element’s content
spellcheckSpecifies whether the element is to have its spelling and grammar checked or not
styleSpecifies an inline CSS style for an element
tabindexSpecifies the tabbing order of an element
titleSpecifies extra information about an element
translateSpecifies whether the content of an element should be translated or not