HTML Attributes

🌐 What Are HTML Attributes?
HTML attributes are like the settings or details you add inside an HTML tag to control how it behaves or looks.
Think of tags as things, and attributes as their properties.

Every HTML element can have attributes that modify its default behavior or give it data.

General format:
<tagname attributeName="attributeValue">Content</tagname>

Example:
<p align="center">Hello World</p>
Here, align is the attribute, and "center" is its value.

There are different “flavors” of attributes depending on what they do.


Example:

<p id="intro" class="highlight" style="color: blue;" title="Intro paragraph"> Welcome to HTML! </p>

Global Attributes:
These work on any HTML element, like:
id, class, hidden, lang, style, tabindex, title, contenteditable, draggable etc.

Some attributes only work with specific tags.

Tags Attributes Descriptions
<img> src, alt, width, height Defines image source and size
<a> href, target, rel Controls link behavior
<input> type, value, placeholder, required Controls form inputs
<form> action, method, enctype Defines how data is submitted
<video> controls, autoplay, loop, poster Controls media playback



Each attribute adds a layer of purpose — like a mini superpower. 💪

More attributes:

  1. accept - defines the file types accepted by <input type="file">.
  2. accept-charset - defines character encodings for forms.
  3. accesskey - defines a shortcut key to activate an element.
  4. action - URL where form data is sent.
  5. alt - alternative text for images.
  6. async - loads scripts asynchronously.
  7. autocapitalize - controls text capitalization in inputs.
  8. autocomplete - enables/disables autofill.
  9. autofocus - focuses an element automatically on page load.
  10. autoplay - starts playing media automatically.
  11. background (deprecated) - sets a background image.
  12. bgcolor (deprecated) - sets background color.
  13. border - defines border width for tables/images.
  14. charset - defines the character encoding.
  15. checked - marks checkbox/radio as pre-selected.
  16. cite - specifies a reference URL for a quote or cite.
  17. class - defines one or more class names for styling.
  18. cols - defines column count in <textarea> or <frameset>.
  19. colspan - number of columns a cell spans in a table.
  20. content - used inside for metadata values.
  21. contenteditable - makes an element editable.
  22. controls - adds media controls like play/pause to <audio> or <video>.
  23. coords - coordinates for image maps.
  24. data-* - custom attributes (e.g., data-id="123").
  25. datetime - defines date/time value (in <time> or <del>).
  26. default - marks an option as default in <track>.
  27. defer - delays script execution until HTML parsing is complete.
  28. dir - text direction (ltr or rtl).
  29. disabled - disables an element.
  30. download - allows a link to trigger a download.
  31. enctype - encoding type for form submission.
  32. for - links a <label> to an <input>.
  33. form - links an element to a specific form.
  34. formaction - overrides form’s action for submit buttons.
  35. href - specifies link target URL.
  36. hreflang - defines language of linked document.
  37. http-equiv - simulates an HTTP header (used in <meta>).
  38. id - unique identifier for an element.
  39. inputmode - defines virtual keyboard type.
  40. ismap - indicates image is part of a server-side map.
  41. kind - defines track kind (like subtitles, captions) in <track>.
  42. label - text label for <optgroup>, <option>, or <track>.
  43. lang - defines language of element content.
  44. list - connects input to a <datalist>.
  45. max - maximum value for inputs or <meter>.
  46. maxlength - maximum number of characters in an input.
  47. media - defines what device the resource is for.
  48. method - HTTP method for form submission (get or post).
  49. min - minimum value.
  50. multiple - allows multiple selections in <select> or <input type="file">.
  51. muted - starts media muted.
  52. name - defines element name (for forms, scripts, etc.).
  53. novalidate - disables form validation.
  54. nonce - security token for inline scripts.
  55. open - keeps <details> expanded by default.
  56. optimum - defines optimal value in <meter>.
  57. pattern - regex pattern for input validation.
  58. placeholder - hint text in input fields.
  59. playsinline - plays video inline (not fullscreen) on mobile.
  60. poster - image shown before a video plays.
  61. preload - how browser loads media (auto, metadata, none).
  62. quota - (very rare), used in web storage contexts (not standard HTML).
  63. readonly - makes input uneditable.
  64. referrerpolicy - controls referrer info sent with requests.
  65. rel - relationship between current and linked document.
  66. required - marks field as mandatory.
  67. reversed - reverses list order in <ol>.
  68. rows - number of rows in <textarea>.
  69. rowspan - number of rows spanned in a table cell.
  70. sandbox - adds restrictions to an <iframe>.
  71. scope - defines cell scope in tables.
  72. selected - pre-selects an option.
  73. shape - defines area shape in image maps.
  74. size - width (for inputs) or visible items (for <select>).
  75. slot - defines slot name in web components.
  76. span - defines number of columns in <col> or <colgroup>.
  77. spellcheck - enables/disables spell checking.
  78. src - specifies resource URL (image, script, video, etc.).
  79. srcdoc - inline HTML for <iframe>.
  80. srclang - language of track text.
  81. srcset - responsive image sources.
  82. start - starting number in ordered lists.
  83. step - legal number intervals for inputs.
  84. style - inline CSS.
  85. summary (deprecated) - summary of table content.
  86. tabindex - defines tab order.
  87. target - specifies where to open a link.
  88. title - tooltip text.
  89. translate - tells browser whether to translate element text.
  90. type - defines input type, button type, or script type.
  91. usemap - links image to an image map.
  92. value - defines input’s value or
  93. width - defines element width.
  94. z-index - 🚫 not an attribute (it’s CSS), but often confused as one!