HTML Attributes

We have seen a few HTML tags and their usage, like heading tags

,

, paragraph tags

, and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

What are HTML Attributes?

HTML attributes are special words that provide additional information to an HTML element. Attributes are placed inside the element's opening tag, and they are used to configure or adjust the element's behavior. All attributes are made up of two parts: a name and a value −

• Name: The attribute name is the keyword, also known as the attribute identifier, which defines a specific characteristic for the element in which it is using. For example, the paragraph

  element (in the below-given example) has an attribute "align", which defines the alignment of the paragraph on the page.

• Value: The attribute value is the data or information that defines the value to be set for that attribute. The value is assigned within the double quotes. For example, "left", "center", or "right" can be assigned to the "align" attribute with the paragraph tag (as shown in the below example).

Below is the syntax of an element HTML having attribute −

...

Rules and Characteristics

The following are the rules and characteristics of HTML attributes; you should follow while using attributes with HTML elements:

• Attributes are optional; you can use them to provide additional information about an HTML element.
• Attributes have name and value pairs, but some of the attributes do not require any value; those are known as Boolean attributes.
• An HTML element can have multiple attributes, and they should be separated by spaces.
• Attributes should always be written with the opening tag.
• All HTML elements can have attributes except a few like ,

  Left Aligned

  Center Aligned

  Right Aligned

  HTML Core Attributes

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

  The id Attribute

  The id attribute of an HTML tag can be used to uniquely identify any 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.

  We are using the id attribute to distinguish between two paragraph elements −

  Example

  
  
  
     
  
  
     
  This para explains what is HTML
     
  This para explains what is Cascading Style Sheet
  
  
  

  The title Attribute

  The title attribute gives a suggested title for the element. The 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 the cursor comes over the element or while the element is loading.

  Example

  
  
  
     
  
  
     
  Titled Heading Tag Example
  
  
  

  On executing the above example, it will display the heading "Titled Heading Tag Example". If you bring your cursor over it, you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

  The class Attribute

  The class attribute specifies one or more CSS classes for an HTML element. Multiple classes can be used on a single element with this attribute. The value of this attribute is a space-separated list of class names if you are specifying multiple classes.

  Example

  class="className1 className2 className3"
  

  The style Attribute

  The style attribute allows you to write inline CSS rules for an element.

  Example

  
  
  
     
  
  
     
  Welcome to Tutorialspoint...
  
  
  

  On executing the above example, it will display the text "Welcome to Tutorialspoint..." in the "Arial" font and with a red color.

  HTML Internationalization Attributes

  There are three internationalization attributes, which are available for most (although not all) XHTML elements.

  The dir Attribute

  The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −

  S.No	Value & Meaning
  1	ltr Left to right (the default value)
  2	rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

  Example

  
  
  
     
  
  
     This is how IE 5 renders right-to-left directed text.
  
  
  

  If you click on Edit & Run, you can observe the text aligned to right.

  When dir attribute is used within the tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.

  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 values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

  Example

  
  
  
     
  
  
     This page is using English Language
  
  
  

  HTML Boolean Attributes

  Boolean attributes represent true and false values and do not require any value with the attribute name. To set the true value, you need to write the attribute's name, and to set it false, the attribute should be omitted altogether.

  Here are some Boolean attributes –

  • disabled
  • readonly
  • required
  • inert
  • autocomplete

  Example

  Here is an example of an HTML Boolean attribute (required) −

  
  
  
  
  Example of "required" attribute
  
  
    Input User Name:
    
    
  
  
  
  
  

  The xml:lang Attribute

  The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code, as mentioned in the previous section.

  HTML Generic Attributes

  Here's a table of some other attributes that are readily usable with many of the HTML tags.

  Attribute	Options	Function
  align	right, left, center	Horizontally aligns tags
  valign	top, middle, bottom	Vertically aligns tags within an HTML element.
  bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
  background	URL	Places a background image behind an element
  id	User Defined	Names an element for use with Cascading Style Sheets.
  class	User Defined	Classifies an element for use with Cascading Style Sheets.
  width	Numeric Value	Specifies the width of tables, images, or table cells.
  height	Numeric Value	Specifies the height of tables, images, or table cells.
  title	User Defined	"Pop-up" title of the elements.

  We will see related examples as we proceed to study other HTML tags. For a complete list of HTML tags and related attributes, visit: HTML Tags Reference and HTML Attributes Reference.

  Best Practices for Using HTML Attributes

  There are certain practices you should follow to use attributes on any element, please check the below-mentioned ways to do so:

  1. Write Values in Quotes

  You should always write the attribute values in single or double quotes.

  
  
     HTML Introduction
  
  
  
  
     HTML Introduction
  
  

  2. Use Lowercase

  HTML is case-insensitive, but the good practice is to write the HTML attribute in lowercase.

  3. Use of Single and Double Quotes Together

  When you need to provide any string in quotes as the value of an attribute, you can use the combination of single and double quotes.

  
  
      Tutorialspoint
  
  
      Tutorialspoint
  
  

  Print Page

  Previous

  Next
  Advertisements