The Wayback Machine - https://web.archive.org/web/20241006111256/https://www.geeksforgeeks.org/html-attributes-complete-reference/
Open In App

HTML Attributes Complete Reference

Last Updated : 09 Sep, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

HTML attributes are special words placed inside the opening tags of HTML elements to define their characteristics. Each attribute consists of two parts: the attribute name and its value, separated by an equal sign (=) and enclosed in double quotes (” “).

Syntax of HTML Attribute

<tag_name attribute_name="value"> Contents... </tag_name>

Overview of HTML Attributes

HTML attributes are used in modifying the behavior and appearance of HTML elements. There are various types of attributes, each serving a specific purpose. Some attributes are global, meaning they can be used with most HTML elements, while others are specific to certain elements.

Types of HTML Attributes

HTML attributes can be categorized into different types based on their functionality. Some common types of attributes include:

  • Style attributes: Used to define the visual styling of elements, such as color, background, and font.
  • Event attributes: Used to specify actions that occur in response to user interactions, such as mouse clicks or key presses.
  • Attribute-element Attributes: Used to define the relationship between elements, such as the src attribute of the img element.
  • Form Attributes: Used to define the behavior of form elements, such as the action attribute of the form element.

Example: This example shows the basic use of HTML attributes.

HTML 
<!DOCTYPE html>
<html>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>HTML maxlength Attribute</h2>
    
    <form action="">
        <label for="username">Username:</label>
        <input type="text" name="username" maxlength="12">
        <br><br>
        <label for="password">Password:</label>
        <input type="text" name="password" maxlength="10">
        <br><br>

        <input type="submit" value="Submit">
    </form>
</body>

</html>

Output:

maxlength-attribute

HTML Attributes Complete References

The complete list of HTML attributes are given below.

Attributes:

Description

Example

acceptThis attribute can be used with <input> element only.
Try
accept-charsetDefine character encoding and is used for form submission.
Try
accesskeyThe keyboard shortcuts to activate/focus specific elements.
Try
actionSpecify where the form data is to be sent to the server after submission of the form.
Try
alignSpecify the alignment of text content of The Element.
Try
altShow or display something if the primary attribute
Try
asyncOnly works for external scripts (and used only in when src attribute is present ).
Try
autocompleteSpecify whether the input field has autocompleted would be on or off.
Try
autoplayThe audio/video should automatically start playing when web page is loaded.
Try
autofocusThe element should get focused when the page loads. It is a boolean attribute.
Try
bgcolorSet the background color of an HTML element.
Try
borderSet visible border width to most HTML elements within the body.
Try
charsetDefine character encoding.
Try
checkedIndicate whether an element should be checked when the page loads up. It is a Boolean attribute.
Try
citeSpecify the URL of the document that explains the quotes, message or text which describes why the text was inserted.
Try
ClassSpecifies one or more class names for an HTML element.
Try
colsThe number of columns a cell should span.
Try
colspanHTML specifies the number of columns a cell should span.
Try
contentThe values that are related to the http-equiv or name attribute.
Try
contenteditableSpecify whether the content present in the element is editable or not.
Try
controlsIt is a Boolean attribute and also new in HTML5
Try
coordsSpecify the coordinate of an area in an image-map
Try
dataSpecify the URL of the Embedded file of the Object.
Try
data-*Specific to HTML5 and you can use the data-* attribute on all HTML elements.
Try
datetimeSpecify the date and time of the inserted and the deleted text.
Try
default Specify that the track will be enabled if the user’s preferences do not indicate that another track would be more appropriate.
Try
deferExecuted when the page has finished parsing.
Try
dirThe text direction of the element content.
Try
dirnameEnable the text direction of the input and the Textarea Field after submitting the form.
Try
disabledThe disabled attribute in HTML indicates whether the element is disabled or not.
Try
downloadDownload the element when the user clicks on the hyperlink
Try
draggableSpecify whether an element is draggable or not.
Try
dropzoneSpecify whether the dragged data is copied, moved, or linked when it is dropped on any element.
Try
enctypeThat data will be present in the form and should be encoded when submitted to the server.
Try
forFor Attribute is used in both the <label> and the <output> element.
Try
formThat the element can contain one or more forms
Try
formactionSpecify where to send the data of the form. After submission of the form, the formaction attribute is called.
Try
headersThe HTML headers attribute specifies one or additional header cells a table cell is expounded to.
Try
heightheight attribute is used to specify the height of the Element.
Try
hiddenThe hidden attribute in HTML is used to define the visibility of elements.
Try
highThe range where the value of gauge is considered to be of high value.
Try
hrefIt is used to specify the URL of the document.
Try
hreflangThe language for a linked document. It is used only when the href attribute is set.
Try
http-equivProvide header information or value of the content Attribute.
Try
IdIt is used by CSS and JavaScript to perform a certain task for a unique element.
Try
ismapThe HTML ismap attribute is a boolean attribute.
Try
kindThe kind of track. This attribute is only used in <Track> element.
Try
labelThe title of the Text Track is used by the browser when listing available text tracks.
Try
langSpecify the language of the element content.
Try
listList of pre-defined options for an <input> element to suggest the user.
Try
loopRestart the audio and video again and again after finishing it. It contains the Boolean value.
Try
lowThe range where the value of gauge is considered to be low.
Try
maxSpecifies the maximum value of an element.
Try
maxlengthThe maximum number of characters in the <input> element. Its default value is 524288.
Try
mediaSpecify the media or device the coupled document is optimized for.
Try
methodThe HTTP method is used to send data while submitting the form.
Try
minSpecify the lower bound of the gauge.
Try
multipleAllowed to select more than one value that is present in an element.
Try
mutedThe audio output of the video is muted, it is a Boolean attribute.
Try
nameSpecify a name for the element.
Try
novalidateThat the form-data should not be validated when submitting the form.
Try
onblurThat moment when the element loses focus.
Try
oncopyThe user copied the content present in an element.
Try
oncutThe user cut or delete the content that has been present in the element.
Try
onkeypresswhen a user presses a key on the Keyboard.
Try
onmousedownOrder of events occurs related to the onmousedown event.
Try
onscrollThis onscroll attribute works when an element scrollbar is being scrolled.
Try
optimumThe optimum attribute in HTML indicates the optimal numeric value for the gauge.
Try
patternSpecifies a short hint that describes the expected value of an input field/text area.
Try
placeholderSpecifies a short hint that describes the expected value of an input field/text area.
Try
readonlySpecify that the text written in input or text area Element is read-only.
Try
requiredSpecify that the input element must be filled out before submitting the Form.
Try
reversedOrdered the list in Descending Order(9, 8, 7, 6 …..) instead of ascending order(1, 2, 3 ….)
Try
rowsThe number of visible text lines for the control i.e the number of rows to display.
Try
rowspanThe number of rows a cell should span.
Try
selectedSpecify which option should be by default selected when the page loads.
Try
sizeSpecify the initial width for the input field and a number of visible rows for the select element.
Try
spellcheckApplied to HTML forms using the spellcheck attribute.
Try
srclangSpecify the language of the track text.
Try
startThe start value for numbering the individual list item.
Try
stepSet the discrete step size of the <input> element.
Try
styleThere are 3 ways of implementing style in HTML.
Try
tabindexWhen the tab button is used for navigating.
Try
targetSpecify where to open the linked document.
Try
titleSpecify extra information about the element.
Try
translateSpecify whether the content of an element is translated or not.
Try
valueSpecify the value of the element with which it is used.
Try
wrapSpecify in which manner the text is to be wrapped in a text area when a form is submitted.
Try


https://media.geeksforgeeks.org/auth/avatar.png
GeeksforGeeks
News
Improve
Previous Article
HTML Tags - A to Z List
Next Article
HTML Global Attributes

Similar Reads

HTML Event Attributes Reference
Events are actions that happen in the browser when the user does something For example when users click on the mouse or type something on the keyboard. HTML Event Attributes: In HTML, we can use event actions on the browser, and with the help of the event, the user responds to the system. Event Attributes can be used with HTML elements to perform v
5 min read
HTML DOM Complete Reference
HTML DOM: The Document Object Model (DOM) is a programming interface for HTML(HyperText Markup Language) and XML(Extensible markup language) documents. Example: C/C++ Code <!DOCTYPE html> <html> <head> <title>DOM console.count() Method</title> <style> h1 { color:green; } h2 { font-family: Impact; } body { text-al
15+ min read
HTML Canvas Complete Reference
The HTML “canvas” element is used to draw graphics via JavaScript. The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. Example: This example shows the basic use of Canvas in HTML. C/C++ Code <!DOCTYPE h
4 min read
HTML DOM Audio/Video Complete Reference
HTML DOM is an object model for programming interface. It is used to modify the structure, style and content of HTML document. The DOM Audio/Video contain the methods and properties related to audio and video. The complete list of HTML DOM Audio/Video methods and properties are given below: HTML Audio/Video Methods: Audio/Video Methods Description
6 min read
jQuery HTML/CSS Methods Complete Reference
JQuery provides methods to control the DOM inefficient way. JQuery provides methods that act as getter, retrieving information from DOM elements like .attr(), .html(), and .val(). All the selectors included in CSS are supported in jQuery. jQuery CSS Methods are used to apply CSS properties on DOM elements. Syntax: $(selector).method(attribute.., fu
3 min read
How to remove all attributes of an HTML element using jQuery ?
In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, function() { this.ownerElement.removeAttributeNode(
1 min read
HTML DOM attributes Property
The attributes property in HTML DOM returns the group of node attributes specified by NamedNodeMap objects. The NamedNodeMap object represents the collection of attribute objects and can be accessed by index number. The index number starts at 0. Syntax: node.attributes Return Value: It returns the NamedNodeMap object which is the collection of node
2 min read
Difference between 'hidden' and 'aria-hidden' attributes in HTML
The HyperText Markup Language (HTML) is a powerful web development tool combined with CSS and JavaScript. Apart from these, HTML also uses Accessible Rich Internet Application (ARIA) to make web content affable for a person with disabilities. Although ARIA is beneficial, there are keywords common to both HTML and ARIA, creating perplexity among ama
2 min read
Why are dashes preferred for CSS selectors / HTML attributes ?
CSS is a hyphen-delimited syntax language which means while writing HTML attributes we can use hyphen(-). Example: font-size, line-height, background-color, etc... There are various reasons to preferring hyphen(-): In CSS, one can use underscore(_) instead of hyphen(-) for CSS selectors(class, id, span, ...), but preference is given based on its ea
2 min read
What is the difference between properties and attributes in HTML?
HTML is the standard language for creating documents that are intended to be displayed on web browsers. It is very usual to get confused with attributes and properties while performing DOM object manipulation in JavaScript. Before learning about the differences, let us first define the Document Object Model. DOM: It is the acronym for the Document
4 min read
How to add attributes to an HTML element in jQuery?
Given an HTML document containing some elements and the task is to add the attributes to the HTML elements. Approach: Given an HTML document containing <label>, <input> and <button> elements. The <input> element contains the type and id attribute. When user click on the button, the jQuery function is called. We use $(selecto
1 min read
Placeholder vs Value Attributes in HTML
Placeholder Attribute:The placeholder attribute specifies a short hint that describes the expected value of an input field/textarea. The short hint is revealed in the field before the user enters a value. It is just a temporary hint and has nothing to do with logical executions in the backend. Syntax: <input placeholder = "text"> <textarea
3 min read
What are HTML tags & Attributes mandatory for a good Web page in SEO ?
Search engine optimization (SEO) is the process that involves enhancing the visibility of a website on search engines. This is achieved by increasing the website's ranking on search engine results pages, such as Google. The higher the website appears on these pages, the more likely it is to receive a larger volume of traffic. SEO involves understan
5 min read
Attributes that work differently between React and HTML
There is a minor difference between React(JSX) and HTML attributes. Like for example, the HTML attributes like class and for are replaced with className and htmlFor in React. There are a number of attributes that work differently between React and HTML. Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for.
3 min read
What is the purpose of the HTML "aria-*" attributes?
The HTML "aria-*" attributes, part of WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), are used to enhance the accessibility of web content. These attributes provide additional information to assistive technologies, such as screen readers, in interpreting and presenting content to users with disabilities. Syntax<b
1 min read
Difference Between Async & Defer Attributes in HTML
The async and defer attributes on a <script> tag in HTML are used to control the loading and execution behavior of external JavaScript files. While both of them have their own set of advantages and disadvantages, one should know which attribute is used at the right time. The difference between the async and defer attributes in HTML are as fol
5 min read
What are HTML Attributes ?
HTML attributes are the entities that provide the extra information about the tags. Attributes are specified using name and value pair. Some HTML tags are used without attributes while for some tags it's important to specify attributes along with them. In paired tags attributes are specified in the opening tag. The value of the attribute is specifi
3 min read
How to Create Optional HTML attributes with Razor View Engine ?
It's common practice in web development to dynamically create HTML components with optional attributes in response to specific criteria. When working with ASP.NET Core apps and the Razor view engine, this necessity is especially prevalent. With Razor, users can easily generate dynamic web content by integrating C# code with HTML markup in an easy a
3 min read
How to use ARIA Attributes to Enhance Accessibility in HTML ?
Accessibility is a fundamental aspect of web development, ensuring that all users, regardless of ability, can access and interact with online content. HTML provides various features to improve accessibility, and one powerful tool is ARIA (Accessible Rich Internet Applications) attributes. ARIA attributes extend HTML semantics, providing additional
2 min read
How to Add and Remove HTML Attributes with jQuery?
Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery. Below are the possible approaches to add and remove HTML attributes wi
2 min read
HTML Global Attributes
HTML Global Attributes are attributes that can be used with any HTML element. They include id, class, style, title, lang, tabindex, and others, providing common functionality and enhancing element behavior and presentation across web pages. List of Global Attributes: Global Attributes Description Example accesskeyIt is the keyboard shortcuts to act
3 min read
Tags vs Elements vs Attributes in HTML
In HTML, tags represent the structural components of a document, such as <h1> for headings. Elements are formed by tags and encompass both the opening and closing tags along with the content. Attributes provide additional information or properties to elements, enhancing their functionality or appearance. Table of Content HTML Tags: HTML eleme
2 min read
Difference between "blank" and "_blank" target attributes in HTML
If you have ever noticed on the website that few links got opened either in a new tab or in a new window or sometimes, it might also happen that in some websites, click on the link, for the first time, it will open in a new tab & that particular open tab will update & reused every time whenever we click to the link. Both these scenarios can
3 min read
HTML Attributes
HTML attributes provide additional information about elements within an HTML document. Every HTML element can have attributes. Attributes are always defined in the start tag. They are specified using a name/value pair format, where the attribute name defines the property, and its value provides specific details, like name="value". These attributes
6 min read
HTML data-* Attributes
The HTML data-* attribute allows storing custom data for elements, enhancing interactivity in web applications through JavaScript without server-side involvement or AJAX calls. Syntax <li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>The data-* attributes can be used to define our own custom data attributes. It stores custom d
3 min read
Difference between id and class Attributes in HTML
The id and class attributes in HTML are used for element identification and styling. The id attribute uniquely identifies a single element, while the class attribute can be applied to multiple elements. Both are essential for CSS styling and JavaScript manipulation. HTML id AttributeThe id attribute is a unique identifier that is used to specify th
3 min read
PHP Calendar Functions Complete Reference
The calendar extension contains a series of functions to represent the calendar date into a different format. The standard date is based on Julian Day Count. The date count starting from January 1st, 4713 B.C. is known as Julian Day Count. First, the date is converted into Julian Day Count and then converted into a calendar system. Example: The pro
2 min read
Blaze UI Objects Complete Reference
Blaze UI is a free & open-source (MIT Licence) Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation Blaze UI Objects List: Blaze UI Containers Blaze UI Container sizesBlaze UI Containers NestingBlaze UI Containers Vertical AlignmentBlaze UI Container Re
1 min read
Node.js String Decoder Complete Reference
The string Decoder module provides an API for decoding Buffer objects into strings. Example: C/C++ Code // Node.js program to demonstrate the // stringDecoder.write() Method // Import the string_decoder module // and get the StringDecoder class // using object destructuring const { StringDecoder } = require("string_decoder"); // Create a
1 min read
CSS Selectors Complete Reference
CSS selectors are used to select HTML elements based on their element name, id, class, attribute, and many more. Example: Below the HTML/CSS code shows the functionality of ::after selector. C/C++ Code <!DOCTYPE html> <html> <head> <style> p::after { content: " - Remember this"; background-color: blue; } </style
4 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox