HTML Attributes | Types, Example
HTML attributes are properties of tags that provide additional information about HTML elements. We can use them to modify the behaviour of HTML elements.
Each tag or element can have attributes which define the behaviour of that element. We can use attributes to create dynamic and engaging web pages.
The syntax of an HTML attribute consists of the attribute name, followed by an equal sign (=), and the attribute value, enclosed in either single or double quotation marks. The general syntax for an attribute is as:
attribute_name = "attribute_value"
In the above syntax, attribute_name is the name of attribute and attribute_value is the value of an attribute. The name of attributes and values are case sensitive. So, W3C recommends it they should be written in lowercase only.
Syntax of HTML Attributes in Element
We always place attributes after the element name, separated by a space. The general syntax to place an attribute with its value within an empty element is as:
<element attribute_name="value">
Example 1:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr color = "red">
</body>
</html>When you will run this code, it will show a red horizontal line on the web browser. The general syntax to place an attribute with its value within a non-empty element is as:
<element attribute_name="value">Content</element>
[adinserter block=”5″]
In non-empty element, attributes go in the opening tag only. We cannot put them within the closing tag.
Example 2:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style = "color: red">Heading 1</h1>
</body>
</html>
When you will run this code, you will get the following output on the web browser.
We can also put more than one attribute in an element in any order. Just keep them separated by spaces. The general syntax is as:
<element attribute1 = "value" attribute2 = "value">
Look at the below figure where an img element with two attributes.
Key points of HTML Attributes:
There are several important points about HTML attributes you should keep in mind while working with attributes.
(1) We can put attributes after the element name in the opening tag only, never in the closing tag.
[adinserter block=”2″]
(2) As per need, we can apply several attributes to an element, separated by spaces in the opening tag. Their order is not important.
(3) Most HTML attributes take values, which follow an equal sign (=). Some attribute values take a single descriptive word.
(4) An attribute’s value can comprise a word, a string of text, a number, a URL, or a measurement, depending on the purpose of the attribute. You’ll see examples of all of these in the further HTML tutorial.
(5) Enclosing attribute values in double quotes is a strong convention, but quotation marks are not requisite in HTML5. We may omit them.
(6) HTML allows us to enclose attribute values either in single or double quotation marks. Both are acceptable as long as the opening and closing marks match. Note that quotation marks in HTML files must be straight (“), not curly (”).For example:
<a href="https://www.scientecheasy.com">A link to HTML</a> <a href='https://www.scientecheasy.com'>A link to HTML</a>
In HTML5, we can also omit the use of quotation marks around attribute values. For example:
<a href=https://www.scientecheasy.com>A link to HTML</a>
(7) We cannot make up an attribute for an element because HTML5 specification has already defined the attribute names and values for each element.
Types of HTML Attributes
There are mainly three types of HTML attributes. They are as:
- Global attributes
- Event attributes
- Element-specific attributes
(1) Global attributes: We can use these attributes with any HTML element. They provide a general-purpose way to add additional information to an element. Some commonly used global attributes are class, id, style, and title.
(2) Event attributes: We use these attributes to define how an element responds to user actions, such as clicks or mouse movements. Some commonly used event attributes are onclick, onmouseover, and onmouseout.
(3) Element-specific attributes: These attributes are unique for specific HTML elements that provide additional customization options for elements. For example, we use the src attribute to specify the URL of an image in the img element. Some commonly used element-specific attributes are src, href, and type.
You will learn all attributes in HTML with the help of examples in the further tutorial one by one.
Guidelines for using HTML Attributes
When dealing with attributes in HTML, it is essential to follow the guidelines that make your web pages both accessible and SEO-friendly. Some important guidelines that you should keep in mind:
- Always try to use descriptive attribute values that accurately describe the content of the element.
- You should use the correct type of attribute for the content being added. For example, use alt attribute for an image to provide alternative text for users who cannot see the image.
- Try to use CSS instead of inline styles whenever possible to separate presentation from content.
- Avoid using too many attributes on a single element because it can make your code difficult to read and maintain.
- Use event attributes sparingly, as they can make your code more complex and difficult to debug.
SEO Considerations for HTML Attributes
HTML attributes can affect your website’s search engine optimization (SEO). Here are some important things you should keep in mind:
- Use descriptive alt attributes for images to help search engines so that they could understand the content of your web page.
- Add a title attribute to provide additional information about the link, which can improve the user experience and increase click-through rates.
- Avoid using keyword stuffing in your HTML attributes, as search engines can see as spammy this.
Common Mistakes to Avoid While Using Attributes
While using HTML attributes, there are some common mistakes you should avoid. They are a few as:
- Using inline styles instead of CSS.
- Usage too many attributes on a single element.
- Usage event attributes excessively.
- Using empty alt attributes on images.
- Using irrelevant or misleading attribute values.
In this tutorial, you have learned about HTML attributes that provide us a powerful tool for customizing and controlling the behavior of a web page. Hope that you will have understood all the basic points of attributes in HTML with examples.
Thanks for reading!!!
⇐ Prev Next ⇒
