188 lines
12 KiB
Markdown
188 lines
12 KiB
Markdown
---
|
|
title: "IDL - Glossary | MDN"
|
|
chunk: 1/3
|
|
source: "https://developer.mozilla.org/en-US/docs/Glossary/IDL"
|
|
category: "reference"
|
|
tags: "web, html, css, javascript, documentation"
|
|
date_saved: "2026-05-05T05:34:27.142163+00:00"
|
|
instance: "kb-cron"
|
|
---
|
|
|
|
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/IDL#content)
|
|
* [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/IDL#search)
|
|
|
|
[ MDN ](https://developer.mozilla.org/en-US/)
|
|
HTML
|
|
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
|
|
|
HTML reference
|
|
|
|
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
|
|
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
|
|
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
|
|
|
|
HTML guides
|
|
|
|
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
|
|
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
|
|
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
|
|
|
|
Markup languages
|
|
|
|
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
|
|
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
|
|
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
|
|
|
|
CSS
|
|
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
|
|
|
CSS reference
|
|
|
|
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
|
|
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
|
|
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
|
|
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
|
|
|
|
CSS guides
|
|
|
|
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
|
|
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
|
|
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
|
|
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
|
|
|
|
Layout cookbook
|
|
|
|
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
|
|
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
|
|
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
|
|
|
|
JavaScriptJS
|
|
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
|
|
|
JS reference
|
|
|
|
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
|
|
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
|
|
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
|
|
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
|
|
|
|
JS guides
|
|
|
|
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
|
|
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
|
|
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
|
|
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
|
|
|
|
Web APIs
|
|
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
|
|
|
|
Web API reference
|
|
|
|
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
|
|
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
|
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
|
|
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
|
|
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
|
|
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
|
|
|
|
Web API guides
|
|
|
|
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
|
|
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
|
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
|
|
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
|
|
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
|
|
|
|
All
|
|
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
|
|
|
|
Technologies
|
|
|
|
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
|
|
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
|
|
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
|
|
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
|
|
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
|
|
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
|
|
|
|
Topics
|
|
|
|
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
|
|
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
|
|
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
|
|
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
|
|
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
|
|
|
|
Learn
|
|
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
|
|
|
|
Frontend developer course
|
|
|
|
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
|
|
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
|
|
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
|
|
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
|
|
|
|
Learn HTML
|
|
|
|
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
|
|
|
|
Learn CSS
|
|
|
|
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
|
|
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
|
|
|
|
Learn JavaScript
|
|
|
|
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
|
|
|
|
Tools
|
|
Discover our tools
|
|
* [Playground](https://developer.mozilla.org/en-US/play)
|
|
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
|
|
|
|
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
|
|
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
|
|
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
|
|
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
|
|
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
|
|
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
|
|
|
|
About
|
|
Get to know MDN better
|
|
* [About MDN](https://developer.mozilla.org/en-US/about)
|
|
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
|
|
|
|
* [Community](https://developer.mozilla.org/en-US/community)
|
|
* [MDN on GitHub](https://github.com/mdn)
|
|
|
|
[Blog](https://developer.mozilla.org/en-US/blog/)
|
|
1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
|
|
2. [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)
|
|
|
|
# IDL
|
|
An **IDL** (_Interface Description Language_) is a generic language, used to specify object interfaces independent of any particular programming language.
|
|
## In this article
|
|
* [Content versus IDL attributes](https://developer.mozilla.org/en-US/docs/Glossary/IDL#content_versus_idl_attributes)
|
|
* [See also](https://developer.mozilla.org/en-US/docs/Glossary/IDL#see_also)
|
|
|
|
## [Content versus IDL attributes](https://developer.mozilla.org/en-US/docs/Glossary/IDL#content_versus_idl_attributes)
|
|
In HTML, most attributes have two faces: the **content attribute** and the **IDL attribute**.
|
|
The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via [`element.setAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) or [`element.getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute). The content attribute is always a string even when the expected value should be an integer. For example, to set an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element's `maxlength` to 42 using the content attribute, you have to call `setAttribute("maxlength", "42")` on that element.
|
|
The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like `element.foo`. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.
|
|
Most of the time, IDL attributes will return their values as they are really used. For example, the default `type` for [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) elements is "text", so if you set `input.type="foobar"`, the `<input>` element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the `type` IDL attribute will return the string "text".
|
|
IDL attributes are not always strings; for example, `input.maxlength` is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so `input.maxlength` is always going to return a number and when you set `input.maxlength`, it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.
|
|
IDL attributes can [reflect other types](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes) such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow [the rules laid out in the specification](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes), but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (`select.size`, for example) and you should read the specifications to understand how exactly they behave.
|
|
## [See also](https://developer.mozilla.org/en-US/docs/Glossary/IDL#see_also)
|
|
* [IDL](https://en.wikipedia.org/wiki/Interface_description_language) on Wikipedia
|
|
* [HTML attribute reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
|
|
* [Interface Definition Language](https://people.eecs.berkeley.edu/~messer/netappc/Supplements/10-idl.pdf) |