Skip to main content

HTMLElement ↔ Interface Object to rep Element in HTML

aka Element, El

<button>​

Interactive Element to user trigger programmable action

<object\>​

Element to embed external resource

Source: <object​>: The External Object element - HTML: HyperText Markup Language | MDN

<pre>​

Element to display preformatted text (as literally written in HTML Source Code)

<progress> ​

Progress Indicator Element to display loading progress bar

Source: <progress​>: The Progress Indicator element - HTML: HyperText Markup Language | MDN

Block Element​

📦 Element to stack as blocks (default) & fill width of HTML

Inline Element​

🔤Element Flow Content to flow side-by-side

References​

  1. CSS Property ↔ variable to define visual characteristic of HTMLElement

  2. Selector ↔ CSS Syntax to define pattern to match HTMLElement instances (& special states) in document to direct Style Rule

  3. <object\> ↔ Element to embed external resource

  4. HTMLCollection ↔ Array-Like Object showing a live collection of HTMLElement

  5. Type Selector ↔ Selector to match all instance by typeof HTMLElement node in Document

  6. live collection ↔ Array-Like Object list of HTMLElement with realtime auto-update on Document change

  7. <button> ↔ Interactive Element to user trigger programmable action

  8. <pre> ↔ Element to display preformatted text (as literally written in HTML Source Code)

  9. Class Selector ↔ .myClass Selector to match any HTMLElement with class attribute

  10. Specificity ↔ Weighting Algorithm for Layout engine to choose which competing Selector Style Rule to apply to HTMLElement

  11. HTML Attribute ↔ props for HTMLElement

  12. <progress> ↔ Progress Indicator Element to display loading progress bar

  13. Block Element ↔ 📦 Element to stack as blocks (default) & fill width of HTML

  14. Flow Content ↔ any HTMLElement to go inside <body\> via Normal Flow

  15. Inline Element ↔ 🔤Element Flow Content to flow side-by-side

  16. Normal Flow ↔ default way HTMLElement arrange into Web Page

  17. Box Generation ↔ (process) Element format type set by display to process by CSS VFM & create box

  18. Metadata Content ↔ HTMLElement to mod presentation/behavior of Document & provides additional info

  19. <html> ↔ HTML Document Root Element to contain all HTML

  20. createPortal() ↔ ReactDOM API Escape Hatch fn to render child Element to any container Element other than parent

  21. <nav\> ↔ Semantic Navigation Section <div\>to group navigational Element

  22. <select> ↔ Interactive Drop-down Menu Selection List Element to embed list of <option\>

  23. Interactive ↔ Flow Content Element for user interaction

  24. <noscript> ↔ NoScript Metadata Content Element to load fallback content IF script disabled/fail load

  25. <base\> ↔ Base URL Metadata Content Element to specify base URL for use with relative URLs in Document

  26. <link> ↔ External Resource Link Element to specify Metadata Content relationships of Document & external resources

  27. <meta> ↔ Metadata Content Element to define Metadata of Document

  28. <script> ↔ Script Metadata Content Element to embed code (usually JS)

  29. <style\> ↔ Style Information Element to add CSS Metadata Content

  30. <title\> ↔ Metadata Content Element to display Document title in Browser window title bar (or page tab)

  31. <head> ↔ Document Metadata Header Element to embed Metadata Content

  32. onclick ↔ Mouse Event Signal fire when user click Element

  33. oncontextmenu ↔ Mouse Event Signal fire when user right click Element to open context menu

  34. ondblclick ↔ Mouse Event Signal fire when user double-click Element

  35. onmousedown ↔ Mouse Event Signal fire when user press mouse button down over Element

  36. onmouseenter ↔ Mouse Event Signal fire when user mouse pointer enter Element area

  37. onmouseleave ↔ Mouse Event Signal fire when user mouse pointer leave Element area

  38. onmouseout ↔ Mouse Event Signal fire when user move pointer out of Element (or children)

  39. onmouseover ↔ Mouse Event Signal fire when user move pointer over Element (or children)

  40. onmouseup ↔ Mouse Event Signal fire when user release up mouse button over Element

  41. onwheel ↔ Mouse Event Signal fire when user roll mouse wheel over Element

  42. ondragend ↔ Drag Event Signal fire when user ends action of drag Element

  43. ondragenter ↔ Drag Event Signal fire when user drag Element enters drop target

  44. ondragleave ↔ Drag Event Signal fire when user drag Element leaves drop target

  45. ondragover ↔ Drag Event Signal fire while user drag Element over drop target

  46. ondragstart ↔ Drag Event Signal fire when user start to drag Element

  47. ondrag ↔ Drag Event Signal fire when user drag Element

  48. ondrop ↔ Drag Event Signal fire when user drop Element at drop target

  49. Universal Selector ↔ * Special Type Selector to match every Element

  50. ID Selector ↔ #myID Selector to match single unique Element

  51. :active ↔ Pseudo-Class to match Element activate by user

  52. :hover ↔ Pseudo-Class to match Element when user pointer over Element

  53. :focus ↔ Pseudo-Class to match when Element has focus

  54. :focus-visible ↔ Pseudo-Class to match when Element has focus & apply (default) focus-ring to highlight element

  55. .previousElementSibling ↔ to select previous direct Element Sibling

  56. .nextElementSibling ↔ to select next direct Element Sibling

  57. .parentElement ↔ to select direct Parent Element

  58. .lastElementChild ↔ to select last Element Child

  59. .firstElementChild ↔ to select first Element Child

  60. DOM Traversal ↔ (process) to walk through DOM API ; to select Element Node relative to each other

  61. onfocus ↔ Form Event Signal fire when Element gets focus

  62. oninvalid ↔ Form Event Signal fire when Element invalid

  63. onblur ↔ Form Event Signal fire when Element lost focus

  64. onfocusin ↔ Form Event Signal fire when Element about to gain focus

  65. onfocusout ↔ Form Event Signal fire when Element about to lose focus

  66. Event Delegation ↔ (Design Pattern) to attach Event Listener to common parent to utilize Bubbling Phase to apply Event to multiple Element

  67. Capturing Phase ↔ Event propagates down, from Document Root to target Element, pass through every Parent Element

  68. Bubbling Phase ↔ Event propagate back up to Document Root, pass through Parent Element

  69. .textContent ↔ to return/set text content of Element (+ Descendant)

  70. .parentElement ↔ to return Parent Element

  71. Child Selector ↔ \> Selector for direct Child Element

  72. Descendent Selector ↔ Selector for Descendant Element (rel to other Element)

  73. oncopy ↔ Clipboard Event Signal fired when user copy Element content

  74. oncut ↔ Clipboard Event Signal fired when user cut Element content

  75. onpaste ↔ Clipboard Event Signal fired when user paste Element content

  76. onchange ↔ Form Event Signal fire when content changes in <input\> Element

  77. oninput ↔ Form Event Signal fire when user input to Element

  78. elementInViewport() ↔ utility to check IF HTMLElement inside Viewport

  79. React.Fragment ↔ empty React placeholder container w/o "physical" Element add to final HTML

  80. Layout Shift ↔ when Element in Viewport changes position - any jitter between frames - indicate visual instability, usually unintentional - measure by CLS