HTML Element Attributes & Types
In the HTML DOM, an element object represents an HTML element. The Element interface signifies XML or HTML elements and exposes capabilities to access element tag names, child nodes, and attributes.
All HTML elements are represented by the HTMLElement type, including both direct instances and indirect ones. HTMLElement directly inherits from Element and adds several properties. Each property corresponds to one of the following standard attributes present on all HTML elements:
- id: A unique identifier for an element within a document;
- title: Contains additional information about an element, typically displayed in tooltip form;
- lang: The language code of the element's content;
- dir: The writing direction of the language;
- className: Equivalent to the
classattribute and used to specify CSS classes for elements (sinceclassis an ECMAScript keyword, this name cannot be used directly).
Related Example:
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
let div = document.getElementById("myDiv");
console.log(div.id);
console.log(div.className);
console.log(div.title);
console.log(div.lang);
console.log(div.dir);
HTML Elements and Their Types
| Element | Type |
|---|---|
| a | HTMLAnchorElement |
| abbr | HTMLElement |
| acronym | HTMLElement |
| address | HTMLElement |
| applet | HTMLAppletElement |
| area | HTMLAreaElement |
| b | HTMLElement |
| base | HTMLBaseElement |
| basefont | HTMLBaseFontElement |
| bdo | HTMLElement |
| big | HTMLElement |
| blockquote | HTMLQuoteElement |
| body | HTMLBodyElement |
| br | HTMLBRElement |
| button | HTMLButtonElement |
| caption | HTMLTableCaptionElement |
| center | HTMLElement |
| cite | HTMLElement |
| code | HTMLElement |
| col | HTMLTableColElement |
| colgroup | HTMLTableColElement |
| dd | HTMLElement |
| del | HTMLModElement |
| dfn | HTMLElement |
| dir | HTMLDirectoryElement |
| div | HTMLDivElement |
| dl | HTMLOListElement |
| dt | HTMLElement |
| em | HTMLElement |
| fieldset | HTMLFieldSetElement |
| font | HTMLFontElement |
| frame | HTMLFrameElement |
| frameset | HTMLFrameSetElement |
| H1 | HTMLHeadingElement |
| H2 | HTMLHeadingElement |
| H3 | HTMLHeadingElement |
| H4 | HTMLHeadingElement |
| H5 | HTMLHeadingElement |
| H6 | HTMLHeadingElement |
| head | HTMLHeadElement |
| hr | HTMLHRElement |
| html | HTMLHtmlElement |
| I | HTMLElement |
| iframe | HTMLIFrameElement |
| img | HTMLImageElement |
| input | HTMLInputElement |
| ins | HTMLModElement |
| isindex | HTMLIsIndexElement |
| kbd | HTMLElement |
| label | HTMLLabelElement |
| legend | HTMLLegendElement |
| li | HTMLLIElement |
| link | HTMLLinkElement |
| map | HTMLMapElement |
| menu | HTMLMenuElement |
| meta | HTMLMetaElement |
| noframes | HTMLElement |
| noscript | HTMLElement |
| object | HTMLObjectElement |
| ol | HTMLOListElement |
| optgroup | HTMLOptGroupElement |
| option | HTMLOptionElement |
| p | HTMLParagraphElement |
| param | HTMLParamElement |
| pre | HTMLPreElement |
| q | HTMLQuoteElement |
| s | HTMLElement |
| samp | HTMLElement |
| script | HTMLScriptElement |
| select | HTMLSelectElement |
| small | HTMLElement |
| span | HTMLElement |
| strike | HTMLElement |
| strong | HTMLElement |
| style | HTMLStyleElement |
| sub | HTMLElement |
| sup | HTMLElement |
| table | HTMLTableElement |
| tbody | HTMLTableSectionElement |
| td | HTMLTableCellElement |
| textarea | HTMLTextAreaElement |
| tfoot | HTMLTableSectionElement |
| th | HTMLTableCellElement |
| thead | HTMLTableSectionElement |
| title | HTMLTitleElement |
| tr | HTMLTableRowElement |
| tt | HTMLElement |
| u | HTMLElement |
| ul | HTMLOListElement |
| var | HTMLElement |
Attributes
Every element has zero or more attributes, typically used to attach additional information about the element itself or its content. The DOM methods primarily associated with attributes are: getAttribute(), setAttribute(), and removeAttribute(). These methods are mainly used for manipulating attributes.