HTML Attributes

HTML Attribute

HTML Attributes provide extra information about HTML Tags. HTML Attribute is used in the starting tag of HTML Element or HTML Tag.

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.

  1. 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.

  2. accept-charset attribute

    It is used for form tag, It specifies the character encodings that are to be used for the submission of form.

  3. accesskey attribute

    It defines a short key to activate or focus an element.

  4. action attribute

    It is used for form tag, It tells where to send the submitted form data that user has input.

  5. align attribute

    It is not supported in HTML 5, It was used to specify the alignment with respect to surrounding elements but we use CSS for that now.

  6. alt attribute

    It is used for img tag, area tag and input tag. It defines the alternative text if the element doesn't display.

  7. async attribute

    It is used for script tag, It tells that script is executed asynchronously.

  8. 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.

  9. 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.

  10. 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.

  11. border attribute

    It is not supported in HTML 5, It is used to set width of border, we use CSS instead now.

  12. bgcolor attribute

    It is not supported in HTML 5, It is used to set background color of element, we use CSS instead now.

  13. charset attribute

    It is used for meta tag and script tag. It defines the character encoding.

  14. checked attribute

    It is used for input tag (for type="radio" or type="checkbox"), It specifies the element to be pre-selected.

  15. 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.

  16. 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.

  17. color attribute

    It is not supported in HTML 5. It sets the text color of element, but we use CSS for that now.

  18. cols attribute

    It is used for textarea tag. It defines the width of text area.

  19. colspan attribute

    It is used for th tag and td tag. It defines the no of columns table cell must have.

  20. content attribute

    It is used for meta tag. It defines the content type of meta data.

  21. contenteditable attribute

    It is also a Global Attribute. It defines if the content of Html element is editable or not.

  22. 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.

  23. coords attribute

    It is used for area tag. It defines the coordinates of the area element.

  24. data attribute

    It is used for object tag. It defines the URL of the resource that is linked with object.

  25. data-* attribute

    It is also a Global Attribute. It enables us to embed or store the custom data attributes on all our HTML elements.

  26. datetime attribute

    It is used for del tag, time tag and ins tag. It sets the date and time on web page.

  27. 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.

  28. 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.

  29. dir 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.

  30. dirname attribute

    It is used for input tag, textarea tag. It enables that the direction of text will be submitted.

Find complete list here.