HTML Attributes

Elements in HTML define the structure of the web page and attributes specify additional information about an HTML element and modify its default behavior. Attributes appear within the opening tag of an element. See the following example-

Example:

<!doctype html>
<html lang="de">
     <head>
         <meta charset="utf-8">
         <title>Untitled Document</title>
     </head>

     <body>
         <h1>HTML für Anfänger</h1>
     </body>
</html>

In the above example, in line 2, the lang is an attribute. It is short for language and used in the html element. Mentioning “de” as attribute value, the lang attribute specifies that the language used in this HTML page is German. Note, if you don’t mention the lang attribute in HTML element, the default language is English.

Anatomy of an attribute

Anatomy of an html attribute

Usually, an attribute has a name and a value (as you can see the above picture). Name and value are connected with an equal sign. The name is on the left side and the value is on the right side of the equal sign. Some important notes about attributes.

  • Attributes can only be added in starting tag and never in end tag.
  • It is customary to use lowercase as attribute name and its value. In HTML5, attribute name and attribute value are case-insensitive. You could write the above line as
    <html LANG=”DE”>, <html LANG=”de”>.
  • Either single quotation marks or double quotation marks can be used to surround the attribute value but don’t mix those. Using quotation mark in attribute is optional in HTML5. The following line is also valid in HTML5-
    <html lang=de>
  • If the attribute value has single quote in it, then use double quote to surround it and vice-versa.
    Example: <p data-name=”John’s pen”>, <p data-quotation=’ “So many books, so little time.”-Frank Zappa’>
  • If an attribute value consists of more than one word or character separated by spaces, then the attribute value must be enclosed by quotation mark.
    Example, <p data-quantity=”100 kg”>
  • An element may include one or more attributes.
  • An element can take one or more attributes from a defined set of attributes for that element. So you can’t use whatever attribute you like to an element. As you go through this course, you’ll see which attribute can be used in which element.

Attribute types

Depending on the following criteria, attributes can be categorized.

  1. Presence of attribute values
  2. Possibility of using an attribute in an element
  3. Pre-existence of attributes

Depending on the presence of attribute values, attributes can be categorized as boolean attribute.

Boolean attributes

Some attributes don’t require value; that means, they don’t consist of name/value pairs. This type of attribute is called boolean or minimized attribute. Without having any value, this attribute expresses a complete sense.

In boolean system, everything has one of two states – true / false. In HTML, the presence of a boolean attribute indicates true state otherwise false state.

Example:

….
 <input type=”checkbox” checked />
….

In the above example, checked is a boolean attribute. This line displays a checkbox that you’ve seen in various forms and the checked attribute marks the checkbox as checked.

If you want to indicate the state of the boolean attribute in the above example, you can rewrite the it as-

Example:

….
 <input type=”checkbox” checked=”true” />
….

Depending on the possibility of using an attribute in an element, attributes can be categorized as global attribute.

Global attributes

Global attributes could be used in any HTML element. Here is the list of global attributes-

accesskey id
class lang
contenteditable spellcheck
contextmenu style
dir tabindex
draggable title
dropzone translate
hidden

Depending on the pre-existence of attributes, it can be divided into two types–

  • Predefined attributes
  • Custom data attributes

Predefined attributes

HTML comes with lots of predefined attributes. See the following example

<!doctype html>
 <html lang="de">
     <head>
…….

In line 2, lang is a predefined attribute which specifies the language used in the html element.

Custom data attributes

HTML5 facilitates to create your own attributes and to assign value of your choice in it.

  • If you can’t find any existing attribute that holds the value you like to store of an element, then you can assign a custom data attribute.
  • This data could be useful for javascript application as it doesn’t require interacting with server; instead, it gets the data from the custom data attributes.
  • A custom data attribute must starts with data- and then the attribute name. After data- prefix, there should have at least one character which must not include any upper case letter. Ex, data-price, data-amount.
  • Browsers ignores the custom data attribute and hence don’t display in the browser.
  • Example: 
    ....
 <p data-price=”$119”>Kindle paperwhite</p>
....

    In the above code, we used a custom data attribute data-price which holds the price of the Kindle paperwhite.

You’ll know more about custom data attribute later in an appropriate section.

<< HTML Tags : Previous Lesson Next Lesson : HTML Meta Tags >>