HTML Attributes
HTML attributes provide additional information about an element. They are used to modify the behavior or appearance of an element. Let's take a look at some common HTML attributes.
They are placed within the element's opening tag and consist of two parts: the name and the value.
Name: Specifies the property for that element.Value: Sets the value of that property for the element.
Types of HTML Attributes
There are three main types of HTML attributes:
Core Attributes: These are basic attributes that can be applied to most HTML elements. Examples include id, class, and style.Internationalization Attributes: These attributes help adapt the document to different languages and regions. Examples include lang and dir.Generic Attributes: These attributes provide additional information about the element but don't necessarily affect its appearance or behavior. Examples include data-* attributes for storing custom data private to the page or application.
Core attributes are some of the most widely used attributes in HTML. There are four main types:
ID Attribute
The ID attribute is used to assign a unique identifier to an HTML element. Each element with an ID has its own unique identity, similar to how each individual has a unique identity. Multiple elements cannot have the same ID.
Example:
<p id="html">This is an HTML tutorial</p>
<p id="python">This is a Python tutorial</p>In this example, the ID attribute helps to distinguish between two paragraphs by having different values: html and python.
Class Attribute
The class attribute is used to associate an HTML element with a particular class, typically for styling or JavaScript manipulation. Unlike the ID attribute, the class attribute is not unique, and multiple elements can share the same class.
Example:
<p className="bg-red">This is an HTML tutorial</p>
<p className="text-blue">This is a Python tutorial</p>In this example, the class attribute helps to style the paragraphs differently based on the class values: bg-red and text-blue.
Title Attribute
The title attribute provides additional information about an element and is often displayed as a tooltip when the mouse hovers over it.
Example:
<h4 title="hello, motto">Title attribute</h4>In this example, the title attribute displays the text "hello, motto" as a tooltip when the mouse hovers over the heading.
Style Attribute
The style attribute allows for inline styling of HTML elements. It is used in conjunction with CSS properties to directly style individual elements within the HTML code.
Example:
<p style="color: red; font-size: 16px;">This is a styled paragraph</p>In this example, the style attribute sets the color to red and the font size to 16px for the paragraph.
Case Sensitivity
HTML attributes are case-insensitive, meaning you can use uppercase, lowercase, or a mix of both. However, it's a common practice to use lowercase for consistency and readability.
Conclusion
- HTML attributes provide additional information about an element.
- They consist of a name and a value.
- There are three main types of attributes: core, internationalization, and generic.
- Core attributes are widely used and include id, class, title, and style.
- Attributes are case-insensitive, but lowercase is recommended for consistency.
How is this guide?
Sign in to share your feedback
Help us improve by sharing your thoughts on this guide.
Last updated on
Textarea & Select
Textarea and select are two essential form elements in HTML that allow users to input text and select options from a list. In this tutorial, we'll explore how to create textarea and select elements in HTML forms.
HTML Comments
HTML comments are used to add notes or annotations to an HTML document. They are not displayed on the web page but can be viewed in the source code. Let's take a look at how to add comments in HTML.