HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Attributes
When working with HTML, attributes are used to define extra information about an element. You can think of them like description labels that control how the element behaves, appears, or is identified on a webpage.
What is an HTML Attribute?
An attribute is a name-value pair that is added inside the opening tag of an HTML element. It consists of:
- Name: The attribute name, like
id,class, orstyle. - Value: The assigned setting or information for that attribute, written in quotation marks.
For example:
<p id="intro">Welcome to HTML</p>
Here, id is the attribute name, and intro is the value. This tells the browser that this paragraph has a unique identifier called “intro”.
Types of HTML Attributes
HTML attributes come in several types. Here’s a breakdown of the most commonly used ones:
1. Core Attributes
These can be applied to most HTML elements. They help identify, style, or label an element.
id: Unique identifier for one element.class: Groups multiple elements together.title: Adds a tooltip text that appears on hover.style: Adds CSS styles directly inside the tag.
2. Internationalization Attributes
These help websites support different languages and reading directions.
lang: Specifies the language of content.dir: Sets the text direction (like left-to-right or right-to-left).
3. Generic / Custom Attributes
These provide custom data for use in JavaScript and other applications.
data-*: A flexible way to store custom information inside elements without affecting layout or functionality.
ID Attribute
The id attribute assigns a unique identity to an element – no two elements on a page can share the same id. It’s mostly used for linking, styling, or scripting.
Example:
<p id="welcome">Hello, User!</p>
Now you can style it or access it directly with CSS or JavaScript using this id.
Class Attribute
Unlike id, the class attribute is not unique. Multiple elements can share the same class, making it ideal for grouping similar elements together for styling or scripting.
Example:
<p class="note">This is a note.</p>
<p class="note">This is another note.</p>
Style Attribute
The style attribute allows you to write inline CSS to instantly style the element.
Example:
<p style="color: blue; font-size: 18px;">Styled paragraph</p>
Although inline styles are useful for quick edits, using CSS in a separate stylesheet is preferred for larger projects.
Title Attribute
This attribute provides tooltip-like information when a user hovers over the element.
Example:
<h3 title="Click to learn more">Hover over me!</h3>
Hovering over this heading would show “Click to learn more” as a small popup tip.
Case Sensitivity in Attributes
In HTML5, attribute names are not case-sensitive – meaning ID, Id, and id all work. However, lowercase is recommended by web standards and best practices, especially if you’re working with XHTML or strict HTML.
Summary
- Attributes add extra meaning and customization to HTML elements.
- They are written in the opening tag using
name=”value” idandclassare used for identification and styling.- Title gives tooltip info; style allows inline design tweaks.
- Use
data-*for custom data needs in scripts. - Always prefer lowercase for better compatibility.