1. What are HTML Attributes?

HTML attributes contains special information, that when specified in an element, change the behaviour of that element as compared to normal behaviour. Using attributes gives extra qualities and abilities to HTML code and wisely tells the browser how to render this element on the basis of these attributes.

Tutorial Contents:

  1. Introduction to HTML Attributes
  2. Characteristics of Attributes
  3. Usage of Attributes

2. Characteristics of HTML Attriutes

Following are the characteristics of HTML attributes:

  • These attributes provides element specific information
  • The information in the attribute are useful only for that specific element
  • The attributes always come in the starting tag of an HTML element
  • All HTML elements can have attributes, depending on the type of element
  • Also HTML attributes come in pairs, like attribute name and attribute value
  •  The attributes may have different types, presentational or semantic, also some attributes are deprecated. See complete list of attribute types Presentational Type Attributes

2.1. The src Attribute

When we need to add an html image in the document, we use src attribute. Also this attribute can locate the source of a javascript script in head section of the document. See usage below:

src Example

When we add an image:
<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<body>
<img src="https://www.tutsinsider.com/logo.png" alt="Tuts Insider" />
</body>
</html>

Try in CodeLab

src Example

When we add javascript file:
<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
<script src="https://www.tutsinsider.com/mycode.js" type="text/javascript"> </script>
</head>
<body>
<--Body Content Goes here-->
</body>
</html>

Try in CodeLab

2.2. The href Attribute

When we use HTML links, we use href attribute to specify the link source. Consider following example:

href Example

<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<body>
<a href="https://www.tutsinsider.com/html/html-attributes">This is a Link</a>
</body>
</html>

Try in CodeLab

2.3. The style Attribute

To add an inline styles, we use style. Apart from linking stylesheet or adding styles in the head of the document, we can specify styles within the element. Consider following example:

style Example

<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<body"">
<p style="background-color: #fff; font-size: 20px; color: red;">This is a paragraph in red.</p>
</body>
</html>

Try in CodeLab

2.4. The lang Attribute

Whenever we specify the website base language, we use lang attribute. We use this attribute in the html tag of the document. Consider following example:

lang Example

<!Doctype HTML>
<html lang="en-US">
<head>
<title>Tuts Insider</title>
</head>
<body>
<p>This outermost parent element, i.e html  contains lang attribute.</p>
</body>
</html>

Try in CodeLab

Language declaration is important because search engine indexes your website on the basis of language also, and provides language based results in the search results. It is also important for screen readers in accessibility apps, for blind people.

2.5. The title Attribute

Several html elements accepts title attribute. Its function is whenever a user hover the mouse on the element which have title attribute, a tooltip pops with a text, specified in the attribute. Consider following example:

title Example

<!Doctype HTML>
<html lang="en-US">
<head>
<title>Tuts Insider</title>
</head>
<body>
<!--hover on the paragraph to see the title-->
<p title="Hi I am a paragraph.">This is a paragraph.</p>
</body>
</html>

Try in CodeLab

3. HTML Attributes Usage

The attributes can be used in several ways, but certain practices are best and might produce error free results or chances of errors are minimized.

3.1. Use of HTML Attributes in Lower Case

HTML5 does not focus on the case of attributes. Attributes can have uppercase or lowercase entities. But W3C recommends strongly to use lower case attributes for strict type documents like xhtml. In the following example, both attributes title and TITLE will have same results in the browser.

Example

<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<body>
<p title="Hi I am a paragraph.">This is a paragraph.</p>
<p TITLE="Hi I am a paragraph.">This is a paragraph.</p>
</body>
</html>

Try in CodeLab

3.2. Use of quotes in HTML Attributes

HTML5 does not strict the use of quotes around attribute values. Following example shows two different ways to specify attributes.

Example

Attributes with quotes
<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<body>
<a href="https://www.tutsinsider.com/html/html-attributes">This is a Link</a>
</body>
</html>

Try in CodeLab

Example

Attributes without quotes
<!Doctype HTML>
<html>
<head>
<title>Tuts Insider</title>
</head>
<body>
<a href=https://www.tutsinsider.com/html/html-attributes>This is a Link</a>
</body>
</html>

Try in CodeLab

Both above examples produce same results, but W3C recommends strictly to use quotes in attributes. Also use of attributes should be made in practice, because sometimes browser do not render attributes without quotes.

At Tuts Insider, we have custom to use the attributes surrounded within quotes. Because sometimes, attributes without quotes produce errors. Also double quotes around attributes are common but we can use single quotes also.
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us