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.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.