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

<!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 yourself

This is a Heading

This is a paragraph.

This is a linik

HTML 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 component
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