HTML Attributes Complete Reference

Last Updated : 30 Dec, 2024

HTML attributes are special words placed inside the opening tag of an HTML element to define its characteristics. Each attribute has two parts:

Attribute name
Attribute value (separated by an equal sign = and enclosed in double quotes ” “).

Syntax:

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

<html>
<body>
    <h1>HTML Attributes Example</h1>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20241230152400887784/Salesforce-Governance-Model.webp" 
    alt="Example image" width="500">
</body>
</html>

src Attribute: Specifies the URL of the image to be displayed. In this example, the image is loaded from “https://www.example.com/image.jpg”.
alt Attribute: Provides alternative text for the image, which is displayed if the image cannot be loaded. It also improves accessibility and SEO.
width Attribute: Sets the width of the image in pixels, making it responsive and visually appealing.

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.

HTML Attributes Complete References

The complete list of HTML attributes are given below.

Attributes:	Description	Example
accept	This attribute can be used with <input> element only.	Try
accept-charset	Define character encoding and is used for form submission.	Try
accesskey	The keyboard shortcuts to activate/focus specific elements.	Try
action	Specify where the form data is to be sent to the server after submission of the form.	Try
align	Specify the alignment of text content of The Element.	Try
alt	Show or display something if the primary attribute	Try
async	Only works for external scripts (and used only in when src attribute is present ).	Try
autocomplete	Specify whether the input field has autocompleted would be on or off.	Try
autoplay	The audio/video should automatically start playing when web page is loaded.	Try
autofocus	The element should get focused when the page loads. It is a boolean attribute.	Try
bgcolor	Set the background color of an HTML element.	Try
border	Set visible border width to most HTML elements within the body.	Try
charset	Define character encoding.	Try
checked	Indicate whether an element should be checked when the page loads up. It is a Boolean attribute.	Try
cite	Specify the URL of the document that explains the quotes, message or text which describes why the text was inserted.	Try
Class	Specifies one or more class names for an HTML element.	Try
cols	The number of columns a cell should span.	Try
colspan	HTML specifies the number of columns a cell should span.	Try
content	The values that are related to the http-equiv or name attribute.	Try
contenteditable	Specify whether the content present in the element is editable or not.	Try
controls	It is a Boolean attribute and also new in HTML5	Try
coords	Specify the coordinate of an area in an image-map	Try
data	Specify 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
datetime	Specify 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
defer	Executed when the page has finished parsing.	Try
dir	The text direction of the element content.	Try
dirname	Enable the text direction of the input and the Textarea Field after submitting the form.	Try
disabled	The disabled attribute in HTML indicates whether the element is disabled or not.	Try
download	Download the element when the user clicks on the hyperlink	Try
draggable	Specify whether an element is draggable or not.	Try
dropzone	Specify whether the dragged data is copied, moved, or linked when it is dropped on any element.	Try
enctype	That data will be present in the form and should be encoded when submitted to the server.	Try
for	For Attribute is used in both the <label> and the <output> element.	Try
form	That the element can contain one or more forms	Try
formaction	Specify where to send the data of the form. After submission of the form, the formaction attribute is called.	Try
headers	The HTML headers attribute specifies one or additional header cells a table cell is expounded to.	Try
height	height attribute is used to specify the height of the Element.	Try
hidden	The hidden attribute in HTML is used to define the visibility of elements.	Try
high	The range where the value of gauge is considered to be of high value.	Try
href	It is used to specify the URL of the document.	Try
hreflang	The language for a linked document. It is used only when the href attribute is set.	Try
http-equiv	Provide header information or value of the content Attribute.	Try
Id	It is used by CSS and JavaScript to perform a certain task for a unique element.	Try
ismap	The HTML ismap attribute is a boolean attribute.	Try
kind	The kind of track. This attribute is only used in <Track> element.	Try
label	The title of the Text Track is used by the browser when listing available text tracks.	Try
lang	Specify the language of the element content.	Try
list	List of pre-defined options for an <input> element to suggest the user.	Try
loop	Restart the audio and video again and again after finishing it. It contains the Boolean value.	Try
low	The range where the value of gauge is considered to be low.	Try
max	Specifies the maximum value of an element.	Try
maxlength	The maximum number of characters in the <input> element. Its default value is 524288.	Try
media	The media attribute is used with the <link> and <style> elements to specify the type of media (screen, print, etc.) the document is optimized for.	Try
method	The HTTP method is used to send data while submitting the form.	Try
min	Specify the lower bound of the gauge.	Try
multiple	Allowed to select more than one value that is present in an element.	Try
muted	The audio output of the video is muted, it is a Boolean attribute.	Try
name	Specify a name for the element.	Try
novalidate	That the form-data should not be validated when submitting the form.	Try
onblur	That moment when the element loses focus.	Try
oncopy	The user copied the content present in an element.	Try
oncut	The user cut or delete the content that has been present in the element.	Try
onkeypress	when a user presses a key on the Keyboard.	Try
onmousedown	Order of events occurs related to the onmousedown event.	Try
onscroll	This onscroll attribute works when an element scrollbar is being scrolled.	Try
optimum	The optimum attribute in HTML indicates the optimal numeric value for the gauge.	Try
pattern	Specifies a regular expression pattern that the input value must match to be valid.	Try
placeholder	Specifies a short hint that describes the expected value of an input field/text area.	Try
readonly	Specify that the text written in input or text area Element is read-only.	Try
required	Specify that the input element must be filled out before submitting the Form.	Try
reversed	Ordered the list in Descending Order(9, 8, 7, 6 …..) instead of ascending order(1, 2, 3 ….)	Try
rows	The number of visible text lines for the control i.e the number of rows to display.	Try
rowspan	The number of rows a cell should span.	Try
selected	Specify which option should be by default selected when the page loads.	Try
size	Specify the initial width for the input field and a number of visible rows for the select element.	Try
spellcheck	Applied to HTML forms using the spellcheck attribute.	Try
srclang	Specify the language of the track text.	Try
start	The start value for numbering the individual list item.	Try
step	Set the discrete step size of the <input> element.	Try
style	There are 3 ways of implementing style in HTML.	Try
tabindex	When the tab button is used for navigating.	Try
target	Specifies where to open the linked document (e.g., in a new window/tab, in the same window/tab, etc.).	Try
title	Specify extra information about the element.	Try
translate	Specify whether the content of an element is translated or not.	Try
value	Specify the value of the element with which it is used.	Try
wrap	The wrap attribute specifies how text should be wrapped in a <textarea> element (either by spaces or by the browser’s default). It determines how text is handled when the form is submitted.	Try

Best Practices for Using HTML Attributes

Implementing HTML attributes correctly enhances the functionality, accessibility, and maintainability of your web pages. Here are some best practices to consider:
Use Lowercase Attribute Names: While HTML is case-insensitive, it’s recommended to use lowercase for attribute names to maintain consistency and readability.
Avoid Inline Styles: Instead of using the style attribute for inline CSS, apply external or internal stylesheets. This approach promotes separation of content and presentation, enhancing maintainability.

HTML Attributes – FAQ’s

What are HTML attributes?

HTML attributes provide additional information about elements, defining their behavior, appearance, or properties. They are included in the opening tag and usually come in name-value pairs.

Can an HTML element have multiple attributes?

Yes, an HTML element can have multiple attributes. Each attribute should be separated by a space within the opening tag. For example: <input type=”text” name=”username” placeholder=”Enter your username”>.

Are attribute names case-sensitive?

No, attribute names are not case-sensitive. However, it’s a best practice to use lowercase for consistency and to adhere to XHTML standards.

Is it necessary to quote attribute values?

While HTML allows unquoted attribute values if they don’t contain spaces or special characters, it’s recommended to always quote attribute values to prevent errors and improve code readability.

What is the purpose of the id attribute?

The id attribute uniquely identifies an HTML element within a page, allowing for targeted styling with CSS and interaction with JavaScript. Each id value must be unique within the HTML document.