HTML Element Attributes

  • Last updated Apr 25, 2024

Attributes are properties used to specify how an element should behave. They can be included in the opening tag of an element. Attributes are written as name-value pairs, separated by an equal sign (=), and the value is enclosed in double or single quotes.

Here's a basic structure of an HTML element with attributes:

<tagname attribute="value">Content</tagname>

Here, tagname represents the HTML element, attribute specifies the attribute name, and value provides the value for the attribute.

Here's an example of using the style attribute for a <p> (paragraph) element to apply inline CSS styles:

<p style="color: blue; font-size: 24px; font-family: 'Arial', sans-serif;">This is a styled paragraph.</p>

In this example, the style attribute is added to the <p> element. The value of the style attribute is a string containing CSS properties and values. Multiple CSS styles are applied using semicolons to separate them.

Here's a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Example</title>
    
</head>
<body>
    <h1 style="color: green; font-size: 32px;">Main Heading</h1>
    <p style="color: blue; font-size: 16px; font-family: 'Arial', sans-serif;">This is a styled paragraph.</p>
</body>
</html>

The output of the above code is as follows:

Main Heading

This is a styled paragraph.

Common HTML attributes include class, id, src, alt, href, style, and many more, depending on the specific HTML element. Attributes play a crucial role in styling elements with CSS, adding functionality with JavaScript, and providing accessibility information.

List of HTML Element Attributes

The following table lists HTML element attributes:

Attribute Description Used with Element
action
 Used for directing request with form-data while submitting a form.
 <form>
alt
 Used to show an alternate text when the original content failed to display.
 <img> <area> <input>
async
 Used for allowing a script to run asynchronously.
 <script>
autoplay
 Used to make a video or audio play automatically when it is ready.
 <video> <audio>
checked
 Used to pre-select option of radio type or checkbox type.
 <input>
charset
 Used for setting the character encoding.
 <meta><script>
class
 Used for assigning one or more class for styling the element using css. It can be used with all elements.
 Global
col
 Used for specifying the width of text area.
 <textarea>
controls
 Used for showing audio or video controls, such as play/pause button.
 <video> <audio>
disabled
 Used for assigning one or more class for styling the element using css.
 <input> <button> <select> <option> <textarea> <fieldset>
download
 Used for starting download when a link is clicked.
 <a><textarea>
form
 Used for indicating the element's form.
 <input> <button> <select> <option> <textarea> <fieldset> <meter> <object>
height
 Used for specifying the height of the element.
 <input> <img> <video> <canvas> <object> <iframe> <embed>
hidden
 Used for hiding the element. It can be used with all elements.
 Global
href
 Used for specifying the URL of a page.
 <a> <textarea> <link> <base>
id
 Used for assigning a unique id to an element. It can be used with all elements.
 Global
lang
 Used for specifying the language of an element.
 Global
max
 Used for specifying the maximum value of the element.
 <input> <progress> <mater>
maxLength
 Used for maximum length of the element.
 <input> <textarea>
method
 Used for specifying the request type, such as POST, GET, DELETE, PATCH, etc.
 <form>
min
 Used for specifying a minimum value of the element.
 <input> <meter>
name
 Used for specifying the name of the element.
 <input> <textarea> <button> <fieldset> <iframe> <select> <meta> <map> <object> <param>
novalidate
 Used for specifying that the form must not be validated while submitting.
 <form>
onclick
 This is an event attribute. Used for specifying what to run when a value of an element is clicked.
 <select>
onchange
 This is an event attribute. Used for specifying what to run when a value of an element is changed.
 <select> <button> <input>
onscroll
 Used to detect when an element's scrollbar is being scrolled.
 <table> <body>
onsubmit
 Used to detect an event when a form is submitted.
 <form>
placeholder
 Used to show hint value to describe what value is accepted.
 <textarea> <input>
selected
 Used to pre-select an option of the element.
 <option>
shape
 Used for specifying shape of the element.
 <textarea>
spellcheck
 Used for specifying if the element should have specifying and grammer checking.
 Global
style
 Used for specifying an inline css style for the element.
 Global
target
 Used for specifying whether to open a page in the new tab of a browser.
 <a> <area> <base> <form>
type
 Used for specifying the type of an element.
 <input> <button> <embed> <a> <link> <object> <menu> <script> <style> <source>
value
 Used to assign a value to the element.
 <input> <button> <li> <meter> <option> <param> <progress>
wrap
 Used for wrapping a text in textarea when submitting.
 <textarea>