Skip to main content

List Of All Html Attributes With Explanation

by Rustcode
list-of-all-html-attributes-with-explanation

HTML attributes play a fundamental role in shaping the structure, behavior, and accessibility of web content. They are the building blocks that define how elements on a web page interact with users and are essential for creating well-structured and functional websites.

In this comprehensive article, we'll explore a diverse list of HTML attributes, from the basics like 'src' and 'alt' for images to more advanced 'aria-' attributes that enhance accessibility. Whether you're a seasoned web developer or just starting on your coding journey, understanding these attributes is key to mastering the art of web design and development. For more detail use of Attributes, You can read our article "Fundamentals of Html Attributes".

  • id: Provides a unique identifier for an element.
  • class: Assigns one or more CSS classes to an element for styling purposes.
  • style: Allows inline CSS styling for an element.
  • src: Specifies the source URL for elements like images, audio, or video.
  • href: Defines the URL link for anchor (<a>) elements.
  • alt: Provides alternative text for images for accessibility and when the image cannot be displayed.
  • title: Offers additional information or a tooltip for elements like links.
  • width and height: Sets the dimensions of images and other elements.
  • target: Determines where a linked resource should be displayed (e.g., _blank for a new tab/window).
  • disabled: Disables an input element or button.
  • readonly: Makes an input field read-only.
  • value: Sets the initial value of input elements.
  • placeholder: Provides a hint or example text for input fields.
  • checked: Preselects a checkbox or radio button.
  • selected: Preselects an option in a dropdown (<select>) element.
  • maxlength: Specifies the maximum number of characters allowed in an input field.
  • min and max: Defines the range of valid values for input elements with a numeric type.
  • for: Associates a label with a form control using its id.
  • aria-* attributes: Enhances accessibility by providing additional information for screen readers.
  • data-* attributes: Allows custom data storage for elements.
  • role: Defines the role of an element in an accessible user interface.
  • autocomplete: Controls whether the browser should automatically fill in form fields.
  • contenteditable: Specifies whether an element's content can be edited.
  • spellcheck: Enables or disables spellchecking for text within an element.
  • name: Specifies the name of an element, particularly important for form elements like input fields.
  • placeholder: Provides a placeholder text in an input field to give users a hint about the expected input.
  • autocomplete: Enables or disables browser autofill for an input field.
  • autofocus: Automatically focuses on an input element when the page loads.
  • readonly: Makes an input field non-editable.
  • disabled: Disables an input element, preventing user interaction.
  • multiple: Allows selecting multiple options in a <select> element.
  • colspan and rowspan: Defines the number of columns or rows a table cell should span.
  • scope: Specifies the scope of a table header cell (<th>) in a data table.
  • target: Determines the browsing context for linked content (e.g., _blank for a new window).
  • download: Suggests the browser to download a linked resource rather than navigating to it.
  • required: Indicates that an input field must be filled out before submitting a form.
  • min and max: Defines the minimum and maximum values for numeric input fields.
  • step: Specifies the increment value for numeric input fields.
  • pattern: Sets a regular expression pattern for validating input.
  • accept: Specifies the file types accepted in an <input type="file"> element.
  • media: Specifies media conditions for when to apply linked stylesheets.
  • defer: Defers the execution of JavaScript until after the document has been parsed.
  • async: Loads external scripts asynchronously to not block rendering.
  • charset: Specifies the character encoding for an external script.
  • rel: Describes the relationship between the current document and a linked resource (e.g., stylesheet for linking stylesheets).
  • http-equiv: Provides an HTTP response header for the <meta> element (e.g., refresh for automatic page redirection).
  • content: Specifies the content value for <meta> elements.
  • border: Specifies the border width around tables.
  • cellpadding and cellspacing: Define padding and spacing between table cells, respectively.
  • colgroup and col: Group and define properties for table columns.
  • bgcolor: Sets the background color for elements like table cells.
  • nowrap: Prevents text from wrapping within an element.
  • bgcolor: Sets the background color of an element.
  • scope: Defines the scope of a <th> element in a data table.
  • abbr: Provides an abbreviation or acronym for the content of an element.
  • colspan and rowspan: Determines the number of columns or rows a table cell spans.
  • charset: Specifies the character encoding for a linked resource.
  • http-equiv: Provides an HTTP header directive for the <meta> element.
  • content: Defines the content value for <meta> elements.
  • defer: Delays the execution of scripts until after the document is parsed.
  • async: Loads external scripts asynchronously, not blocking rendering.
  • onload and onunload: Execute JavaScript when a page loads and unloads, respectively.
  • onmouseover and onmouseout: Trigger JavaScript events when the mouse enters or leaves an element.
  • onfocus and onblur: Define JavaScript actions when an element gains or loses focus.
  • onchange: Executes JavaScript when the content of an input element changes.
  • onsubmit: Specifies JavaScript code to run when a form is submitted.
  • autocorrect and autocapitalize: Control the auto-correction and auto-capitalization behavior of input fields on mobile devices.
  • scrolling: Specifies whether scrollbars should be displayed for an <iframe> element (yes, no, or auto).
  • controls: Adds audio or video controls to the <audio> and <video> elements.
  • loop: Indicates whether audio or video should play in a loop.
  • preload: Suggests how much of the audio or video should be preloaded (none, metadata, or auto).
  • autostart: Automatically starts playing audio or video when the page loads.
  • defer: Defers the execution of a script until after the page has been parsed.
  • async: Loads external scripts asynchronously to avoid blocking rendering.
  • hidden: Hides an element from being displayed.
  • download: Suggests that the browser should download a linked resource rather than navigating to it.
  • placeholder: Provides a hint or example text for input fields.
  • list: Associates an <input> element with a <datalist> element for autocomplete.
  • form: Specifies the form that an <input> element belongs to.
  • maxlength: Sets the maximum number of characters allowed in an input field.
  • minlength: Specifies the minimum number of characters required in an input field.
  • autocomplete: Enables or disables browser autofill for an input field.
  • novalidate: Disables form validation for a <form> element.
  • multiple: Allows selecting multiple files in an <input type="file"> element.
  • autofocus: Automatically focuses on an input element when the page loads.
  • disabled: Disables an input element or button.
  • required: Indicates that an input field must be filled out before submitting a form.
  • readonly: Makes an input field non-editable.
  • accept-charset: Specifies the character encodings that are to be used when the form is submitted.
  • align: Defines the horizontal alignment of elements (e.g., left, right, center).
  • alink: Sets the color of active links (clickable links).
  • background: Specifies a background image for an HTML element (deprecated in favor of CSS).
  • charset: Specifies the character encoding for an external script or resource.
  • compact: Reduces spacing between elements, primarily used with lists (<ul> and <ol>).
  • contenteditable: Indicates whether the content of an element can be edited by the user.
  • datetime: Provides a machine-readable date and time for elements like <time>.
  • dirname: Specifies the direction of text within an element (e.g., ltr for left-to-right or rtl for right-to-left).
  • draggable: Allows an element to be draggable via HTML5 Drag and Drop API.
  • height and width: Sets the dimensions (height and width) of various elements.
  • ismap: Specifies that an <img> element is part of a server-side image map.
  • language: Specifies the scripting language of a <script> element (deprecated in favor of the type attribute).
  • manifest: Specifies the URL of the application cache manifest file for offline web applications.
  • nohref: Indicates that an <area> element should not be a clickable hyperlink within an image map.
  • noshade: Removes the shading effect from a horizontal rule (<hr>).
  • nowrap: Prevents text from wrapping within an element (e.g., <td>).
  • scrolling: Controls the presence of scrollbars in an <iframe> (yes, no, or auto).
  • shape: Defines the shape of an <area> element in an image map (e.g., rect, circle, poly).
  • target: Specifies where a linked resource should open (e.g., _blank for a new window).
  • text: Sets the default text color for elements.
  • version: Specifies the version of the HTML document being used (e.g., HTML4.01).
  • noresize: Prevents users from resizing frames or iframes.
  • noreferrer: Specifies that no referrer information should be sent when a link is clicked.
  • ping: Specifies a list of URLs to be notified of a link click, useful for tracking.
  • reversed: Reverses the order of list items in an ordered list (<ol>).
  • sandbox: Defines an HTML sandbox for a <iframe> to restrict its behavior.
  • seamless: Makes an <iframe> appear as if it is part of the containing document.
  • sizes: Specifies the sizes of responsive images in a <picture> element.
  • srcset: Provides multiple sources for responsive images in a <picture> element.
  • usemap: Associates an <img> element with a client-side image map.
  • vspace and hspace: Sets the vertical and horizontal space around images.
  • shape: Defines the shape of an area in an image map (rect, circle, poly, etc.).
  • accesskey: Assigns a keyboard shortcut to an element for accessibility.
  • role: Specifies the ARIA (Accessible Rich Internet Applications) role of an element for accessibility.
  • aria-*: Various ARIA attributes for enhancing accessibility.
  • slot: Used with web components to define where content can be inserted.
  • loading: Controls the loading behavior of an <img> element (eager, lazy, or auto).
  • autocomplete: Provides hints for form autofill behavior (on, off, current-password, etc.).
  • autocapitalize: Controls text capitalization in input fields (characters, words, sentences, or none).
  • autocorrect: Specifies whether input fields should be auto-corrected (on, off, or default).
  • crossorigin: Manages the CORS (Cross-Origin Resource Sharing) behavior of external resources.
  • integrity: Provides a cryptographic hash value for validating external resource integrity (e.g., for scripts or stylesheets).
  • rel: Specifies the relationship between the current document and a linked resource.
  • media: Defines the media conditions for applying linked stylesheets.
  • itemprop: Assigns a property to an element, used for structured data (Schema.org).
  • itemscope: Specifies that an element has associated structured data.
  • itemtype: Specifies the type of structured data associated with an element.
  • itemref: Links an element to additional properties for structured data.
  • datetime: Provides a machine-readable date and time for elements like <time>.
  • security: Specifies the security settings for an embedded object (e.g., <object>).
  • standby: Provides text to be displayed while an embedded object is loading (deprecated).
  • bordercolor: Sets the border color of an element.
  • clear: Defines how an element should behave in relation to floating elements (e.g., left, right, both, none).
  • compact: Reduces spacing between elements, primarily used with lists (<ul> and <ol>).
  • nowrap: Prevents text from wrapping within an element (e.g., <td>).
  • rev: Specifies the reverse relationship between the current document and a linked resource (deprecated).
  • scheme: Specifies the URL scheme used for a link (e.g., http, https, ftp, etc.).
  • scrollamount: Sets the speed of scrolling text within an element (deprecated).
  • truespeed: Indicates that scrolling text should be displayed at its original speed (deprecated).
  • compact: Reduces spacing between elements, primarily used with lists (<ul> and <ol>).
  • start: Specifies the starting value of a numbered list (<ol>).
  • unselectable: Prevents the user from selecting text within an element (deprecated).
  • valign: Specifies the vertical alignment of text within an element (e.g., top, middle, bottom, baseline).
  • width: Sets the width of a table column or an <object> element.
  • novalidate: Disables form validation for a <form> element.
  • spellcheck: Enables or disables spellchecking for text within an element.
  • max-width and min-width: Define the maximum and minimum width of an element.
  • max-height and min-height: Define the maximum and minimum height of an element.
  • border-radius: Sets the radius for rounded corners on elements (used with CSS).
  • box-shadow: Adds a shadow effect to elements (used with CSS).
  • placeholder: Provides a hint or example text for input fields.
  • slot: Used with web components to define where content can be inserted.
  • loading: Controls the loading behavior of an <img> element (eager, lazy, or auto).
  • aspect-ratio: Sets the aspect ratio of an element (used with CSS).
  • dropzone: Defines whether an element is a drop target for draggable elements (used with the HTML Drag and Drop API).
  • hidden: Hides an element from being displayed.
  • nohref: Indicates that an <area> element should not be a clickable hyperlink within an image map.
  • sortable: Makes a list of items sortable using drag and drop (used with JavaScript).
  • is: Specifies the custom element's constructor (used with Web Components).
  • allowfullscreen: Indicates whether an <iframe> or <object> element can be displayed in full-screen mode.
  • shape-rendering: Specifies how an SVG shape should be rendered for quality and performance (used with SVG).
  • vector-effect: Controls how an SVG path should be treated when applying vector effects (used with SVG).
  • patternUnits and patternContentUnits: Define the coordinate system for <pattern> elements (used with SVG).
  • viewBox: Specifies the coordinate system and aspect ratio for an SVG element (used with SVG).
  • preserveAspectRatio: Defines how an SVG element should be scaled and positioned within its viewBox (used with SVG).
  • stroke-dasharray: Sets the pattern of dashes and gaps in an SVG stroke (used with SVG).
  • transform: Applies a transformation to an SVG element (used with SVG).
  • clip-path: Clips an SVG element to a specified path or shape (used with SVG).
  • marker-start, marker-mid, and marker-end: Specifies markers for the start, middle, and end of an SVG path (used with SVG).
  • offset: Defines the offset for an SVG animation or gradient stop (used with SVG).
  • crossorigin: Manages the CORS (Cross-Origin Resource Sharing) behavior of external resources.
  • referrerPolicy: Controls the referrer information sent when making requests for resources.
  • sandbox: Defines an HTML sandbox for a <iframe> to restrict its behavior.
  • poster: Specifies an image to be shown while an <video> is loading or before playback.
  • controlsList: Customizes the set of UI controls displayed for media elements.
  • preload: Suggests how much of the audio or video should be preloaded (none, metadata, or auto).
  • sizes: Specifies the sizes of responsive images in a <picture> element.
  • srcset: Provides multiple sources for responsive images in a <picture> element.
  • aria-label: Provides an accessible label for elements that require one, improving accessibility.
  • aria-describedby: Links an element to another element that provides additional context or instructions for screen readers.
  • role: Specifies the ARIA (Accessible Rich Internet Applications) role of an element for accessibility.
  • aria-pressed: Indicates whether a toggle button is in a pressed or non-pressed state.
  • aria-required: Indicates that an input field is required for form submission.
  • aria-setsize and aria-posinset: Used to define an element's position and size within a set of similar elements.
  • spellcheck: Enables or disables spellchecking for text within an element.
  • aria-flowto: Specifies the next element that should be focused when this element receives keyboard focus.
  • aria-level: Indicates the hierarchical level or structure of an element within a document outline.
  • aria-hidden: Determines whether an element should be hidden from screen readers and assistive technologies.
  • aria-disabled: Specifies whether an element is disabled or not interactive.
  • aria-controls: Links an element to an element that it controls, such as a menu or dropdown.
  • aria-owns: Links an element to elements that it owns or is responsible for.
  • aria-pressed: Indicates whether a toggle button is in a pressed or non-pressed state.
  • aria-selected: Indicates whether an option in a list or a tab in a tab panel is selected.
  • aria-labelledby: Associates an element with a label or heading that describes it.
  • aria-autocomplete: Defines the auto-completion behavior for input elements.
  • aria-posinset and aria-setsize: Specify an element's position and size within a set of similar elements.
  • aria-busy: Indicates that an element is currently busy or in the process of performing an action.
  • aria-multiline: Indicates whether a text input element can accept multiple lines of text.
  • aria-multiselectable: Specifies that a list or group of items allows multiple selections.
  • aria-placeholder: Provides an accessible placeholder text for form input fields.
  • aria-readonly: Indicates that an element is read-only and cannot be modified by the user.
  • aria-relevant: Specifies the types of dynamic content changes that should be announced to screen readers.
  • aria-sort: Specifies the sorting order of a table column (e.g., ascending, descending, none).
  • aria-valuemin and aria-valuemax: Define the allowable range of values for an input.
  • aria-valuenow: Represents the current value of a dynamic input.
  • aria-valuetext: Provides an alternative human-readable representation of the current value.
  • aria-atomic: Determines whether screen readers should present dynamic content changes as a whole or in parts.
  • aria-live: Specifies that changes in content should be announced to screen readers as they occur.
  • aria-expanded: Indicates whether a collapsible element, like an accordion, is currently expanded or collapsed.
  • aria-checked: Represents the checked or unchecked state of a checkbox or radio button.
  • aria-grabbed: Indicates whether an element is being dragged or grabbed.
  • aria-activedescendant: Links a widget with its currently active descendant.
  • aria-haspopup: Marks an element as having a submenu or context menu.
  • aria-orientation: Specifies the orientation of an element, such as a slider or scrollbar.
  • aria-roledescription: Provides a human-readable description of an element's role.

Comments

Post a Comment