HTML Element Attributes

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:

AttributeDescriptionUsed 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>