HTML Tags
In this tutorial we will learn how to use attributes in over html element
HTML attributes are special key words which provide additional details about the elements
Each tag or element can have attributes, which defines the behaviour of that element.
It is used to define the characteristics of an HTML element and is placed inside the element's opening tag.
All attributes are made up of two parts − a name and a value
Name - The property you want to set is the property name. like - the image<img> element in the example carries an attribute whose name is src, which you can use to define a path of image.
value : The property you want to set is the property value. likr src="img/demo.png".
We will look at some HTML tags and their uses, such as heading tags <h1>, <img>, paragraph tags <p> and other tags. We've used it in the simplest form, but most HTML tags can have features. So let's look at it and understand.
Syntax
<element attribute_name="value">content</element>Example of HTML Attributes
Example
Edit it yourself<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p style="font-size: 20px; color: green">This is a paragraph.</p>
<a href="#" style="background: #000;color: #fff;padding: 10px;">This is a linik</a>
</body>
</html>
Output of HTML Paragraph
Edit it yourselfHTML Attribute List
| Attribute | Tag | Description |
|---|---|---|
| accept | <input> | Set Specifies the types of files (This attribute use only for type="file"). |
| accept-charset | <form> | Specifies the character encoding used when submitting the form. |
| accesskey | <a> | activate/focus an element. |
| action | <form> | Submit data for selected action url. |
| align | Not supported in HTML 5. |
Refers to the arrangement according to the surrounding elements. |
| alt | <area>, <img>, <input> | If failed the original elements that show alt text. |
| async | <script> | Specifies that the script is executed asynchronously (only for external scripts). |
| autocomplete | <form>, <input> | Set the autocomplete enabled or desabled. |
| autofocus | <button>, <input>, <select>, <textarea> | Specifies that the focus should be on the component when the page loads. |
| autoplay | <audio>, <video> | Specifies whether audio/video should be started automatically or not. |
| bgcolor | Not supported in HTML 5. |
Set of the background color. |
| border | Not supported in HTML 5. | checkbox the width of the border of an element. |
| charset | <meta>, <script> | This attribute use to character encoding. |
| checked | <input> | Specifies of the checkbox or radio button chedk or not. |
| cite | <blockquote>, <del>, <ins>, <q> | Specifies a URL which explains the quote/deleted/inserted text. |
| class | Global Attributes | Class is a global specialty and is used for many properties. |
| color | Not supported in HTML 5. | Specifies the text color of an element. |
| cols | <textarea> | Specifies of the width for textarea. |
| <cite> | This tag is used to title of a work | |
| <code> | This tag is used to defines a computer code | |
| <col> | This tag is used to column properties | |
| colspan | <td>, <th> | The table specifies how many columns the cell should have |
| content | <meta> | Returns the value associated with the http-equiv or name attribute |
| contenteditable | Global Attributes | Specifies whether the content of the element is editable |
| controls | <adio>, <video> | Specifies that audio / video controls should be displayed (such as play / pause button etc.) |
| data | <object> | Specifies the URL of the resource used by the object |
| data-* | Global Attributes | Used to store private custom data in a page or application |
| datetime | <del>, <ins>, <time> | Specifies the date and time |
| default | <track> | Specifies that the track is enabled if the user's preferences do not indicate that the other track is more appropriate. |
| defer | <script> | Specifies that the script is executed when page parsing is complete (for external scripts only) |
| dir | Global Attributes | Specifies the text direction for the content in the element |
| dirname | <sinput>, <stextarea> | Specifies that text direction will be submitted |
| disabled | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> | Specifies that the specified component / elements group should be disabled |
| download | <a>, <area> | Specifies that the target will be downloaded when the user clicks on the hyperlink |
| draggable | Global Attributes | Specifies whether the element can be draggable |
| enctype | <form> | Specifies how form-data should be encoded when submitting to server (for method = "post" only) |
| for | <label>, <output> | The label / count refers to the form in which the element (s) are bound |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> | Specifies the name of the form the element belongs to |
| formaction | <input>, <button> | Specifies where to send the form-data when the form is submitted. For type = "submit" only |
| headers | <th>, <td> | Specifies one or more header cells to which the cell belongs |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Specifies the height of the element |
| hidden | Global Attributes | Specifies that the element is not yet, or not now, related |
| high | <meter> | Refers to the range considered high value |
| href | <a>, <area>, <base>, <link> | Specifies the URL of the page that the link goes to |
| hreflang | <a>, <area>, <link> | Specifies the language of the linked document |
| http-equiv | <meta> | Provides HTTP headers for content attribute information / value |
| id | Global Attributes | Specifies a unique id for an element |
| ismap | <img> | Refers to the image as a server-side image map |
| kind | <track> | Specifies the type of text track |
| label | <track>, <option>, <optgroup> | Specifies the title of the text track |
| lang | Global Attributes | Specifies the language of the element content |
| list | <input> | Refers to the <datalist> component that contains predefined options for the <input> element |
| loop | <audio>, <video> | Specifies that audio / video will resume whenever it is finished |
| low | <meter> | Refers to a range that is considered a low value |
| max | <input>, <meter>, <progress> | Specifies the maximum value |
| maxlength | <input>, <textarea> | Specifies the maximum number of characters allowed in a component |
| media | <a>, <area>, <link>, <source>, <style> | The linked document specifies for which media / device it is optimized |
| method | <form> | Specifies the HTTP method to use when sending form-data |
| min | <input>, <meter> | Specifies a minimum value |
| multiple | <input>, <select> | Specifies that users can enter more than one value |
| muted | <video>, <audio> | Specifies that the video's audio output should be muted |
| name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> | Specifies the name of the element |
| novalidate | <form> | Specifies that the form should not be valid when submitted |
| onabort | <audio>, <embed>, <img>, <object>, <video> | The script is to run on abort |
| onafterprint | <body> | The script will be executed after the document is printed |
| onbeforeprint | <body> | The script has to be executed before the document can be printed |
| onbeforeunload | <body> | The script will be executed when the document is about to be unloaded |
| onblur | All visible elements. | Script to run when element loses focus |
| oncanplay | <audio>, <embed>, <object>, <video> | The script to run when the file is ready to start playing (when it has buffered enough to start) |
| oncanplaythrough | <audio>, <video> | A script to execute when the file can be executed entirely without pausing for buffering |
| onchange | All visible elements. | Script to execute when component value changes |
| onclick | All visible elements. | Script to run when an element is clicked |
| oncontextmenu | All visible elements. | Script to run when context menu is triggered |
| oncopy | All visible elements. | Script to execute while copying element content |
| oncuechange | <track> | Script to run when cue changes in the |
| oncut | All visible elements. | Script to run when element content is being truncated |
| ondblclick | All visible elements. | Script to run when a component is double-clicked |
| ondrag | All visible elements. | Script to run when the component is dragged |
| ondragend | All visible elements. | Script to run at the end of drag operation |
| ondragenter | All visible elements. | Script to run when a component is dragged to a valid drop target |
| ondragleave | All visible elements. | Script to run when an element leaves a valid drop target |
| ondragover | All visible elements. | Execution script when an element is dragged to a valid drop target |
| ondragstart | All visible elements. | Script to run at the beginning of a drag operation |
| ondrop | All visible elements. | A script to execute when a dragged element is being dropped |
| ondurationchange | <audio>, <video> | Script to run when media length changes |
| onemptied | <audio>, <video> | Script to run when something goes wrong and the file is suddenly unavailable (such as unexpectedly disconnected) |
| onended | <audio>, <video> | Script to play when media is finished (useful event for messages like "thank you for listening") |
| onerror | <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> | Script to run when an error occurs |
| onfocus | All visible elements. | Script to execute when element is focused |
| onhashchange | <body> | Script to run when the anchor part of the URL has been modified |
| oninput | All visible elements. | Script to run when the component receives user input |
| oninvalid | All visible elements. | Script to run when component is invalid |
| onkeydown | All visible elements. | Script to execute when user presses key |
| onkeypress | All visible elements. | Script to run when user presses ke |
| onkeyup | All visible elements. | Script to execute when user releases key |
| onload | <body>, <iframe>, <img>, <input>, <link>, <script>, <style> | Script to execute when element finishing loading |
| onloadeddata | <audio>, <video> | cript to run when media data is loaded |
| onloadedmetadata | <audio>, <video> | Script to run when metadata (such as parameter and duration) is loaded |
| onloadstart | <audio>, <video> | The script has to be run in the same way that a file starts loading before anything actually loads. |
| onmousedown | All visible elements. | A script to execute when the mouse button is pressed on an element |
| onmousemove | All visible elements. | The script is to be run as long as the mouse pointer moves over the element |
| onmouseout | All visible elements. | Script to execute when mouse pointer exits element |
| onmouseover | All visible elements. | The script is to be run when the mouse pointer moves over the element |
| onmouseup | All visible elements. | A script to run when a mouse button is released on an element |
| onmousewheel | All visible elements. | Script to execute when the mouse wheel element is scrolled |
| onoffline | <body> | Script to run when browser starts working offline |
| ononline | <body> | Script to run when browser starts working online |
| onpagehide | <body> | Script to run when user navigates away from the page |
| onpageshow | <body> | Script to run when user navigates to page |
| onpaste | All visible elements. | Script to run when user pastes some content in the element |
| onpause | <video>, <audio> | A script to run when the media is paused by the user or programmatically |
| onplay | The script will run when the media starts playing | |
| onplaying | <video>, <audio> | The script will run when the media starts playing |
| onpopstate | <body> | Script to run when window history changes. |
| onprogress | <video>, <audio> | A script to run when the browser is in the process of retrieving media data |
| onratechange | <video>, <audio> | The script is executed whenever the playback rate changes (such as when the user switches to slow motion or fast forward mode). |
| onreset | <form> | The script is to be executed when the reset button in the form is clicked. |
| onresize | <body> | Script to run when the browser window is resizing |
| onscroll | All visible elements. | Script to execute when scrollbar of an element is scrolled |
| onsearch | <input> | Script to run when user enters something in search field (for <input = "search">) |
| onseeked | <video>, <audio> | The script is to be run when the seeking attribute is set to false which indicates that the seeking is finished |
| onseeking | <video>, <audio> | The script is to be run when the seeking attribute is set to true which indicates that the search is enabled |
| onselect | All visible elements. | Script to execute when component is selected |
| onstalled | <video>, <audio> | Script to run when browser is unable to retrieve media data for any reason |
| onstorage | <body> | Script to run when the web storage area is updated |
| onsubmit | <form> | The script will be executed when the form is submitted |
| onsuspend | <video>, <audio> | Script to run when fetching media data is shut down before it is fully loaded for any reason |
| ontimeupdate | <video>, <audio> | A script to play when the playing mode has changed (such as when the user quickly moves to a different point in the media) |
| ontoggle | <details> | Script to run when user opens or closes the <details> component |
| onunload | <body> | Script to run when the page is unloaded (or browser window is closed) |
| onvolumechange | <video>, <audio> | Script to run each time the video / audio volume is changed |
| onwaiting | <video>, <audio> | The script is to be run when the media has paused but is expected to restart (such as when the media pauses to buffer more data) |
| onwheel | All visible elements. | Script to execute when the mouse wheel rotates up or down on an element |
| open | <details> | Specifies that the details should be visible to the user |
| optimum | <meter> | Specifies what is the best value for gauge |
| pattern | <input> | Specifies the regular expression against which the value of the <input> element is checked |
| placeholder | <input>, <textarea> | Refers to a short symbol that describes the expected value of a component |
| poster | <video> | Specifies the image to show when the video is being downloaded or until the user hits the play button |
| preload | <video>, <audio> | Specifies whether the audio / video should load when the page loads and how the author thinks |
| readonly | <input>, <textarea> | Specifies that the element is read-only |
| rel | <a>, <area>, <form>, <link> | Specifies the relationship between the current document and the linked document |
| required | <input>, <select>, <textarea> | Specifies that the element must be filled out before submitting the form |
| reversed | <ol> | Specifies that the order of the list should be descending |
| rows | <textarea> | Specifies the visible number of lines in the text area |
| rowspan | <tr>, <th> | The table specifies how many rows the cell should have |
| sandbox | <iframe> | Enables additional set of restrictions for content in <iframe> |
| scope | <th> | Specifies whether a header cell is a header for a column, row, or group of columns or rows |
| selected | <option> | Specifies that the option must be pre-selected when the page loads |
| shape | <area> | Specifies the shape of the area |
| size | <input>, <select> | Specifies the width, in letters (for <input>) or the number of visible options (for <select>) |
| sizes | <img>, <link>, <source> | Specifies the size of the linked resource |
| span | <col>, <colgroup> | Specifies the number of columns to span |
| spellcheck | Global Attributes | Specifies whether the element has its spelling and grammar checked |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | Specifies the URL of the media file |
| srcdoc | <iframe> | Specifies the HTML content of the page to display in <iframe> |
| srclang | <track> | Specifies the language of the track text data (required if kind = "subtitles") |
| srcset | <img>, <source> | Specifies the URL of the image to be used in different situations |
| start | <ol> | Specifies the starting price of the ordered list |
| step | <input> | Specifies the legal number intervals for the input field |
| style | Global Attributes | Specifies inline CSS style for element |
| tabindex | Global Attributes | Specifies the tabbing order of the element |
| target | <a>, <area>, <base>, <form> | Specifies where to open the linked document or where to submit the form |
| title | Global Attributes | Refers to additional information about the element |
| translate | Global Attributes | Specifies whether the content of the element should be translated |
| type | <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> | Specifies the type of element |
| usemap | <img>, <object> | Refers to images as client-side image maps |
| value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | Specifies the value of the element |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Specifies the width of the element |
| wrap | <textarea> | Specifies how to wrap the text in the text area when submitting the form |