Tutorials

HTML Attributes

Attributes are those that will provide additional information about HTML elements.



HTML Attributes

 

The lang Attribute

 

The language of the document should be declared in the <html> tag.

The language should be declared with the lang attribute.

Declaring a language is very important for ensuring the accessibility of various applications (screen readers) and search engines:

Example

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a presence of a dialect, use two more letters (US).

The title Attribute

 

Here, a title attribute should be added to the <p> element. The value of the title attribute will be displayed as a tooltip when the mouse is hovered over the paragraph:

Example

<p title="I'm a tooltip">
This is a paragraph.
</p>
Try it Yourself

The href Attribute

 

HTML links will be defined with the <a> tag. The link address will be specified in the href attribute:

Example

<a href="http://daks.me">This is a link</a>
Try it Yourself

Size Attributes

 

HTML images will be defined with the <img> tag.

The source filename(src), and the image size (width and height of the image) are all given as attributes:

Example

<img src="/images/ngo.jpg" width="104" height="142">
Try it Yourself

The image size should be specified in pixels: width="104" means 104 screen pixels wide.

You will be learning more about images and the tag later in this tutorial.

The alt Attribute

 

The alt attribute denotes an alternative text that will be used, when an image cannot be displayed.

The alt attribute value can be read by screen readers. This way, a person who is "listening" to the webpage, e.g. a blind person, can "hear" the alt element as the text is not displayed.

Example

<img src="/images/ngo.jpg" alt="ngo.com" width="104" height="142">
Try it Yourself

We Suggest: Use Lowercase Attributes

 

The HTML5 standard will not be requiring lowercase attribute names.

The title attribute can also be mentioned using uppercase or lowercase attributes like Title and/or TITLE.

NGO always recommendsthe usage of lowercase in HTML, and demands the usage of lowercase for stricter document types like XHTML.

At NGO, lowercase attribute names are always used.

We Suggest: Quote Attribute Values

 

The HTML5 standard will not be requiring quotes around the attribute values.

The href attribute, as demonstrated in the above scenario, can be written as:

Example

<a href=http://daks.me>
Try it Yourself

NGO recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

Sometimes it is necessary to use quotes. This example will not display the title attribute correctly, because it contains a space:

Example

<p title=About NGO>
Try it Yourself

Using quotes are commonly found. Omitting quotes can lead to errors. At NGO quotes are always used around attribute values.

Single or Double Quotes?

 

Double quotes that are used around attribute values is commonly used in HTML, but usage of single quotes can also be done.

during certain situations, if the attribute value itself contains double quotes, it is necessary to use single quotes:

Example

<p title='John "ShotGun" Nelson'>

Or vice versa:

Example

<p title="John 'ShotGun' Nelson">

summary of the chapter

 

Test Yourself with Exercises

 

HTML Attributes

 

given Below is an list of some attributes that are frequently used in HTML:

Attribute Description
alt specifies an alternative text for an image, when the image cannot be shown or displayed
disabled Specifies to disable an input element
href Specifies the link URL (web address)
id Specifies an element's unique id
src Specifies an image's URL (web address)
style Specifies an element's inline CSS style
title Specifies element's extra information (displayed as a tool tip)

A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.