HTML Attributes provide extra information about HTML Tags. HTML Attribute is used in the starting tag of HTML Element or HTML Tag.
Table of Contents
Why HTML Attributes are Used
This extra information that HTML Attributes provide about HTML Tags can be used in any way. This could be the Styling information of HTML Tag which gives it a unique style or this could be a Tool Tip that is displayed when you hover over any HTML Element.
Name Value Pair in HTML Attribute
All kinds of HTML Tags or Elements that we use, can have HTML Attributes. HTML Attributes are in name/value pair form. First there is name of HTML Attribute then there is value of that HTML attribute i.e name="value".
How to Write HTML Attributes
HTML Attributes are written in name/value pair form (name="value") in the starting tag of HTML Element. Double quotes are usually used to write HTML Attributes as shown in example below but you can also use Single Quotes. The attribute value can remain unquoted if it doesn't contain spaces but It's recommended to use quotes, single or double.
You can also write HTML Attributes in upper case i.e TITLE instead of title, both upper case and lower case attributes are correct but we suggest you to write them in lower case.
Example of HTML Attribute
In the following simple example, we have used title attribute for the paragraph tag, title is the name of attribute while I am a Paragraph is it's value.
<p title="I am a Paragraph.">
This is a Paragraph.
<p>
Difference between Attributes and Properties in HTML
HTML Attributes are defined by HTML while Properties are defined by DOM. When we make a HTML tag we write it's attribute but when the browser renders our code a DOM node is created.
This node is object and it has different properties. If you are unable to understand all this then don't worry you will understand it as you learn more about HTML and DOM.
List of HTML Attributes
Below is the list of HTML Attributes and their function. Find complete list here.
-
accept attribute
It is used for input tag (only for type="file"), it tells about the type of files that the website server accepts or user can upload, Read More.
-
accept-charset attribute
It is used for form tag, It specifies the character encoding that is to be used for the submission of form, Read More.
-
accesskey attribute
It defines a shortcut key to activate or focus an element, Read More.
-
action attribute
It is used for form tag, It tells where to send the submitted form data, Read More.
-
align attribute
It is not supported in HTML5, It was used to specify the alignment with respect to surrounding elements but we use CSS for that now, Read More.
-
alt attribute
It is used for img tag, area tag and input tag. It defines the alternative text if the element doesn't display, Read More.
-
async attribute
It is used for script tag, It tells that script is executed asynchronously, Read More.
-
autocomplete attribute
It is used for form tag, input tag. It's value is on. It enables the browser to display previously typed text, so you don't have to write it again and again.
-
autofocus attribute
It is used for button tag, input tag, select tag and textarea tag. It enables element to automatically get focused when the page loads.
-
autoplay attribute
It is used for audio tag, video tag, It specifies that the audio or video should automatically play after the page is loaded.
-
border attribute
It is not supported in HTML 5, It is used to set width of border, we use CSS instead now.
-
bgcolor attribute
It is not supported in HTML 5, It is used to set background color of element, we use CSS instead now.
-
charset attribute
It is used for meta tag and script tag. It defines the character encoding.
-
checked attribute
It is used for input tag (for type="radio" or type="checkbox"), It specifies the element to be pre-selected.
-
cite attribute
It is used for blockquote tag, del tag, ins tag and q tag. It gives the URL of document which explains the quote, text or data.
-
class attribute
It is a Global Attribute. It defines one or more class names for an element that can be used to style it or can be used to refer to it by JavaScript for various interactive functions.
-
color attribute
It is not supported in HTML 5. It sets the text color of element, but we use CSS for that now.
-
cols attribute
It is used for textarea tag. It defines the width of text area.
-
colspan attribute
It is used for th tag and td tag. It defines the no of columns table cell must have.
-
content attribute
It is used for meta tag. It defines the content type of meta data.
-
contenteditable attribute
It is also a Global Attribute. It defines if the content of Html element is editable or not.
-
controls attribute
It is used for audio tag and video tag. It allows the browser to display the control buttons (like play and pause etc) for the audio or video file.
-
coords attribute
It is used for area tag. It defines the coordinates of the area element.
-
data attribute
It is used for object tag. It defines the URL of the resource that is linked with object.
-
data-* attribute
It is also a Global Attribute. It enables us to embed or store the custom data attributes on all our HTML elements.
-
datetime attribute
It is used for del tag, time tag and ins tag. It sets the date and time on web page.
-
default attribute
It is used for track tag. It is a Boolean attribute, It defines which track is to be enabled if the user doesn't specify the appropriate track.
-
defer attribute
It is used for script tag. It is only used for external script files. It makes sure that the script is only executed after the page parsing is complete.
-
dir attribute
It is used to set the base direction of text for display.
-
dirname attribute
It is used for input tag, textarea tag. It enables that the direction of text will be submitted.
Find complete list here.