Today we are going to explain which attributes are available in HTML and how they are used. Attributes play a very important role in creating a webpage. To make sure an HTML tag works properly, attributes are used.
👉 Attributes are always written inside HTML tags.
👉 They provide extra information about an element.
👉 Example: <img src="image.jpg" alt="My Image">
Global attributes are the attributes that can be used with any HTML element, such as id, class, and style.
| Attribute | Example |
|---|---|
| id | <p id="intro">Hello</p> |
| class | <div class="box"></div> |
| style | <h1 style="color:red">Title</h1> |
| title | <abbr title="HyperText Markup Language">HTML</abbr> |
| lang | <p lang="en">Hellow</p> |
| hidden | <div hidden>It is hidden.</div> |
| accesskey | <button accesskey="s">Save</button> |
| autocapitalize | <input type="text" autocapitalize="words"> |
| autofocus | <input type="text" autofocus> |
| contenteditable | <div contenteditable="true">Edit me</div> |
| contextmenu (deprecated) | <div contextmenu="mymenu">Old method</div> |
| data-* | <div data-user="101">User Data</div> |
| dir | <p dir="rtl">This text will display from right to left.</p>
|
| draggable | <img src="img.png" draggable="true"> |
| enterkeyhint | <input type="text" enterkeyhint="search"> |
| exportparts | <custom-el exportparts="label, input"></custom-el> |
| inert | <div inert>This input field is disabled.</div> |
| inputmode | <input type="text" inputmode="numeric"> |
| is | <input is="custom-input"> |
| itemid | <div itemscope itemid="123"></div> |
| itemprop | <span itemprop="name">Book</span> |
| itemref | <div itemscope itemref="details"></div> |
| itemscope | <div itemscope></div> |
| itemtype | <div itemscope itemtype="https://schema.org/Book"></div>
|
| nonce | <script nonce="abc123"></script> |
| part | <div part="label"></div> |
| popover | <button popover>Open</button> |
| slot | <slot name="header"></slot> |
| spellcheck | <textarea spellcheck="false"></textarea> |
| tabindex | <button tabindex="1">Click</button> |
| translate | <span translate="no">BrandName</span> |
When we move from one page to another, we use the anchor tag. To make it better, we add some attributes to the anchor tag, which not only improve its appearance but also enhance the user experience.
| Attribute | Example |
|---|---|
| href | <a href="https://example.com">Visit</a> |
| target | <a href="page.html" target="_blank">Open</a> |
| download | <a href="file.pdf" download>Download</a> |
| ping | <a href="page.html" ping="track.php">Link</a> |
| rel | <a href="https://example.com" rel="nofollow">Link</a> |
| hreflang | <a href="page.html" hreflang="en">English Page</a> |
| type | <a href="video.mp4" type="video/mp4">Video</a> |
We use the image tag to display an image on our webpage, but just adding the image tag does not make the image appear. We need to use certain attributes in the image tag so that our image is displayed properly and looks good.
| Attribute | Example |
|---|---|
| src | <img src="image.jpg" alt="Sample"> |
| alt | <img src="photo.png" alt="My Photo"> |
| width | <img src="pic.jpg" width="200"> |
| height | <img src="pic.jpg" height="150"> |
| crossorigin | <img src="img.png" crossorigin="anonymous"> |
| decoding | <img src="img.jpg" decoding="async"> |
| fetchpriority | <img src="banner.png" fetchpriority="high"> |
| ismap | <img src="map.png" ismap> |
| loading | <img src="photo.jpg" loading="lazy"> |
| referrerpolicy | <img src="img.jpg" referrerpolicy="no-referrer"> |
| sizes | <img src="img.jpg" sizes="(max-width: 600px) 480px, 800px"> |
| srcset | <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w">
|
| usemap | <img src="map.jpg" usemap="#workmap"> |
Whenever we collect any type of data from the user, we create a form using the input tag. To ensure that the user can enter their data correctly and easily, we use certain input tag attributes.
| Attribute | Example |
|---|---|
| accept | <input type="file" accept="image/png"> |
| alt | <input type="image" src="btn.png" alt="Submit"> |
| autocomplete | <input type="text" autocomplete="on"> |
| checked | <input type="checkbox" checked> |
| dirname | <input type="text" name="user" dirname="user.dir"> |
| disabled | <input type="text" disabled> |
| form | <input type="text" form="myForm"> |
| formaction | <input type="submit" formaction="save.php"> |
| formenctype | <input type="submit" formenctype="multipart/form-data"> |
| formmethod | <input type="submit" formmethod="post"> |
| formnovalidate | <input type="submit" formnovalidate> |
| formtarget | <input type="submit" formtarget="_blank"> |
| height | <input type="image" src="btn.png" height="40"> |
| list | <input list="browsers"> |
| max | <input type="number" max="100"> |
| maxlength | <input type="text" maxlength="10"> |
| min | <input type="number" min="1"> |
| minlength | <input type="text" minlength="5"> |
| multiple | <input type="file" multiple> |
| name | <input type="text" name="username"> |
| pattern | <input type="text" pattern="[A-Za-z]{3}"> |
| placeholder | <input type="text" placeholder="Enter name"> |
| readonly | <input type="text" value="Fixed" readonly> |
| required | <input type="email" required> |
| size | <input type="text" size="40"> |
| src | <input type="image" src="submit.png"> |
| step | <input type="number" step="5"> |
| type | <input type="password"> |
| value | <input type="text" value="Default"> |
| width | <input type="image" src="btn.png" width="100"> |
Whenever a user fills out a form and submits it, we want the user to fill it properly and ensure that the data is submitted correctly to our database. To make this process easier, we use certain attributes.
| Attribute | Example |
|---|---|
| accept-charset | <form accept-charset="UTF-8"></form> |
| action | <form action="/submit.php"></form> |
| autocomplete | <form autocomplete="on"></form> |
| enctype | <form enctype="multipart/form-data"></form> |
| method | <form method="post"></form> |
| name | <form name="myForm"></form> |
| novalidate | <form novalidate></form> |
| rel | <form rel="noopener"></form> |
| target | <form target="_blank"></form> |
In HTML, the button is used for submitting a form, running JavaScript, or handling click events. To define the specific functionality of a button, we use different attributes.
| Attribute | Example |
|---|---|
| autofocus | <button autofocus>Click Me</button> |
| disabled | <button disabled>Disabled</button> |
| form | <button form="myForm">Submit</button> |
| formaction | <button formaction="/save.php">Save</button> |
| formenctype | <button formenctype="multipart/form-data">Upload</button>
|
| formmethod | <button formmethod="post">Submit</button> |
| formnovalidate | <button formnovalidate>Submit</button> |
| formtarget | <button formtarget="_blank">Submit</button> |
| name | <button name="btn1">Click</button> |
| type | <button type="submit">Submit</button> |
| value | <button value="send">Send</button> |
In HTML, the <script> tag is used to add JavaScript. We can place JavaScript inside the <head> or <body> using the script tag. The <script> tag provides many attributes that allow us to include JavaScript effectively in our webpage, and these attributes help our website function smoothly.
| Attribute | Example |
|---|---|
| async | <script async src="app.js"></script> |
| crossorigin | <script src="app.js" crossorigin="anonymous"></script> |
| defer | <script defer src="app.js"></script> |
| integrity |
<script src="app.js" integrity="sha384-abc..." crossorigin="anonymous"></script>
|
| nomodule | <script src="legacy.js" nomodule></script> |
| referrerpolicy | <script src="app.js" referrerpolicy="no-referrer"></script>
|
| src | <script src="app.js"></script> |
| type | <script type="module" src="app.js"></script> |
The <link> tag in HTML is used to include external resources. This tag does not have a closing tag and can only be placed inside the <head> section.
| Attribute | Example |
|---|---|
| as | <link rel="preload" as="script" href="app.js"> |
| crossorigin | <link rel="stylesheet" href="style.css" crossorigin="anonymous">
|
| disabled | <link rel="stylesheet" href="style.css" disabled> |
| fetchpriority | <link rel="stylesheet" href="style.css" fetchpriority="high"> |
| href | <link rel="stylesheet" href="style.css"> |
| hreflang | <link rel="alternate" hreflang="en" href="example.html"> |
| imagesizes |
<link rel="preload" imagesizes="100vw" imagesrcset="img.jpg 1x, img@2x.jpg 2x"> |
| imagesrcset |
<link rel="preload" as="image" imagesrcset="img.jpg 1x, img@2x.jpg 2x"> |
| integrity |
<link rel="stylesheet" href="style.css" integrity="sha384-abc..." crossorigin="anonymous">
|
| media | <link rel="stylesheet" href="print.css" media="print"> |
| prefetch | <link rel="prefetch" href="next-page.html"> |
| referrerpolicy |
<link rel="stylesheet" href="style.css" referrerpolicy="no-referrer"> |
| rel | <link rel="stylesheet" href="style.css"> |
| sizes | <link rel="icon" href="favicon.png" sizes="32x32"> |
| title | <link rel="stylesheet" href="style.css" title="Main Style"> |
| type | <link rel="stylesheet" href="style.css" type="text/css"> |
The <meta> tag is a void element, which means it does not have a closing tag. It is mainly used for SEO, social sharing, and other purposes that help a website achieve better ranking.
| Attribute | Example |
|---|---|
| charset | <meta charset="UTF-8"> |
| name | <meta name="description" content="Learn HTML"> |
| content | <meta name="author" content="Nikhil Rathi"> |
| http-equiv | <meta http-equiv="refresh" content="30"> |
| scheme (deprecated) | <meta name="identifier" content="abc" scheme="ISBN"> |
| property | <meta property="og:title" content="Learn HTML"> |
| itemprop | <meta itemprop="name" content="Programming Course"> |
The <iframe> tag is used to display the data of another page within the same page, such as YouTube videos, Instagram videos, and more. To ensure this content appears properly on our webpage, we use different attributes with the <iframe> tag.
| Attribute | Example |
|---|---|
| allow | <iframe src="video.html" allow="camera; microphone"></iframe>
|
| allowfullscreen | <iframe src="video.html" allowfullscreen></iframe> |
| allowpaymentrequest | <iframe src="checkout.html" allowpaymentrequest></iframe>
|
| csp | <iframe src="app.html" csp="script-src 'self'"></iframe> |
| height | <iframe src="page.html" height="400"></iframe> |
| loading | <iframe src="map.html" loading="lazy"></iframe> |
| name | <iframe src="form.html" name="myFrame"></iframe> |
| referrerpolicy | <iframe src="app.html" referrerpolicy="no-referrer"></iframe>
|
| sandbox | <iframe src="page.html" sandbox="allow-scripts"></iframe>
|
| src | <iframe src="https://example.com"></iframe> |
| srcdoc |
<iframe srcdoc="<p>Hello World!</p>"></iframe> |
| width | <iframe src="page.html" width="600"></iframe> |
When we add a video to our webpage, we need to decide its width and height, and also control when and how it should play. For this purpose, we use various attributes inside the <video> tag.
| Attribute | Example |
|---|---|
| autoplay | <video src="movie.mp4" autoplay></video> |
| controls | <video src="movie.mp4" controls></video> |
| controlslist |
<video src="movie.mp4" controls controlslist="nodownload"></video> |
| crossorigin | <video src="movie.mp4" crossorigin="anonymous"></video> |
| disablepictureinpicture | <video src="movie.mp4" disablepictureinpicture></video> |
| disableremoteplayback | <video src="movie.mp4" disableremoteplayback></video> |
| height | <video src="movie.mp4" height="300"></video> |
| loop | <video src="movie.mp4" loop></video> |
| muted | <video src="movie.mp4" muted></video> |
| playsinline | <video src="movie.mp4" playsinline></video> |
| poster | <video src="movie.mp4" poster="thumbnail.jpg"></video> |
| preload | <video src="movie.mp4" preload="auto"></video> |
| src | <video src="movie.mp4"></video> |
| width | <video src="movie.mp4" width="500"></video> |
The <audio> tag is used in our webpage to add audio files such as MP3, OGG, and more. To control the playback of these audio files, we use several attributes inside the <audio> tag.
| Attribute | Example |
|---|---|
| autoplay | <audio src="song.mp3" autoplay></audio> |
| controls | <audio src="song.mp3" controls></audio> |
| controlslist |
<audio src="song.mp3" controls controlslist="nodownload"></audio> |
| crossorigin | <audio src="song.mp3" crossorigin="anonymous"></audio> |
| disableremoteplayback | <audio src="song.mp3" disableremoteplayback></audio> |
| loop | <audio src="song.mp3" loop></audio> |
| muted | <audio src="song.mp3" muted></audio> |
| preload | <audio src="song.mp3" preload="auto"></audio> |
| src | <audio src="song.mp3"></audio> |
When we create a table in HTML, we want it to look well-structured and visually appealing on our webpage. For this purpose, we use different attributes in the <table> tag.
| Attribute | Example |
|---|---|
| border |
<table border="1">...</table>
|
| sortable |
<table sortable>...</table>
|
HTML attributes are used to provide extra information to an HTML tag or element, and they are always given inside the opening tag.
HTML attributes cannot be placed in a separate file because attributes are always associated with the element itself.
The main purpose of HTML attributes is to provide extra information to an HTML element and to control its behavior and appearance.