HTML Topics
- HTML Intro
- HTML Basic
- HTML Editors
- HTML CSS
- HTML Tags
- HTML Deprecated Tags
- HTML Events
- HTML Event Attributes
- HTML Global Attributes
- HTML Attributes
- abbr
- accept
- accept-charset
- accesskey
- action
- align
- alt
- archive
- as
- async
- autocapitalize
- autocomplete
- autofocus
- autoplay
- axis
- bgcolor
- border
- cellpadding
- cellspacing
- char
- charoff
- charset
- checked
- cite
- class
- classid
- codebase
- codetype
- color
- cols
- colspan
- compact
- content
- contenteditable
- controls
- coords
- crossorigin
- data
- data-*
- datetime
- declare
- default
- defer
- dir
- dirname
- disabled
- download
- draggable
- enctype
- enterkeyhint
- for
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- frame
- frameborder
- frameset
- headers
- height
- hidden
- high
- href
- hreflang
- hspace
- http-equiv
- id
- inert
- inputmode
- ismap
- kind
- label
- lang
- list
- loop
- low
- max
- maxlength
- media
- method
- min
- multiple
- muted
- name
- novalidate
- onabort
- onafterprint
- onbeforeprint
- onbeforeunload
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onhashchange
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onoffline
- ononline
- onpagehide
- onpageshow
- onpaste
- onpause
- onplay
- onplaying
- onpopstate
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onsearch
- onseeked
- onseeking
- onselect
- onstalled
- onstorage
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onunload
- onvolumechange
- onwaiting
- onwheel
- open
- optimum
- pattern
- placeholder
- popover
- popovertarget
- popovertargetaction
- poster
- preload
- readonly
- rel
- required
- reversed
- rows
- rowspan
- sandbox
- scope
- selected
- shape
- size
- sizes
- span
- spellcheck
- src
- srcdoc
- srclang
- srcset
- start
- step
- style
- tabindex
- target
- title
- translate
- type
- usemap
- value
- width
- wrap
- HTML Comments
- HTML Entity
- HTML Head
- HTML Form
- HTML IndexedDB
- HTML Drag & Drop
- HTML Geolocation
- HTML Canvas
- HTML Status Code
- HTML Language Code
- HTML Country Code
- HTML Charset
- MIME Types
HTML declare Attribute
Photo Credit to CodeToFun
🙋 Introduction
The declare
attribute is an obsolete HTML attribute that was used with the <object> element to specify that the object's properties are declared in the document's content rather than loaded immediately.
This attribute is not widely supported and is not recommended for use in modern web development.
🎯 Purpose of declare Attribute
The declare
attribute was intended to improve the loading performance of web pages by allowing the browser to delay the loading of the object until needed. This could be beneficial for large objects or multimedia content that might otherwise slow down the initial page load.
💎 Values
Unlike other attributes, the declare
attribute does not have any specific values. It is a Boolean attribute, meaning its presence alone is enough to enable the intended behavior. Simply including the declare
attribute in the <object> tag would have signaled the browser to declare, but not immediately instantiate the object.
📄 Example:
<object data="movie.mp4" type="video/mp4" declare>
<p>Your browser does not support HTML5 video.</p>
</object>
🧠 How it Works
In this example, the declare
attribute is included to indicate that the object element's properties are declared but should not be immediately loaded.
🔄 Dynamic Values with JavaScript
Since the declare
attribute is a Boolean attribute, it can be dynamically added or removed using JavaScript. This can be useful in scenarios where you need to control the loading behavior of objects based on certain conditions or user interactions.
<script>
// Dynamically add the declare attribute to an object element
document.getElementById("dynamicObject").setAttribute("declare", "");
// Dynamically remove the declare attribute from an object element
document.getElementById("dynamicObject").removeAttribute("declare");
</script>
<object id="dynamicObject" data="movie.mp4" type="video/mp4">
<p>Your browser does not support HTML5 video.</p>
</object>
🧠 How it Works
In this script, the declare
attribute is added to and removed from an object element with the id "dynamicObject" using JavaScript.
🏆 Best Practices
- Since the
declare
attribute is obsolete and not supported by modern browsers, it is not recommended for use in contemporary web development. - Consider using modern alternatives and best practices for optimizing the loading of multimedia content, such as using the preload attribute for <video> and <audio> elements or leveraging lazy loading techniques.
- Always test your web pages across different browsers and devices to ensure compatibility and performance.
🎉 Conclusion
The declare
attribute was a part of early HTML specifications intended to improve page load performance by delaying the loading of certain objects.
However, its lack of support and obsolescence in modern web standards mean it should be avoided in favor of more current and effective techniques for managing content loading.
👨💻 Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (HTML declare Attribute), please comment here. I will help you immediately.