HTML attributes

Attributes

Attributes of HTML elements

A special piece of information that is added to an HTML element

An HTML attribute is a special piece of information that is added to an HTML element to provide additional instructions or properties. It allows us to customize and control the behavior and appearance of the elements on a web page.

Attributes are used to define characteristics such as the size, color, alignment, link destinations, and more for HTML elements. They provide important information to browsers and other software about how to interpret and render the content.

For example, the src attribute is used to specify the source URL of an image or video, the href attribute is used to define the link destination of an anchor element, and the class attribute is used to assign a CSS class for styling purposes.

Attributes are typically added within the opening tag of an HTML element and are written in the format of attributeName="attributeValue" . Different elements support different attributes, and each attribute has its own purpose and usage.

By using attributes, we can customize our web pages and make them interactive and engaging for users. Attributes play a crucial role in web development, allowing us to control the behavior and appearance of elements and create dynamic and responsive websites.

class
The class attribute is used to specify one or more class names for an element. It is mainly used for styling purposes using CSS. Multiple classes can be assigned to an element by separating them with spaces.

Elements this attribute can be used with: div , p , span , a , and more.

Example: <div class="container"> <p class="highlight">This is a paragraph with a class.</p> </div>
id
The id attribute is used to give a unique identifier to an element. It is often used to target specific elements with CSS or JavaScript for styling or functionality.

Elements this attribute can be used with: Any HTML element.

Example: <h2 id="myHeading">Hello, world!</h2>
src
The src attribute is used to specify the source URL of an external resource, such as an image or a script file.

Elements this attribute can be used with: img , script , iframe , and more.

Example: <img src="image.jpg" alt="An image">
title
The title attribute is used to provide additional information about an element. It is typically displayed as a tooltip when hovering over the element.

Elements this attribute can be used with: Any HTML element.

Example: <a href="#" title="Click me!">Hover over me</a>
accept-charset
Specifies the character encoding used when submitting the form data to the server.
accesskey
Specifies a keyboard shortcut to activate or focus on an element.
action
Specifies the URL to which the form data will be submitted.
align
Specifies the alignment of an element.
allowfullscreen
Specifies whether an iframe or embed element can be displayed in full-screen mode.
alt
Specifies alternative text for an image.
async
Specifies that the script will be executed asynchronously.
autocomplete
Specifies whether a form or input field should have autocomplete enabled.
autoplay
Specifies that audio or video should start playing as soon as it is ready.
background
Specifies the background color or image for an element.
bgcolor
Specifies the background color of a table cell.
border
Specifies the width of the border around an element.
cellpadding
Specifies the padding within a table cell.
cellspacing
Specifies the space between cells in a table.
charset
Specifies the character encoding used in an external script file.
checked
Specifies that an input element should be pre-selected when the page loads.
cite
Specifies a URL that explains the quote or citation.
cols
Specifies the number of columns in a textarea element.
colspan
Specifies the number of columns a table cell should span.
content
Specifies the value associated with an http-equiv or name attribute.
controls
Specifies that audio or video controls should be displayed.
coords
Specifies the coordinates of an area element in an image map.
crossorigin
Specifies how the browser handles loading of cross-origin resources.
data
Specifies a machine-readable value associated with an element.
datetime
Specifies the date and time in a machine-readable format.
default
Specifies that a track should be enabled by default in a video or audio element.
defer
Specifies that the script should be executed after the page has finished parsing.
dir
Specifies the text direction of the content within an element.
download
Specifies that the target will be downloaded when a user clicks on the hyperlink.
draggable
Specifies whether an element is draggable or not.
dropzone
Specifies whether the dragged data can be dropped in a specific area.
enctype
Specifies how the form data should be encoded when submitting to the server.
for
Specifies which form element a label is bound to.
form
Specifies the form that the element belongs to.
formaction
Specifies the URL where the form data should be submitted.
headers
Specifies the relationship between a header cell and a data cell in a table.
height
Specifies the height of an element.
hidden
Specifies that an element is not visible.
high
Specifies the maximum value of a meter element.
hreflang
Specifies the language of the linked document.
http-equiv
Provides an HTTP header for the information/value of the content attribute.
ismap
Specifies that an image is part of a server-side image map.
kind
Specifies the kind of text track.
label
Specifies a text label for an element.
lang
Specifies the language of the element's content.
list
Associates an input element with a datalist element.
loop
Specifies that audio or video should start playing again when it reaches the end.
low
Specifies the minimum value of a meter element.
manifest
Specifies the URL of the document's cache manifest.
max
Specifies the maximum value of an input element.
media
Specifies the media devices the linked document is optimized for.
method
Specifies the HTTP method to use when submitting the form.
min
Specifies the minimum value of an input element.
multiple
Specifies that multiple values can be entered in an input element.
muted
Specifies that the audio output of a video should be muted.
name
Specifies a name for an element.
novalidate
Specifies that a form should not be validated when submitted.
open
Specifies that the details element should be open (expanded) by default.
optimum
Specifies the optimal value of a meter element.
poster
Specifies an image to be shown while the video is downloading, or until the user hits the play button.
preload
Specifies if and how the audio or video should be loaded when the page loads.
rel
Specifies the relationship between the current document and the linked document.
reversed
Specifies that the order of the list items should be reversed.
rows
Specifies the number of visible rows in a textarea element.
rowspan
Specifies the number of rows a table cell should span.
sandbox
Specifies an iframe's sandbox security restrictions.
scope
Specifies whether a header cell is a header for a column, row, or group of columns or rows.
selected
Specifies that an option in a dropdown list should be pre-selected when the page loads.
shape
Specifies the shape of an area element in an image map.
size
Specifies the visible width of an input element.
sizes
Specifies the sizes of the icons for visual media elements.
span
Specifies the number of columns an optgroup element should span.
spellcheck
Specifies whether the element is to have its spelling and grammar checked or not.
srcdoc
Specifies the HTML content of a page to show in an iframe.
srclang
Specifies the language of the track text data (required forelements).
srcset
Specifies the URL of the image to use in different situations.
start
Specifies the start value of an ordered list.
step
Specifies the legal number intervals for an input field.
tabindex
Specifies the tabbing order of an element.
translate
Specifies whether the content of an element should be translated or not.
type
Specifies the type of element.
usemap
Specifies an image as a client-side image map.
value
Specifies the value of an input element.
width
Specifies the width of an element.
wrap
Specifies how the text in a textarea should be wrapped when submitted in a form.
style
The style attribute is used to apply inline CSS styles to an element. It allows you to change the appearance of the element, such as its color, size, or position.

Elements this attribute can be used with: Any HTML element.

Example:
    <p style="color: red; font-size: 16px;">This is a styled paragraph.</p>
href
The href attribute is used to specify the destination URL of a hyperlink. It is commonly used with the a element to create clickable links.

Elements this attribute can be used with: a , link , and more.

Example:
    <a href="https://www.example.com">Click here</a>
alt
The alt attribute is used to provide alternative text for an image. It is displayed when the image cannot be loaded or for accessibility purposes.

Elements this attribute can be used with: img .

Example:
    <img src="image.jpg" alt="An image">
placeholder
Description: Specifies a short hint that describes the expected value of an input field.
Elements: input, textarea
Example: <input type="text" placeholder="Enter your name">
Link: MDN - placeholder
required
Description: Specifies that an input field must be filled out before submitting a form.
Elements: input, select, textarea
Example: <input type="text" required>
Link: MDN - required
target
Description: Specifies where to open linked documents when clicked.
Elements: a, area, base, form
Example: <a href="https://www.example.com" target="_blank">Visit Example.com</a>
Link: MDN - target
accept
Description: Specifies the types of files that the server accepts (for file upload).
Elements: input
Example: <input type="file" accept=".jpg, .png">
Link: MDN - accept
src
Description: Specifies the URL of an external script file or image.
Elements: audio, embed, iframe, img, input, script, source, track, video
Example: <img src="image.jpg" alt="Image">
Link: MDN - src
width
Description: Specifies the width of an element.
Elements: canvas, embed, iframe, img, input, object, video
Example: <img src="image.jpg" alt="Image" width="300">
Link: MDN - width
autofocus
Description: Specifies that an input field should automatically get focus when the page loads.
Elements: button, input, select, textarea
Example: <input type="text" autofocus>
Link: MDN - autofocus
disabled
Description: Specifies that an input field should be disabled and cannot be interacted with.
Elements: button, input, select, textarea
Example: <input type="text" disabled>
Link: MDN - disabled
readonly
Description: Specifies that an input field is read-only and cannot be edited by the user.
Elements: input, textarea
Example: <input type="text" readonly>
Link: MDN - readonly
maxlength
Description: Specifies the maximum number of characters allowed in an input field.
Elements: input, textarea
Example: <input type="text" maxlength="10">
Link: MDN - maxlength
min
Description: Specifies the minimum value for an input field.
Elements: input
Example: <input type="number" min="0">
Link: MDN - min
max
Description: Specifies the maximum value for an input field.
Elements: input
Example: <input type="number" max="100">
Link: MDN - max
minlength
Description: Specifies the minimum number of characters required in an input field.
Elements: input, textarea
Example: <input type="text" minlength="5">
Link: MDN - minlength
pattern
Description: Specifies a regular expression pattern that an input field's value must match.
Elements: input
Example: <input type="text" pattern="[A-Za-z]+">
Link: MDN - pattern