HTML attributes are additional parameters added to HTML elements to control their behavior, appearance, or content. While elements define what is on the page (e.g., heading, paragraph, image), attributes define how those elements behave or look.
In this overview, you will find:
class, id, style).onclick, onload).src for images, href for links).Use this page as a quick reference guide (cheat sheet) during development. Each attribute is described with a brief explanation and a practical example, so you'll know exactly how to use it.
These attributes can be used on almost all HTML elements.
| Attribute | Description | Example |
|---|---|---|
accesskey |
Specifies a keyboard shortcut to access the element. | <a href="..." accesskey="s">Website</a> |
class |
Specifies one or more class names for styling or scripting. | <div class="box highlight">Content</div> |
contenteditable |
Specifies whether the element's content is editable by the user. | <p contenteditable="true">Edit me</p> |
dir |
Specifies the text direction (left-to-right or right-to-left). | <p dir="rtl">Arabic text</p> |
draggable |
Specifies whether the element is draggable. | <div draggable="true">Drag me</div> |
hidden |
Hides the element from view. | <p hidden>Hidden text</p> |
id |
Specifies a unique identifier for the element. | <h1 id="heading">Main Heading</h1> |
lang |
Specifies the language of the element's content. | <html lang="en">...</html> |
spellcheck |
Specifies whether spell checking is enabled. | <textarea spellcheck="false"></textarea> |
style |
Specifies inline CSS styles for the element. | <p style="color: blue; font-size: 16px;">Styled</p> |
tabindex |
Specifies the tabbing order for navigation. | <a href="#" tabindex="1">First link</a> |
title |
Specifies extra information (shown on hover). | <img src="image.jpg" title="Image description"> |
translate |
Specifies whether the element's content should be translated. | <p translate="no">Do not translate</p> |
data-* |
Allows storing custom data on the element. | <div data-user-id="123">User</div> |
These attributes allow the page to react to browser events.
| Attribute | Description | Example |
|---|---|---|
onafterprint |
Fires after the page has finished printing. | <body onafterprint="showMessage()"> |
onbeforeprint |
Fires before the page is about to be printed. | <body onbeforeprint="hideElements()"> |
onbeforeunload |
Fires when the user is about to leave the page. | <body onbeforeunload="return 'Are you sure?'"> |
onerror |
Fires when an error occurs during loading. | <img src="image.jpg" onerror="this.src='fallback.jpg'"> |
onhashchange |
Fires when the anchor part of the URL changes. | <body onhashchange="loadSection()"> |
onload |
Fires when the page or element has finished loading. | <body onload="initialize()"> |
onoffline |
Fires when the browser loses internet connection. | <body onoffline="showOfflineWarning()"> |
ononline |
Fires when the browser regains internet connection. | <body ononline="showOnlineMessage()"> |
onpageshow |
Fires when the user navigates to the page. | <body onpageshow="refreshData()"> |
onresize |
Fires when the browser window is resized. | <body onresize="adjustLayout()"> |
Below is a list of all standard HTML elements with a brief description of their purpose.
<a> - Defines a hyperlink<abbr> - Defines an abbreviation or acronym<address> - Defines contact information for the author/owner<area> - Defines an area inside an image map<article> - Defines independent, self-contained content<aside> - Defines content aside from the page content (sidebar)<audio> - Defines sound content<b> - Defines bold text<base> - Specifies the base URL/target for all relative URLs<bdi> - Isolates a part of text that might be formatted in a different direction<bdo> - Overrides the current text direction<blockquote> - Defines a section that is quoted from another source<body> - Defines the document's body<br> - Defines a single line break (self-closing)<button> - Defines a clickable button<canvas> - Used to draw graphics via scripting (usually JS)<caption> - Defines a table caption<cite> - Defines the title of a work<code> - Defines a piece of computer code<col> - Specifies column properties for each column in a colgroup<colgroup> - Specifies a group of one or more columns in a table<data> - Links a given content with a machine-readable translation<datalist> - Specifies a list of pre-defined options for input controls<dd> - Defines a description/value of a term in a description list<del> - Defines text that has been deleted from a document<details> - Defines additional details that the user can open and close<dfn> - Represents the defining instance of a term<dialog> - Defines a dialog box or window<div> - Defines a section in a document (block-level container)<dl> - Defines a description list<dt> - Defines a term/name in a description list<em> - Defines emphasized text (italic)<embed> - Defines a container for an external application<fieldset> - Groups related elements in a form<figcaption> - Defines a caption for a figure element<figure> - Specifies self-contained content, like illustrations, diagrams, photos, code listings<footer> - Defines a footer for a document or section<form> - Defines an HTML form for user input<h1> to <h6> - Define HTML headings (from largest to smallest)<head> - Contains metadata/information for the document<header> - Defines a header for a document or section<hgroup> - Represents a header and/or its heading group<hr> - Defines a thematic change in the content (horizontal rule)<html> - Defines the root of an HTML document<i> - Represents a text in an alternate voice or mood (italic)<iframe> - Defines an inline frame<img> - Defines an image (self-closing)<input> - Defines an input control<ins> - Defines text that has been inserted into a document<kbd> - Defines keyboard input<label> - Defines a label for an input element<legend> - Defines a caption for a fieldset element<li> - Defines a list item<link> - Defines the relationship between a document and an external resource<main> - Specifies the main content of a document<map> - Defines an image map<mark> - Defines marked/highlighted text<meta> - Defines metadata about an HTML document<meter> - Defines a scalar measurement within a known range<nav> - Defines navigation links<noscript> - Defines alternate content for users that do not support scripts<object> - Defines a container for an external application<ol> - Defines an ordered list<optgroup> - Defines a group of related options in a drop-down list<option> - Defines an option in a drop-down list<output> - Represents the result of a calculation<p> - Defines a paragraph<param> - Defines a parameter for an object element<picture> - Defines a container for multiple image resources<pre> - Defines preformatted text<progress> - Represents the completion progress of a task<q> - Defines a short quotation<rp> - Defines what to show in browsers that do not support ruby annotations<rt> - Defines an explanation/pronunciation of characters (for East Asian typography)<ruby> - Defines a ruby annotation (for East Asian typography)<s> - Defines text that is no longer correct<samp> - Defines sample output from a computer program<script> - Defines a client-side script<section> - Defines a section in a document<select> - Defines a drop-down list<slot> - Acts as a placeholder inside a web component<small> - Defines smaller text (e.g., copyright, disclaimers)<source> - Defines multiple media resources for media elements<span> - Defines a section in a document (inline container)<strong> - Defines important text (bold)<style> - Defines style information for a document<sub> - Defines subscribed text<summary> - Defines a visible heading for the details element<sup> - Defines superscripted text<table> - Defines a table<tbody> - Groups the body content in a table<td> - Defines a cell in a table<template> - Holds content that is not rendered until activated by script<textarea> - Defines a multiline input control (text area)<tfoot> - Groups the footer content in a table<th> - Defines a header cell in a table<thead> - Groups the header content in a table<time> - Defines a specific time (or datetime)<title> - Defines the title of the document (in the browser tab)<tr> - Defines a row in a table<track> - Defines text tracks for media elements<u> - Defines text that should be stylistically different (underlined)<ul> - Defines an unordered list<var> - Defines a variable in a mathematical expression<video> - Defines video content<wbr> - Defines a possible line-breakList of attributes used with specific HTML elements.
| Attribute | Description | Example |
|---|---|---|
abbr |
Specifies a short version of the title in a table header. | <th abbr="Name">Full Name</th> |
async |
Executes the script asynchronously (in the background). | <script src="app.js" async> |
autofocus |
Automatically focuses the element when the page loads. | <input type="text" autofocus> |
autoplay |
Automatically plays audio or video. | <video src="movie.mp4" autoplay> |
cols |
Specifies the visible width of a text area in characters. | <textarea cols="40"> |
controls |
Displays playback controls for audio/video. | <audio src="song.mp3" controls> |
crossorigin |
Specifies how the element handles cross-origin requests. | <script src="..." crossorigin="anonymous"> |
datetime |
Specifies the date and time for a time or del element. | <time datetime="2024-01-15">January 15</time> |
default |
Specifies the default track to be shown. | <track src="subs.vtt" default> |
defer |
Defers the execution of the script until the HTML is fully parsed. | <script src="app.js" defer> |
dirname |
Submits the text direction of the input along with the form data. | <input type="text" name="name" dirname="name.dir"> |
disabled |
Disables the element (cannot be clicked or edited). | <button disabled>Unavailable</button> |
for |
Associates a label with an input element. | <label for="email">Email</label> |
headers |
Associates a cell with one or more header cells in a table. | <td headers="name">Borut</td> |
height |
Specifies the height of the element in pixels. | <img src="image.jpg" height="200"> |
href |
Specifies the URL of the linked resource. | <a href="https://vadnica.org">Tutorial</a> |
hreflang |
Specifies the language of the linked resource. | <a href="..." hreflang="en">English</a> |
integrity |
Verifies the integrity of the resource (SRI). | <script src="..." integrity="sha384-..."> |
kind |
Specifies the kind of text track (subtitles, captions, chapters). | <track kind="subtitles" srclang="en"> |
label |
Specifies a user-readable title of the element (for option/optgroup). | <optgroup label="Europe"> |
loop |
Plays audio or video repeatedly. | <audio src="song.mp3" loop> |
max |
Specifies the maximum value for an input element. | <input type="number" max="100"> |
media |
Specifies the intended destination medium for a style sheet or resource. | <link href="print.css" media="print"> |
multiple |
Allows the user to select more than one value. | <select multiple> |
muted |
Mutes the audio output of the media element. | <video src="movie.mp4" muted> |
name |
Specifies the name of the element (used for form submission). | <input type="text" name="username"> |
placeholder |
Specifies a short hint that describes the expected value of an input field. | <input type="text" placeholder="Enter name..."> |
poster |
Specifies an image to be shown while the video is downloading. | <video src="movie.mp4" poster="thumbnail.jpg"> |
preload |
Specifies if and how the author thinks the audio/video should be loaded. | <video src="movie.mp4" preload="auto"> |
readonly |
Specifies that the input field is read-only. | <input type="text" readonly value="Fixed"> |
referrerpolicy |
Specifies which referrer is sent when fetching the resource. | <a href="..." referrerpolicy="no-referrer"> |
rel |
Specifies the relationship between the current document and the linked document. | <link rel="stylesheet" href="style.css"> |
required |
Specifies that the input field must be filled out before submitting. | <input type="email" required> |
rows |
Specifies the visible number of lines in a text area. | <textarea rows="6"> |
scope |
Specifies whether a header cell applies to a row, column, or group. | <th scope="col">Name</th> |
selected |
Specifies that the option should be pre-selected when the page loads. | <option selected>Default</option> |
sizes |
Specifies the size of the linked resource (icons, responsive images). | <link rel="icon" sizes="16x16 32x32"> |
src |
Specifies the path to the media resource (image, script, audio, video). | <img src="image.jpg"> |
srclang |
Specifies the language of the text track. | <track src="en.vtt" srclang="en"> |
srcset |
Specifies a list of image sources for responsive images. | <img srcset="small.jpg 480w, large.jpg 1024w"> |
title |
Specifies extra information about the element (tooltip). | <abbr title="HyperText Markup Language">HTML</abbr> |
type |
Specifies the type of the element (e.g., input type, script type). | <input type="email"> |
value |
Specifies the value of the element (for input, option, li). | <input type="text" value="Borut"> |
width |
Specifies the width of the element in pixels. | <img src="image.jpg" width="300"> |
wrap |
Specifies how the text in a text area is to be wrapped when submitted. | <textarea wrap="hard"> |