enigmare/v2-crawler
1904
1{"id":"doc-acronym_html_acronym_or_abbreviation_element_htm-7f741008","source":"documentation","title":"<acronym> HTML acronym or abbreviation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/acronym","text":"Example:\n```text\n<p>\n The <acronym title=\"World Wide Web\">WWW</acronym> is only a component of the\n Internet.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.511Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":34}}2{"id":"doc-area_html_image_map_area_element_html_mdn-976636c1","source":"documentation","title":"<area> HTML image map area element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/area","text":"Example:\n```text\n<map name=\"infographic\">\n <area\n shape=\"poly\"\n coords=\"129,0,260,95,129,138\"\n href=\"https://developer.mozilla.org/docs/Web/HTTP\"\n alt=\"HTTP\" />\n <area\n shape=\"poly\"\n coords=\"260,96,209,249,130,138\"\n href=\"https://developer.mozilla.org/docs/Web/HTML\"\n alt=\"HTML\" />\n <area\n shape=\"poly\"\n coords=\"209,249,49,249,130,139\"\n href=\"https://developer.mozilla.org/docs/Web/JavaScript\"\n alt=\"JavaScript\" />\n <area\n shape=\"poly\"\n coords=\"48,249,0,96,129,138\"\n href=\"https://developer.mozilla.org/docs/Web/API\"\n alt=\"Web APIs\" />\n <area\n shape=\"poly\"\n coords=\"0,95,128,0,128,137\"\n href=\"https://developer.mozilla.org/docs/Web/CSS\"\n alt=\"CSS\" />\n</map>\n<img\n usemap=\"#infographic\"\n src=\"/shared-assets/images/examples/mdn-info.png\"\n alt=\"MDN infographic\" />\n```\n\nExample:\n```text\nimg {\n display: block;\n margin: 0 auto;\n width: 260px;\n height: 260px;\n}\n```\n\nExample:\n```text\n<map name=\"primary\">\n <area\n shape=\"circle\"\n coords=\"75,75,75\"\n href=\"left.html\"\n alt=\"Click to go Left\" />\n <area\n shape=\"circle\"\n coords=\"275,75,75\"\n href=\"right.html\"\n alt=\"Click to go Right\" />\n</map>\n<img\n usemap=\"#primary\"\n src=\"https://dummyimage.com/350x150\"\n alt=\"350 x 150 pic\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.512Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":66,"estimatedTokens":323}}3{"id":"doc-address_html_contact_address_element_html_mdn-80a5a075","source":"documentation","title":"<address> HTML contact address element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address","text":"Example:\n```text\n<p>Contact the author of this page:</p>\n\n<address>\n <a href=\"mailto:jim@example.com\">jim@example.com</a><br />\n <a href=\"tel:+14155550132\">+1 (415) 555โ0132</a>\n</address>\n```\n\nExample:\n```text\na[href^=\"mailto\"]::before {\n content: \"๐ง \";\n}\n\na[href^=\"tel\"]::before {\n content: \"๐ \";\n}\n```\n\nExample:\n```text\n<address>\n You can contact author at\n <a href=\"http://www.example.com/contact\">www.example.com</a>.<br />\n If you see any bugs, please\n <a href=\"mailto:webmaster@example.com\">contact webmaster</a>.<br />\n You may also want to visit us:<br />\n Mozilla Foundation<br />\n 331 E Evelyn Ave<br />\n Mountain View, CA 94041<br />\n USA\n</address>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.513Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":37,"estimatedTokens":174}}4{"id":"doc-abbr_html_abbreviation_element_html_mdn-efdf6a83","source":"documentation","title":"<abbr> HTML abbreviation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr","text":"Example:\n```text\n<p>\n You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your\n <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can\n keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content\n layer separate. This is called \"separation of concerns.\"\n</p>\n```\n\nExample:\n```text\nabbr {\n font-style: italic;\n color: chocolate;\n}\n```\n\nExample:\n```text\n<p>\n JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight\n data-interchange format.\n</p>\n```\n\nExample:\n```text\n<p>Using <abbr>HTML</abbr> is fun and easy!</p>\n```\n\nExample:\n```text\n<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>\n```\n\nExample:\n```text\nabbr {\n font-variant: all-small-caps;\n}\n```\n\nExample:\n```text\n<p>Ashok's joke made me <abbr title=\"Laugh Out Loud\">LOL</abbr> big time.</p>\n```\n\nExample:\n```text\n<p>\n <dfn id=\"html\"><abbr title=\"HyperText Markup Language\">HTML</abbr> </dfn> is a\n markup language used to create the semantics and structure of a web page.\n</p>\n\n<p>\n A <dfn id=\"spec\">Specification</dfn> (<abbr>spec</abbr>) is a document that\n outlines in detail how a technology or API is intended to function and how it\n is accessed.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.514Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":63,"estimatedTokens":304}}5{"id":"doc-rel_html_attribute_html_mdn-aa7d9128","source":"documentation","title":"rel HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel","text":"Example:\n```text\n<!-- a persistent style sheet -->\n<link rel=\"stylesheet\" href=\"default.css\" />\n<!-- alternate style sheets -->\n<link\n rel=\"alternate stylesheet\"\n href=\"highcontrast.css\"\n title=\"High contrast\" />\n```\n\nExample:\n```text\n<link\n rel=\"alternate\"\n type=\"application/atom+xml\"\n href=\"posts.xml\"\n title=\"Blog\" />\n```\n\nExample:\n```text\n<link\n rel=\"alternate\"\n href=\"/fr/html/print\"\n hreflang=\"fr\"\n type=\"text/html\"\n media=\"print\"\n title=\"French HTML (for printing)\" />\n<link\n rel=\"alternate\"\n href=\"/fr/pdf\"\n hreflang=\"fr\"\n type=\"application/pdf\"\n title=\"French PDF\" />\n```\n\nExample:\n```text\n<link rel=\"icon\" href=\"favicon.ico\" />\n```\n\nExample:\n```text\n<link rel=\"license\" href=\"#license\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.515Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":48,"estimatedTokens":184}}6{"id":"doc-a_html_anchor_element_html_mdn-805f577a","source":"documentation","title":"<a> HTML anchor element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a","text":"Example:\n```text\n<p>You can reach Michael at:</p>\n\n<ul>\n <li><a href=\"https://example.com\">Website</a></li>\n <li><a href=\"mailto:m.bluth@example.com\">Email</a></li>\n <li><a href=\"tel:+123456789\">Phone</a></li>\n</ul>\n```\n\nExample:\n```text\nli {\n margin-bottom: 0.5rem;\n}\n```\n\nExample:\n```text\nattributionsrc=\"https://a.example/register-source\nhttps://b.example/register-source\"\n```\n\nExample:\n```text\n<p>Learn more about our products <a href=\"/products\">here</a>.</p>\n```\n\nExample:\n```text\n<p>Learn more <a href=\"/products\">about our products</a>.</p>\n```\n\nExample:\n```text\n<p>\n <a href=\"https://www.wikipedia.org/\" target=\"_blank\">\n Wikipedia\n <img src=\"new-tab.svg\" width=\"14\" alt=\"(Opens in new tab)\" />\n </a>\n <br />\n <a href=\"2017-annual-report.ppt\">\n 2017 annual report\n <img src=\"powerpoint.svg\" width=\"14\" alt=\"(PowerPoint file)\" />\n </a>\n</p>\n<p>\n <a href=\"https://www.wikipedia.org/\" target=\"_blank\">\n Wikipedia\n <img src=\"missing-icon.svg\" width=\"14\" alt=\"(Opens in new tab)\" />\n </a>\n <br />\n <a href=\"2017-annual-report.ppt\">\n 2017 annual report\n <img src=\"missing-icon.svg\" width=\"14\" alt=\"(PowerPoint file)\" />\n </a>\n</p>\n```\n\nExample:\n```text\n<body>\n <a href=\"#content\" class=\"skip-link\">Skip to main content</a>\n\n <header>โฆ</header>\n\n <!-- The skip link jumps to here -->\n <main id=\"content\"></main>\n</body>\n```\n\nExample:\n```text\n.skip-link {\n position: absolute;\n top: -3em;\n background: white;\n}\n.skip-link:focus {\n top: 0;\n}\n```\n\nExample:\n```text\na {\n display: block;\n margin-bottom: 0.5em;\n}\n```\n\nExample:\n```text\n<!-- <a> element links to the section below -->\n<p><a href=\"#Section_further_down\">Jump to the heading below</a></p>\n\n<!-- Heading to link to -->\n<h2 id=\"Section_further_down\">Section further down</h2>\n```\n\nExample:\n```text\n<p>\n Paint by holding down the mouse button and moving it.\n <a href=\"\" download=\"my_painting.png\">Download my painting</a>\n</p>\n\n<canvas width=\"300\" height=\"300\"></canvas>\n```\n\nExample:\n```text\nhtml {\n font-family: sans-serif;\n}\ncanvas {\n background: white;\n border: 1px dashed;\n}\na {\n display: inline-block;\n background: #6699cc;\n color: white;\n padding: 5px 10px;\n}\n```\n\nExample:\n```javascript\nconst canvas = document.querySelector(\"canvas\");\nconst c = canvas.getContext(\"2d\");\nc.fillStyle = \"hotpink\";\nlet isDrawing;\n\nfunction draw(x, y) {\n if (isDrawing) {\n c.beginPath();\n c.arc(x, y, 10, 0, Math.PI * 2);\n c.closePath();\n c.fill();\n }\n}\n\ncanvas.addEventListener(\"mousemove\", (event) =>\n draw(event.offsetX, event.offsetY),\n);\ncanvas.addEventListener(\"mousedown\", () => (isDrawing = true));\ncanvas.addEventListener(\"mouseup\", () => (isDrawing = false));\n\ndocument\n .querySelector(\"a\")\n .addEventListener(\n \"click\",\n (event) => (event.target.href = canvas.toDataURL()),\n );\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.516Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":159,"estimatedTokens":708}}7{"id":"doc-meta_name_html_attribute_html_mdn-ed92cc57","source":"documentation","title":"<meta name> HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name","text":"Example:\n```text\n<meta\n name=\"description\"\n content=\"The HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements.\" />\n```\n\nExample:\n```text\n<meta name=\"application-name\" content=\"Weather Wizard\" lang=\"en\" />\n<meta name=\"application-name\" content=\"Mago del Clima\" lang=\"es\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.516Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":14,"estimatedTokens":89}}8{"id":"doc-br_html_line_break_element_html_mdn-e6e5a94c","source":"documentation","title":"<br> HTML line break element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/br","text":"Example:\n```text\n<p>\n O'er all the hilltops<br />\n Is quiet now,<br />\n In all the treetops<br />\n Hearest thou<br />\n Hardly a breath;<br />\n The birds are asleep in the trees:<br />\n Wait, soon like these<br />\n Thou too shalt rest.\n</p>\n```\n\nExample:\n```text\np {\n font-size: 1rem;\n font-family: sans-serif;\n margin: 20px;\n}\n```\n\nExample:\n```text\nMozilla<br />\n331 E. Evelyn Avenue<br />\nMountain View, CA<br />\n94041<br />\nUSA<br />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.517Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":33,"estimatedTokens":116}}9{"id":"doc-big_html_bigger_text_element_html_mdn-77cb5749","source":"documentation","title":"<big> HTML bigger text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/big","text":"Example:\n```text\n<p>\n This is the first sentence.\n <big>This whole sentence is in bigger letters.</big>\n</p>\n```\n\nExample:\n```text\n.bigger {\n font-size: larger;\n}\n```\n\nExample:\n```text\n<p>\n This is the first sentence.\n <span class=\"bigger\">This whole sentence is in bigger letters.</span>\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.517Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":24,"estimatedTokens":79}}10{"id":"doc-blockquote_html_block_quotation_element_html_mdn-5dc4c8ae","source":"documentation","title":"<blockquote> HTML block quotation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote","text":"Example:\n```text\ndiv:has(> blockquote) {\n background-color: #ededed;\n margin: 10px auto;\n padding: 15px;\n border-radius: 5px;\n}\n\nblockquote p::before {\n content: \"\\201C\";\n}\n\nblockquote p::after {\n content: \"\\201D\";\n}\n\nblockquote + p {\n text-align: right;\n}\n```\n\nExample:\n```text\n<blockquote cite=\"https://datatracker.ietf.org/doc/html/rfc1149\">\n <p>\n Avian carriers can provide high delay, low throughput, and low altitude\n service. The connection topology is limited to a single point-to-point path\n for each carrier, used with standard carriers, but many carriers can be used\n without significant interference with each other, outside early spring. This\n is because of the 3D ether space available to the carriers, in contrast to\n the 1D ether used by IEEE802.3. The carriers have an intrinsic collision\n avoidance system, which increases availability.\n </p>\n</blockquote>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.518Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":38,"estimatedTokens":231}}11{"id":"doc-center_html_centered_text_element_html_mdn-b1d5cca9","source":"documentation","title":"<center> HTML centered text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/center","text":"Example:\n```text\n<center>\n This text will be centered.\n <p>So will this paragraph.</p>\n</center>\n```\n\nExample:\n```text\n<div class=\"center\">\n This text will be centered.\n <p>So will this paragraph.</p>\n</div>\n```\n\nExample:\n```text\n.center {\n text-align: center;\n}\n```\n\nExample:\n```text\n<p class=\"center\">\n This line will be centered.<br />\n And so will this line.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.519Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":32,"estimatedTokens":98}}12{"id":"doc-base_html_document_base_url_element_html_mdn-64dd2ff1","source":"documentation","title":"<base> HTML document base URL element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/base","text":"Example:\n```text\n<meta property=\"og:image\" content=\"https://example.com/thumbnail.jpg\" />\n```\n\nExample:\n```text\n<base href=\"https://www.example.com/\" />\n<base target=\"_blank\" />\n<base target=\"_top\" href=\"https://example.com/\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.519Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":62}}13{"id":"doc-bdo_html_bidirectional_text_override_element_htm-f51d5448","source":"documentation","title":"<bdo> HTML bidirectional text override element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdo","text":"Example:\n```text\n<h1>Famous seaside songs</h1>\n\n<p>The English song \"Oh I do like to be beside the seaside\"</p>\n\n<p>\n Looks like this in Hebrew:\n <span dir=\"rtl\">ืื, ืื ื ืืืื ืืืืืช ืืื ืืืฃ ืืื</span>\n</p>\n\n<p>\n In the computer's memory, this is stored as\n <bdo dir=\"ltr\">ืื, ืื ื ืืืื ืืืืืช ืืื ืืืฃ ืืื</bdo>\n</p>\n```\n\nExample:\n```text\nhtml {\n font-family: sans-serif;\n}\n\nbdo {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\n<!-- Switch text direction -->\n<p>This text will go left to right.</p>\n<p><bdo dir=\"rtl\">This text will go right to left.</bdo></p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.519Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":36,"estimatedTokens":146}}14{"id":"doc-button_html_button_element_html_mdn-c7bfa13d","source":"documentation","title":"<button> HTML button element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button","text":"Example:\n```text\n<button class=\"favorite styled\" type=\"button\">Add to favorites</button>\n```\n\nExample:\n```text\n.styled {\n border: 0;\n line-height: 2.5;\n padding: 0 20px;\n font-size: 1rem;\n text-align: center;\n color: white;\n text-shadow: 1px 1px 1px black;\n border-radius: 10px;\n background-color: tomato;\n background-image: linear-gradient(\n to top left,\n rgb(0 0 0 / 0.2),\n rgb(0 0 0 / 0.2) 30%,\n transparent\n );\n box-shadow:\n inset 2px 2px 3px rgb(255 255 255 / 0.6),\n inset -2px -2px 3px rgb(0 0 0 / 0.6);\n}\n\n.styled:hover {\n background-color: red;\n}\n\n.styled:active {\n box-shadow:\n inset -2px -2px 3px rgb(255 255 255 / 0.6),\n inset 2px 2px 3px rgb(0 0 0 / 0.6);\n}\n```\n\nExample:\n```text\n<button type=\"button\" commandfor=\"mydialog\" command=\"show-modal\">\n Open Dialog\n</button>\n<dialog id=\"mydialog\">\n <div class=\"wrapper\">\n <form>\n <fieldset>\n <legend>Allow this dialog to close when requested?</legend>\n <div>\n <input type=\"radio\" id=\"no\" name=\"close\" value=\"no\" checked />\n <label for=\"no\">No</label>\n </div>\n <div>\n <input type=\"radio\" id=\"yes\" name=\"close\" value=\"yes\" />\n <label for=\"yes\">Yes</label>\n </div>\n </fieldset>\n </form>\n <button commandfor=\"mydialog\" command=\"request-close\">\n Request to Close\n </button>\n <p class=\"warning\" hidden>You must choose \"Yes\" to close this dialog.</p>\n </div>\n</dialog>\n```\n\nExample:\n```text\n.warning {\n color: tomato;\n}\n```\n\nExample:\n```javascript\nconst dialog = document.querySelector(\"dialog\");\nconst radio = document.querySelector(\"form\").elements[\"close\"];\nconst warning = document.querySelector(\".warning\");\n\ndialog.addEventListener(\"cancel\", (e) => {\n if (!e.cancelable) return;\n if (radio.value === \"no\") {\n warning.hidden = false;\n e.preventDefault();\n } else {\n warning.hidden = true;\n }\n});\n```\n\nExample:\n```text\n<button commandfor=\"confirm-dialog\" command=\"show-modal\">Delete Record</button>\n<dialog id=\"confirm-dialog\">\n <header>\n <h1>Delete Record?</h1>\n </header>\n <p>Are you sure? This action cannot be undone</p>\n <footer>\n <button commandfor=\"confirm-dialog\" command=\"close\" value=\"cancel\">\n Cancel\n </button>\n <button commandfor=\"confirm-dialog\" command=\"close\" value=\"delete\">\n Delete\n </button>\n </footer>\n</dialog>\n```\n\nExample:\n```text\n<pre id=\"log\"></pre>\n```\n\nExample:\n```text\n#log {\n height: 20px;\n}\n```\n\nExample:\n```javascript\nconst logElement = document.querySelector(\"#log\");\nfunction log(text) {\n logElement.innerText = text;\n}\n```\n\nExample:\n```javascript\nconst dialog = document.getElementById(\"confirm-dialog\");\n\ndialog.addEventListener(\"close\", () => {\n switch (dialog.returnValue) {\n case \"cancel\":\n log(\"Cancel was clicked\");\n break;\n case \"delete\":\n log(\"Delete was clicked\");\n break;\n default:\n log(\"Closed with value:\", dialog.returnValue);\n }\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.521Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":149,"estimatedTokens":744}}15{"id":"doc-b_html_bring_attention_to_element_html_mdn-fcd6a371","source":"documentation","title":"<b> HTML bring attention to element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b","text":"Example:\n```text\n<p>\n The two most popular science courses offered by the school are\n <b class=\"term\">chemistry</b> (the study of chemicals and the composition of\n substances) and <b class=\"term\">physics</b> (the study of the nature and\n properties of matter and energy).\n</p>\n```\n\nExample:\n```text\nb {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\n<p>\n This article describes several <b class=\"keywords\">text-level</b> elements. It\n explains their usage in an <b class=\"keywords\">HTML</b> document.\n</p>\nKeywords are displayed with the default style of the\n<b>element, likely in bold.</b>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.521Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":28,"estimatedTokens":155}}16{"id":"doc-caption_html_table_caption_element_html_mdn-6e4db219","source":"documentation","title":"<caption> HTML table caption element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption","text":"Example:\n```text\n<table>\n <caption>\n He-Man and Skeletor facts\n </caption>\n <tbody>\n <tr>\n <td></td>\n <th scope=\"col\" class=\"heman\">He-Man</th>\n <th scope=\"col\" class=\"skeletor\">Skeletor</th>\n </tr>\n <tr>\n <th scope=\"row\">Role</th>\n <td>Hero</td>\n <td>Villain</td>\n </tr>\n <tr>\n <th scope=\"row\">Weapon</th>\n <td>Power Sword</td>\n <td>Havoc Staff</td>\n </tr>\n <tr>\n <th scope=\"row\">Dark secret</th>\n <td>Expert florist</td>\n <td>Cries at romcoms</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ncaption {\n caption-side: bottom;\n padding: 10px;\n font-weight: bold;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth {\n background-color: rgb(230 230 230);\n}\n\ntd {\n text-align: center;\n}\n\ntr:nth-child(even) td {\n background-color: rgb(250 250 250);\n}\n\ntr:nth-child(odd) td {\n background-color: rgb(240 240 240);\n}\n\n.heman {\n font:\n 1.4rem \"molot\",\n sans-serif;\n text-shadow:\n 1px 1px 1px white,\n 2px 2px 1px black;\n}\n\n.skeletor {\n font:\n 1.7rem \"rapscallion\",\n fantasy;\n letter-spacing: 3px;\n text-shadow:\n 1px 1px 0 white,\n 0 0 9px black;\n}\n```\n\nExample:\n```text\n<table>\n <caption>\n User login email addresses\n </caption>\n <thead>\n <tr>\n <th>Login</th>\n <th>Email</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>user1</td>\n <td>user1@example.com</td>\n </tr>\n <tr>\n <td>user2</td>\n <td>user2@example.com</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ncaption {\n caption-side: top;\n text-align: left;\n padding-bottom: 10px;\n font-weight: bold;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth {\n background-color: rgb(230 230 230);\n}\n\ntd {\n text-align: center;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.522Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":150,"estimatedTokens":536}}17{"id":"doc-code_html_inline_code_element_html_mdn-cbde28d9","source":"documentation","title":"<code> HTML inline code element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code","text":"Example:\n```text\n<p>\n The <code>push()</code> method adds one or more elements to the end of an\n array and returns the new length of the array.\n</p>\n```\n\nExample:\n```text\ncode {\n background-color: #eeeeee;\n border-radius: 3px;\n font-family: \"Courier New\", monospace;\n padding: 0 3px;\n}\n```\n\nExample:\n```text\n<p>\n The function <code>selectAll()</code> highlights all the text in the input\n field so the user can, for example, copy or delete the text.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.522Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":27,"estimatedTokens":120}}18{"id":"doc-dd_html_description_details_element_html_mdn-60fcb0d8","source":"documentation","title":"<dd> HTML description details element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd","text":"Example:\n```text\n<p>Cryptids of Cornwall:</p>\n\n<dl>\n <dt>Beast of Bodmin</dt>\n <dd>A large feline inhabiting Bodmin Moor.</dd>\n\n <dt>Morgawr</dt>\n <dd>A sea serpent.</dd>\n\n <dt>Owlman</dt>\n <dd>A giant owl-like creature.</dd>\n</dl>\n```\n\nExample:\n```text\np,\ndt {\n font-weight: bold;\n}\n\ndl,\ndd {\n font-size: 0.9rem;\n}\n\ndd {\n margin-bottom: 1em;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.523Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":93}}19{"id":"doc-bdi_html_bidirectional_isolate_element_html_mdn-1fc15038","source":"documentation","title":"<bdi> HTML bidirectional isolate element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdi","text":"Example:\n```text\n<h1>World wrestling championships</h1>\n\n<ul>\n <li><bdi class=\"name\">Evil Steven</bdi>: 1st place</li>\n <li><bdi class=\"name\">Franรงois fatale</bdi>: 2nd place</li>\n <li><span class=\"name\">ุณู
ุง</span>: 3rd place</li>\n <li><bdi class=\"name\">ุงูุฑุฌู ุงูููู ุฅูุงู</bdi>: 4th place</li>\n <li><span class=\"name\" dir=\"auto\">ุณู
ุง</span>: 5th place</li>\n</ul>\n```\n\nExample:\n```text\nhtml {\n font-family: sans-serif;\n}\n\nbdi {\n /* Add your styles here */\n}\n\n.name {\n color: red;\n}\n```\n\nExample:\n```text\nEMBEDDED-TEXT - 1st place\n```\n\nExample:\n```text\n1 - EMBEDDED-TEXTst place\n```\n\nExample:\n```text\n<ul>\n <li><span class=\"name\">Henrietta Boffin</span> - 1st place</li>\n <li><span class=\"name\">Jerry Cruncher</span> - 2nd place</li>\n</ul>\n```\n\nExample:\n```text\nbody {\n border: 1px solid #3f87a6;\n max-width: calc(100% - 40px - 6px);\n padding: 20px;\n width: calc(100% - 40px - 6px);\n border-width: 1px 1px 1px 5px;\n}\n```\n\nExample:\n```text\n<ul>\n <li><span class=\"name\">ุงููุฃูุนูุดูู</span> - 1st place</li>\n <li><span class=\"name\">Jerry Cruncher</span> - 2nd place</li>\n</ul>\n```\n\nExample:\n```text\n<ul>\n <li><bdi class=\"name\">ุงููุฃูุนูุดูู</bdi> - 1st place</li>\n <li><bdi class=\"name\">Jerry Cruncher</bdi> - 2nd place</li>\n</ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.523Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":74,"estimatedTokens":314}}20{"id":"doc-dfn_html_definition_element_html_mdn-73c74c8e","source":"documentation","title":"<dfn> HTML definition element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dfn","text":"Example:\n```text\n<p>\n A <dfn id=\"def-validator\">validator</dfn> is a program that checks for syntax\n errors in code or documents.\n</p>\n```\n\nExample:\n```text\ndfn {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\n<p>\n The <strong>HTML Definition element (<dfn><dfn></dfn>)</strong> is used\n to indicate the term being defined within the context of a definition phrase\n or sentence.\n</p>\n```\n\nExample:\n```text\n<p>\n The\n <strong>HTML Definition element (<dfn id=\"definition-dfn\"><dfn></dfn>)</strong>\n is used to indicate the term being defined within the context of a definition\n phrase or sentence.\n</p>\n\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine\n voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.\n Scrupulum, inquam, abeunti;\n</p>\n\n<p>\n Because of all of that, we decided to use the\n <code><a href=\"#definition-dfn\"><dfn></a></code> element for this\n project.\n</p>\n```\n\nExample:\n```text\n<p>\n The <dfn><abbr title=\"Hubble Space Telescope\">HST</abbr></dfn> is among the\n most productive scientific instruments ever constructed. It has been in orbit\n for over 20 years, scanning the sky and returning data and photographs of\n unprecedented quality and detail.\n</p>\n\n<p>\n Indeed, the <abbr title=\"Hubble Space Telescope\">HST</abbr> has arguably done\n more to advance science than any device ever built.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.524Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":62,"estimatedTokens":357}}21{"id":"doc-data_html_data_element_html_mdn-01339732","source":"documentation","title":"<data> HTML data element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data","text":"Example:\n```text\n<p>New Products:</p>\n<ul>\n <li><data value=\"398\">Mini Ketchup</data></li>\n <li><data value=\"399\">Jumbo Ketchup</data></li>\n <li><data value=\"400\">Mega Jumbo Ketchup</data></li>\n</ul>\n```\n\nExample:\n```text\ndata:hover::after {\n content: \" (ID \" attr(value) \")\";\n font-size: 0.7em;\n}\n```\n\nExample:\n```text\n<p>New Products</p>\n<ul>\n <li><data value=\"398\">Mini Ketchup</data></li>\n <li><data value=\"399\">Jumbo Ketchup</data></li>\n <li><data value=\"400\">Mega Jumbo Ketchup</data></li>\n</ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.527Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":29,"estimatedTokens":132}}22{"id":"doc-del_html_deleted_text_element_html_mdn-d96b6c4f","source":"documentation","title":"<del> HTML deleted text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del","text":"Example:\n```text\n<blockquote>\n There is <del>nothing</del> <ins>no code</ins> either good or bad, but\n <del>thinking</del> <ins>running it</ins> makes it so.\n</blockquote>\n```\n\nExample:\n```text\ndel {\n text-decoration: line-through;\n background-color: #ffbbbb;\n color: #555555;\n}\n\nins {\n text-decoration: none;\n background-color: #d4fcbc;\n}\n\nblockquote {\n padding-left: 15px;\n border-left: 3px solid #d7d7db;\n font-size: 1rem;\n}\n```\n\nExample:\n```text\ndel::before,\ndel::after {\n clip-path: inset(100%);\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\ndel::before {\n content: \" [deletion start] \";\n}\n\ndel::after {\n content: \" [deletion end] \";\n}\n```\n\nExample:\n```text\n<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>\n<del><p>This paragraph has been deleted.</p></del>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.527Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":57,"estimatedTokens":228}}23{"id":"doc-cite_html_citation_element_html_mdn-c9180f8d","source":"documentation","title":"<cite> HTML citation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite","text":"Example:\n```text\n<figure>\n <blockquote>\n <p>\n It was a bright cold day in April, and the clocks were striking thirteen.\n </p>\n </blockquote>\n <figcaption>\n First sentence in\n <cite\n ><a href=\"http://www.george-orwell.org/1984/0.html\"\n >Nineteen Eighty-Four</a\n ></cite\n >\n by George Orwell (Part 1, Chapter 1).\n </figcaption>\n</figure>\n```\n\nExample:\n```text\ncite {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\n<p>More information can be found in <cite>[ISO-0000]</cite>.</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.528Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":33,"estimatedTokens":136}}24{"id":"doc-frame_html_frame_element_html_mdn-8f2c98d0","source":"documentation","title":"<frame> HTML frame element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/frame","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <!-- Document metadata goes here -->\n </head>\n <frameset cols=\"400, 500\">\n <frame src=\"https://developer.mozilla.org/en/HTML/Element/iframe\" />\n <frame src=\"https://developer.mozilla.org/en/HTML/Element/frame\" />\n </frameset>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.529Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":15,"estimatedTokens":82}}25{"id":"doc-colgroup_html_table_column_group_element_html_md-cc00c7a2","source":"documentation","title":"<colgroup> HTML table column group element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/colgroup","text":"Example:\n```text\n<table>\n <caption>\n Superheros and sidekicks\n </caption>\n <colgroup>\n <col />\n <col span=\"2\" class=\"batman\" />\n <col span=\"2\" class=\"flash\" />\n </colgroup>\n <thead>\n <tr>\n <td></td>\n <th scope=\"col\">Batman</th>\n <th scope=\"col\">Robin</th>\n <th scope=\"col\">The Flash</th>\n <th scope=\"col\">Kid Flash</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Skill</th>\n <td>Smarts, strong</td>\n <td>Dex, acrobat</td>\n <td>Super speed</td>\n <td>Super speed</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\n.batman {\n background-color: #d7d9f2;\n}\n\n.flash {\n background-color: #ffe8d4;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 6px;\n}\n\ntd {\n text-align: center;\n}\n```\n\nExample:\n```text\n<table>\n <caption>\n Personal weekly activities\n </caption>\n <colgroup span=\"5\" class=\"weekdays\"></colgroup>\n <colgroup span=\"2\" class=\"weekend\"></colgroup>\n <thead>\n <tr>\n <th>Mon</th>\n <th>Tue</th>\n <th>Wed</th>\n <th>Thu</th>\n <th>Fri</th>\n <th>Sat</th>\n <th>Sun</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Clean room</td>\n <td>Football training</td>\n <td>Dance Course</td>\n <td>History Class</td>\n <td>Buy drinks</td>\n <td>Study hour</td>\n <td>Free time</td>\n </tr>\n <tr>\n <td>Yoga</td>\n <td>Chess Club</td>\n <td>Meet friends</td>\n <td>Gymnastics</td>\n <td>Birthday party</td>\n <td>Fishing trip</td>\n <td>Free time</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 6px;\n text-align: center;\n}\n\n.weekdays {\n background-color: #d7d9f2;\n}\n\n.weekend {\n background-color: #ffe8d4;\n}\n```\n\nExample:\n```text\ntable {\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.530Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":146,"estimatedTokens":561}}26{"id":"doc-col_html_table_column_element_html_mdn-415ab717","source":"documentation","title":"<col> HTML table column element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col","text":"Example:\n```text\n<table>\n <caption>\n Superheros and sidekicks\n </caption>\n <colgroup>\n <col />\n <col span=\"2\" class=\"batman\" />\n <col span=\"2\" class=\"flash\" />\n </colgroup>\n <thead>\n <tr>\n <td></td>\n <th scope=\"col\">Batman</th>\n <th scope=\"col\">Robin</th>\n <th scope=\"col\">The Flash</th>\n <th scope=\"col\">Kid Flash</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Skill</th>\n <td>Smarts, strong</td>\n <td>Dex, acrobat</td>\n <td>Super speed</td>\n <td>Super speed</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\n.batman {\n background-color: #d7d9f2;\n}\n\n.flash {\n background-color: #ffe8d4;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 6px;\n}\n\ntd {\n text-align: center;\n}\n```\n\nExample:\n```text\n<table>\n <caption>\n Personal weekly activities\n </caption>\n <colgroup>\n <col />\n <col span=\"5\" class=\"weekdays\" />\n <col span=\"2\" class=\"weekend\" />\n </colgroup>\n <thead>\n <tr>\n <th>Period</th>\n <th>Mon</th>\n <th>Tue</th>\n <th>Wed</th>\n <th>Thu</th>\n <th>Fri</th>\n <th>Sat</th>\n <th>Sun</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>a.m.</th>\n <td>Clean room</td>\n <td>Football training</td>\n <td>Dance Course</td>\n <td>History Class</td>\n <td>Buy drinks</td>\n <td>Study hour</td>\n <td>Free time</td>\n </tr>\n <tr>\n <th>p.m.</th>\n <td>Yoga</td>\n <td>Chess Club</td>\n <td>Meet friends</td>\n <td>Gymnastics</td>\n <td>Birthday party</td>\n <td>Fishing trip</td>\n <td>Free time</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 6px;\n text-align: center;\n}\n\n.weekdays {\n background-color: #d7d9f2;\n}\n\n.weekend {\n background-color: #ffe8d4;\n}\n```\n\nExample:\n```text\ntable {\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.531Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":152,"estimatedTokens":580}}27{"id":"doc-fieldset_html_field_set_element_html_mdn-a5107646","source":"documentation","title":"<fieldset> HTML field set element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset","text":"Example:\n```text\n<form>\n <fieldset>\n <legend>Choose your favorite monster</legend>\n\n <input type=\"radio\" id=\"kraken\" name=\"monster\" value=\"K\" />\n <label for=\"kraken\">Kraken</label><br />\n\n <input type=\"radio\" id=\"sasquatch\" name=\"monster\" value=\"S\" />\n <label for=\"sasquatch\">Sasquatch</label><br />\n\n <input type=\"radio\" id=\"mothman\" name=\"monster\" value=\"M\" />\n <label for=\"mothman\">Mothman</label>\n </fieldset>\n</form>\n```\n\nExample:\n```text\nlegend {\n background-color: black;\n color: white;\n padding: 3px 6px;\n}\n\ninput {\n margin: 0.4rem;\n}\n```\n\nExample:\n```text\n<form action=\"#\">\n <fieldset>\n <legend>Do you agree?</legend>\n <input type=\"checkbox\" id=\"chbx\" name=\"agree\" value=\"Yes!\" />\n <label for=\"chbx\">I agree</label>\n </fieldset>\n</form>\n```\n\nExample:\n```text\n<form action=\"#\">\n <fieldset disabled>\n <legend>Disabled login fieldset</legend>\n <div>\n <label for=\"name\">Name: </label>\n <input type=\"text\" id=\"name\" value=\"Chris\" />\n </div>\n <div>\n <label for=\"pwd\">Archetype: </label>\n <input type=\"password\" id=\"pwd\" value=\"Wookie\" />\n </div>\n </fieldset>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.531Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":60,"estimatedTokens":291}}28{"id":"doc-fencedframe_html_fenced_frame_element_html_mdn-d9521415","source":"documentation","title":"<fencedframe> HTML fenced frame element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fencedframe","text":"Example:\n```text\n<fencedframe\n title=\"Advertisement for new Log. From Blammo!\"\n width=\"640\"\n height=\"320\"></fencedframe>\n```\n\nExample:\n```text\n<fencedframe width=\"640\" height=\"320\"></fencedframe>\n```\n\nExample:\n```javascript\nconst frameConfig = await navigator.runAdAuction({\n // โฆ auction configuration\n resolveToConfig: true,\n});\n\nconst frame = document.querySelector(\"fencedframe\");\nframe.config = frameConfig;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.532Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":25,"estimatedTokens":109}}29{"id":"doc-em_html_emphasis_element_html_mdn-a81e0621","source":"documentation","title":"<em> HTML emphasis element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em","text":"Example:\n```text\n<p>Get out of bed <em>now</em>!</p>\n\n<p>We <em>had</em> to do something about it.</p>\n\n<p>This is <em>not</em> a drill!</p>\n```\n\nExample:\n```text\nem {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\n<p>Just <em>do</em> it already!</p>\n<p>We <em>had</em> to do something about it.</p>\n```\n\nExample:\n```text\n<p>The word <i>the</i> is an article.</p>\n<p>The <i>Queen Mary</i> sailed last night.</p>\n```\n\nExample:\n```text\n<p>\n Ice cream is made with milk, sweetener, and cream. Frozen custard, on the\n other hand, is made of milk, cream, sweetener, and <em>egg yolks</em>.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.532Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":37,"estimatedTokens":154}}30{"id":"doc-figure_html_figure_with_optional_caption_element-7d52bc57","source":"documentation","title":"<figure> HTML figure with optional caption element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure","text":"Example:\n```text\n<figure>\n <img\n src=\"/shared-assets/images/examples/elephant.jpg\"\n alt=\"Elephant at sunset\" />\n <figcaption>An elephant at sunset</figcaption>\n</figure>\n```\n\nExample:\n```text\nfigure {\n border: thin silver solid;\n display: flex;\n flex-flow: column;\n padding: 5px;\n max-width: 220px;\n margin: auto;\n}\n\nimg {\n max-width: 220px;\n max-height: 150px;\n}\n\nfigcaption {\n background-color: #222222;\n color: white;\n font: italic smaller sans-serif;\n padding: 3px;\n text-align: center;\n}\n```\n\nExample:\n```text\n<!-- Just an image -->\n<figure>\n <img src=\"favicon-192x192.png\" alt=\"The beautiful MDN logo.\" />\n</figure>\n\n<!-- Image with a caption -->\n<figure>\n <img src=\"favicon-192x192.png\" alt=\"The beautiful MDN logo.\" />\n <figcaption>MDN Logo</figcaption>\n</figure>\n```\n\nExample:\n```typescript\n<figure>\n <figcaption>Get browser details using <code>navigator</code>.</figcaption>\n <pre>\nfunction NavigatorExample() {\n let txt = `Browser CodeName: ${navigator.appCodeName};\\n`;\n txt += `Browser Name: ${navigator.appName};\\n`;\n txt += `Browser Version: ${navigator.appVersion};\\n`;\n txt += `Cookies Enabled: ${navigator.cookieEnabled};\\n`;\n txt += `Platform: ${navigator.platform};\\n`;\n txt += `User-agent header: ${navigator.userAgent};`;\n console.log(\"NavigatorExample\", txt);\n}\n </pre>\n</figure>\n```\n\nExample:\n```text\n<figure>\n <figcaption><b>Edsger Dijkstra:</b></figcaption>\n <blockquote>\n If debugging is the process of removing software bugs, then programming must\n be the process of putting them in.\n </blockquote>\n</figure>\n```\n\nExample:\n```text\n<figure>\n <p>\n Bid me discourse, I will enchant thine ear,<br />\n Or like a fairy trip upon the green,<br />\n Or, like a nymph, with long dishevelled hair,<br />\n Dance on the sands, and yet no footing seen:<br />\n Love is a spirit all compact of fire,<br />\n Not gross to sink, but light, and will aspire.<br />\n </p>\n <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>\n</figure>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.533Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":94,"estimatedTokens":513}}31{"id":"doc-dt_html_description_term_element_html_mdn-cb2434e3","source":"documentation","title":"<dt> HTML description term element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt","text":"Example:\n```text\n<p>Please use the following paint colors for the new house:</p>\n\n<dl>\n <dt>Denim (semigloss finish)</dt>\n <dd>Ceiling</dd>\n\n <dt>Denim (eggshell finish)</dt>\n <dt>Evening Sky (eggshell finish)</dt>\n <dd>Layered on the walls</dd>\n</dl>\n```\n\nExample:\n```text\np,\ndl {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ndl > dt {\n font-weight: normal;\n font-style: oblique;\n}\n\ndd {\n margin-bottom: 1rem;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.533Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":111}}32{"id":"doc-figcaption_html_figure_caption_element_html_mdn-f2365ed4","source":"documentation","title":"<figcaption> HTML figure caption element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption","text":"Example:\n```text\n<figure>\n <img\n src=\"/shared-assets/images/examples/elephant.jpg\"\n alt=\"Elephant at sunset\" />\n <figcaption>An elephant at sunset</figcaption>\n</figure>\n```\n\nExample:\n```text\nfigure {\n border: thin silver solid;\n display: flex;\n flex-flow: column;\n padding: 5px;\n max-width: 220px;\n margin: auto;\n}\n\nimg {\n max-width: 220px;\n max-height: 150px;\n}\n\nfigcaption {\n background-color: #222222;\n color: white;\n font: italic smaller sans-serif;\n padding: 3px;\n text-align: center;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.534Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":36,"estimatedTokens":133}}33{"id":"doc-form_html_form_element_html_mdn-17d1596e","source":"documentation","title":"<form> HTML form element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form","text":"Example:\n```text\n<form action=\"\" method=\"get\" class=\"form-example\">\n <div class=\"form-example\">\n <label for=\"name\">Enter your name: </label>\n <input type=\"text\" name=\"name\" id=\"name\" required />\n </div>\n <div class=\"form-example\">\n <label for=\"email\">Enter your email: </label>\n <input type=\"email\" name=\"email\" id=\"email\" required />\n </div>\n <div class=\"form-example\">\n <input type=\"submit\" value=\"Subscribe!\" />\n </div>\n</form>\n```\n\nExample:\n```text\nform.form-example {\n display: table;\n}\n\ndiv.form-example {\n display: table-row;\n}\n\nlabel,\ninput {\n display: table-cell;\n margin-bottom: 10px;\n}\n\nlabel {\n padding-right: 10px;\n}\n```\n\nExample:\n```text\n<!-- Form which will send a GET request to the current URL -->\n<form method=\"get\">\n <label>\n Name:\n <input name=\"submitted-name\" autocomplete=\"name\" />\n </label>\n <button>Save</button>\n</form>\n\n<!-- Form which will send a POST request to the current URL -->\n<form method=\"post\">\n <label>\n Name:\n <input name=\"submitted-name\" autocomplete=\"name\" />\n </label>\n <button>Save</button>\n</form>\n\n<!-- Form with fieldset, legend, and label -->\n<form method=\"post\">\n <fieldset>\n <legend>Do you agree to the terms?</legend>\n <label><input type=\"radio\" name=\"radio\" value=\"yes\" /> Yes</label>\n <label><input type=\"radio\" name=\"radio\" value=\"no\" /> No</label>\n </fieldset>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.534Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":69,"estimatedTokens":349}}34{"id":"doc-dialog_html_dialog_element_html_mdn-ebdc29af","source":"documentation","title":"<dialog> HTML dialog element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog","text":"Example:\n```text\n<button command=\"show-modal\" commandfor=\"my-dialog\">Open dialog</button>\n\n<dialog id=\"my-dialog\">\n <p>This dialog was opened using an invoker command.</p>\n <button commandfor=\"my-dialog\" command=\"close\">Close</button>\n</dialog>\n```\n\nExample:\n```text\n<button popovertarget=\"my-dialog\">Open dialog</button>\n\n<dialog id=\"my-dialog\" popover>\n <p>This dialog was opened using a popovertargetaction attribute.</p>\n <button popovertarget=\"my-dialog\" popovertargetaction=\"hide\">Close</button>\n</dialog>\n```\n\nExample:\n```text\n<dialog open>\n <p>Greetings, one and all!</p>\n <form method=\"dialog\">\n <button>OK</button>\n </form>\n</dialog>\n```\n\nExample:\n```text\n<dialog>\n <button autofocus>Close</button>\n <p>This modal dialog has a groovy backdrop!</p>\n</dialog>\n<button>Show the dialog</button>\n```\n\nExample:\n```text\n::backdrop {\n background-image: linear-gradient(\n 45deg,\n magenta,\n rebeccapurple,\n dodgerblue,\n green\n );\n opacity: 0.75;\n}\n```\n\nExample:\n```javascript\nconst dialog = document.querySelector(\"dialog\");\nconst showButton = document.querySelector(\"dialog + button\");\nconst closeButton = document.querySelector(\"dialog button\");\n\n// \"Show the dialog\" button opens the dialog modally\nshowButton.addEventListener(\"click\", () => {\n dialog.showModal();\n});\n\n// \"Close\" button closes the dialog\ncloseButton.addEventListener(\"click\", () => {\n dialog.close();\n});\n```\n\nExample:\n```text\n<!-- A modal dialog containing a form -->\n<dialog id=\"favDialog\">\n <form>\n <p>\n <label>\n Favorite animal:\n <select>\n <option value=\"default\">Chooseโฆ</option>\n <option>Brine shrimp</option>\n <option>Red panda</option>\n <option>Spider monkey</option>\n </select>\n </label>\n </p>\n <div>\n <button value=\"cancel\" formmethod=\"dialog\">Cancel</button>\n <button id=\"confirmBtn\" value=\"default\">Confirm</button>\n </div>\n </form>\n</dialog>\n<p>\n <button id=\"showDialog\">Show the dialog</button>\n</p>\n<output></output>\n```\n\nExample:\n```javascript\nconst showButton = document.getElementById(\"showDialog\");\nconst favDialog = document.getElementById(\"favDialog\");\nconst outputBox = document.querySelector(\"output\");\nconst selectEl = favDialog.querySelector(\"select\");\nconst confirmBtn = favDialog.querySelector(\"#confirmBtn\");\n\n// \"Show the dialog\" button opens the <dialog> modally\nshowButton.addEventListener(\"click\", () => {\n favDialog.showModal();\n});\n\n// \"Cancel\" button closes the dialog without submitting because of [formmethod=\"dialog\"], triggering a close event.\nfavDialog.addEventListener(\"close\", (e) => {\n outputBox.value =\n favDialog.returnValue === \"default\"\n ? \"No return value.\"\n : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for \"default\" rather than empty string\n});\n\n// Prevent the \"confirm\" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the \"close\" event.\nconfirmBtn.addEventListener(\"click\", (event) => {\n event.preventDefault(); // We don't want to submit this fake form\n favDialog.close(selectEl.value); // Have to send the select box value here.\n});\n```\n\nExample:\n```text\n<dialog id=\"dialog\">\n <form method=\"dialog\">\n <p>\n <label>\n Favorite animal:\n <input type=\"text\" required />\n </label>\n </p>\n <div>\n <input type=\"submit\" id=\"normal-close\" value=\"Normal close\" />\n <input\n type=\"submit\"\n id=\"novalidate-close\"\n value=\"Novalidate close\"\n formnovalidate />\n <input type=\"submit\" id=\"js-close\" value=\"JS close\" />\n </div>\n </form>\n</dialog>\n<p>\n <button id=\"show-dialog\">Show the dialog</button>\n</p>\n<output></output>\n```\n\nExample:\n```text\n[type=\"submit\"] {\n margin-right: 1rem;\n}\n```\n\nExample:\n```javascript\nconst showBtn = document.getElementById(\"show-dialog\");\nconst dialog = document.getElementById(\"dialog\");\nconst jsCloseBtn = dialog.querySelector(\"#js-close\");\n\nshowBtn.addEventListener(\"click\", () => {\n dialog.showModal();\n});\n\njsCloseBtn.addEventListener(\"click\", (e) => {\n e.preventDefault();\n dialog.close();\n});\n```\n\nExample:\n```text\n<p>Choose a <code><dialog></code> type to show:</p>\n<div id=\"controls\">\n <button id=\"none-btn\"><code>closedby=\"none\"</code></button>\n <button id=\"closerequest-btn\">\n <code>closedby=\"closerequest\"</code>\n </button>\n <button id=\"any-btn\"><code>closedby=\"any\"</code></button>\n</div>\n\n<dialog closedby=\"none\">\n <h2><code>closedby=\"none\"</code></h2>\n <p>\n Only closable using a specific provided mechanism, which in this case is\n pressing the \"Close\" button below.\n </p>\n <button class=\"close\">Close</button>\n</dialog>\n\n<dialog closedby=\"closerequest\">\n <h2><code>closedby=\"closerequest\"</code></h2>\n <p>Closable using the \"Close\" button or the Esc key.</p>\n <button class=\"close\">Close</button>\n</dialog>\n\n<dialog closedby=\"any\">\n <h2><code>closedby=\"any\"</code></h2>\n <p>\n Closable using the \"Close\" button, the Esc key, or by clicking outside the\n dialog. \"Light dismiss\" behavior.\n </p>\n <button class=\"close\">Close</button>\n</dialog>\n```\n\nExample:\n```text\nbody {\n font-family: sans-serif;\n}\n\n#controls {\n display: flex;\n justify-content: space-around;\n}\n\ndialog {\n width: 480px;\n border-radius: 5px;\n border-color: rgb(0 0 0 / 0.3);\n}\n\ndialog h2 {\n margin: 0;\n}\n\ndialog p {\n line-height: 1.4;\n}\n```\n\nExample:\n```javascript\nconst noneBtn = document.getElementById(\"none-btn\");\nconst closerequestBtn = document.getElementById(\"closerequest-btn\");\nconst anyBtn = document.getElementById(\"any-btn\");\n\nconst noneDialog = document.querySelector(\"[closedby='none']\");\nconst closerequestDialog = document.querySelector(\"[closedby='closerequest']\");\nconst anyDialog = document.querySelector(\"[closedby='any']\");\n\nconst closeBtns = document.querySelectorAll(\".close\");\n\nnoneBtn.addEventListener(\"click\", () => {\n noneDialog.showModal();\n});\n\ncloserequestBtn.addEventListener(\"click\", () => {\n closerequestDialog.showModal();\n});\n\nanyBtn.addEventListener(\"click\", () => {\n anyDialog.showModal();\n});\n\ncloseBtns.forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n btn.parentElement.close();\n });\n});\n```\n\nExample:\n```typescript\n<dialog id=\"dialog\">\n Content here\n <button class=\"close\">close</button>\n</dialog>\n\n<button class=\"show\">Show Modal</button>\n```\n\nExample:\n```typescript\n/* Open state of the dialog */\ndialog:open {\n opacity: 1;\n transform: scaleY(1);\n}\n\n/* Closed state of the dialog */\ndialog {\n opacity: 0;\n transform: scaleY(0);\n transition:\n opacity 0.7s ease-out,\n transform 0.7s ease-out,\n overlay 0.7s ease-out allow-discrete,\n display 0.7s ease-out allow-discrete;\n /* Equivalent to\n transition: all 0.7s allow-discrete; */\n}\n\n/* Before open state */\n/* Needs to be after the previous dialog:open rule to take effect,\n as the specificity is the same */\n@starting-style {\n dialog:open {\n opacity: 0;\n transform: scaleY(0);\n }\n}\n\n/* Transition the :backdrop when the dialog modal is promoted to the top layer */\ndialog::backdrop {\n background-color: transparent;\n transition:\n display 0.7s allow-discrete,\n overlay 0.7s allow-discrete,\n background-color 0.7s;\n /* Equivalent to\n transition: all 0.7s allow-discrete; */\n}\n\ndialog:open::backdrop {\n background-color: rgb(0 0 0 / 25%);\n}\n\n/* This starting-style rule cannot be nested inside the above selector\nbecause the nesting selector cannot represent pseudo-elements. */\n\n@starting-style {\n dialog:open::backdrop {\n background-color: transparent;\n }\n}\n```\n\nExample:\n```typescript\nconst dialogElem = document.getElementById(\"dialog\");\nconst showBtn = document.querySelector(\".show\");\nconst closeBtn = document.querySelector(\".close\");\n\nshowBtn.addEventListener(\"click\", () => {\n dialogElem.showModal();\n});\n\ncloseBtn.addEventListener(\"click\", () => {\n dialogElem.close();\n});\n```\n\nExample:\n```text\ndialog {\n animation: fade-out 0.7s ease-out;\n}\n\ndialog:open {\n animation: fade-in 0.7s ease-out;\n}\n\ndialog:open::backdrop {\n background-color: black;\n animation: backdrop-fade-in 0.7s ease-out forwards;\n}\n\n/* Animation keyframes */\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n transform: scaleY(0);\n display: none;\n }\n\n 100% {\n opacity: 1;\n transform: scaleY(1);\n display: block;\n }\n}\n\n@keyframes fade-out {\n 0% {\n opacity: 1;\n transform: scaleY(1);\n display: block;\n }\n\n 100% {\n opacity: 0;\n transform: scaleY(0);\n display: none;\n }\n}\n\n@keyframes backdrop-fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 0.25;\n }\n}\n\nbody,\nbutton {\n font-family: system-ui;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.536Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":412,"estimatedTokens":2170}}35{"id":"doc-dl_html_description_list_element_html_mdn-cc5133c3","source":"documentation","title":"<dl> HTML description list element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl","text":"Example:\n```text\n<p>Cryptids of Cornwall:</p>\n\n<dl>\n <dt>Beast of Bodmin</dt>\n <dd>A large feline inhabiting Bodmin Moor.</dd>\n\n <dt>Morgawr</dt>\n <dd>A sea serpent.</dd>\n\n <dt>Owlman</dt>\n <dd>A giant owl-like creature.</dd>\n</dl>\n```\n\nExample:\n```text\np,\ndt {\n font-weight: bold;\n}\n\ndl,\ndd {\n font-size: 0.9rem;\n}\n\ndd {\n margin-bottom: 1em;\n}\n```\n\nExample:\n```text\n<dl>\n <dt>Firefox</dt>\n <dd>\n A free, open source, cross-platform, graphical web browser developed by the\n Mozilla Corporation and hundreds of volunteers.\n </dd>\n\n <!-- Other terms and descriptions -->\n</dl>\n```\n\nExample:\n```text\n<dl>\n <dt>Firefox</dt>\n <dt>Mozilla Firefox</dt>\n <dt>Fx</dt>\n <dd>\n A free, open source, cross-platform, graphical web browser developed by the\n Mozilla Corporation and hundreds of volunteers.\n </dd>\n\n <!-- Other terms and descriptions -->\n</dl>\n```\n\nExample:\n```text\n<dl>\n <dt>Firefox</dt>\n <dd>\n A free, open source, cross-platform, graphical web browser developed by the\n Mozilla Corporation and hundreds of volunteers.\n </dd>\n <dd>\n The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a\n mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).\n </dd>\n\n <!-- Other terms and descriptions -->\n</dl>\n```\n\nExample:\n```text\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n```\n\nExample:\n```text\ndt::after {\n content: \": \";\n}\n```\n\nExample:\n```typescript\n<dl>\n <div>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n </div>\n <div>\n <dt>Born</dt>\n <dd>1952</dd>\n </div>\n <div>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n </div>\n <div>\n <dt>Color</dt>\n <dd>Green</dd>\n </div>\n</dl>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.537Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":122,"estimatedTokens":450}}36{"id":"doc-frameset_html_frameset_element_html_mdn-ab01daf2","source":"documentation","title":"<frameset> HTML frameset element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/frameset","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <!-- Document metadata goes here -->\n </head>\n <frameset cols=\"50%, 50%\">\n <frame\n src=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe\" />\n <frame\n src=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/frame\" />\n </frameset>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.537Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":17,"estimatedTokens":96}}37{"id":"doc-h1_h6_html_section_heading_elements_html_mdn-ce18ce6c","source":"documentation","title":"<h1>โ<h6> HTML section heading elements - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements","text":"Example:\n```text\n<h1>Beetles</h1>\n<h2>External morphology</h2>\n<h3>Head</h3>\n<h4>Mouthparts</h4>\n<h3>Thorax</h3>\n<h4>Prothorax</h4>\n<h4>Pterothorax</h4>\n```\n\nExample:\n```text\nh1,\nh2,\nh3,\nh4 {\n margin: 0.1rem 0;\n}\n\nh1 {\n font-size: 2rem;\n}\n\nh2 {\n font-size: 1.5rem;\n padding-left: 20px;\n}\n\nh3 {\n font-size: 1.2rem;\n padding-left: 40px;\n}\n\nh4 {\n font-size: 1rem;\n font-style: italic;\n padding-left: 60px;\n}\n```\n\nExample:\n```text\nh1 {\n margin-block: 0.67em;\n font-size: 2em;\n}\n```\n\nExample:\n```text\n:where(h1) {\n margin-block: 0.67em;\n font-size: 2em;\n}\n```\n\nExample:\n```text\n<h1>Heading level 1</h1>\n<h3>Heading level 3</h3>\n<h4>Heading level 4</h4>\n```\n\nExample:\n```text\n<h1>Heading level 1</h1>\n<h2>Heading level 2</h2>\n<h3>Heading level 3</h3>\n```\n\nExample:\n```text\n<h1>Beetles</h1>\n\n<h2>Etymology</h2>\n\n<h2>Distribution and Diversity</h2>\n\n<h2>Evolution</h2>\n<h3>Late Paleozoic</h3>\n<h3>Jurassic</h3>\n<h3>Cretaceous</h3>\n<h3>Cenozoic</h3>\n\n<h2>External Morphology</h2>\n<h3>Head</h3>\n<h4>Mouthparts</h4>\n<h3>Thorax</h3>\n<h4>Prothorax</h4>\n<h4>Pterothorax</h4>\n<h3>Legs</h3>\n<h3>Wings</h3>\n<h3>Abdomen</h3>\n```\n\nExample:\n```text\n<h1>Heading level 1</h1>\n<h2>Heading level 2</h2>\n<h3>Heading level 3</h3>\n<h4>Heading level 4</h4>\n<h5>Heading level 5</h5>\n<h6>Heading level 6</h6>\n```\n\nExample:\n```text\n<h1>Heading elements</h1>\n<h2>Summary</h2>\n<p>Some text hereโฆ</p>\n\n<h2>Examples</h2>\n<h3>Example 1</h3>\n<p>Some text hereโฆ</p>\n\n<h3>Example 2</h3>\n<p>Some text hereโฆ</p>\n\n<h2>See also</h2>\n<p>Some text hereโฆ</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.538Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":124,"estimatedTokens":386}}38{"id":"doc-hgroup_html_heading_group_element_html_mdn-d6eb2043","source":"documentation","title":"<hgroup> HTML heading group element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hgroup","text":"Example:\n```text\n<hgroup>\n <h1>Frankenstein</h1>\n <p>Or: The Modern Prometheus</p>\n</hgroup>\n<p>\n Victor Frankenstein, a Swiss scientist, has a great ambition: to create\n intelligent life. But when his creature first stirs, he realizes he has made a\n monster. A monster which, abandoned by his master and shunned by everyone who\n sees it, follows Dr Frankenstein to the very ends of the earth.\n</p>\n```\n\nExample:\n```text\nhgroup {\n text-align: right;\n padding-right: 16px;\n border-right: 10px solid #00c8d7;\n}\n\nhgroup h1 {\n margin-bottom: 0;\n}\n\nhgroup p {\n margin: 0;\n font-weight: bold;\n}\n```\n\nExample:\n```text\n<!doctype html>\n<title>HTML Standard</title>\n<body>\n <hgroup id=\"document-title\">\n <h1>HTML: Living Standard</h1>\n <p>Last Updated 12 July 2022</p>\n </hgroup>\n <p>Some intro to the document.</p>\n <h2>Table of contents</h2>\n <ol id=\"toc\">\n โฆ\n </ol>\n <h2>First section</h2>\n <p>Some intro to the first section.</p>\n</body>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.538Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":52,"estimatedTokens":245}}39{"id":"doc-hr_html_thematic_break_horizontal_rule_element_h-07c89677","source":"documentation","title":"<hr> HTML thematic break (horizontal rule) element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr","text":"Example:\n```text\n<p>ยง1: The first rule of Fight Club is: You do not talk about Fight Club.</p>\n\n<hr />\n\n<p>ยง2: The second rule of Fight Club is: Always bring cupcakes.</p>\n```\n\nExample:\n```text\nhr {\n border: none;\n border-top: 3px double #333333;\n color: #333333;\n overflow: visible;\n text-align: center;\n height: 5px;\n}\n\nhr::after {\n background: white;\n content: \"ยง\";\n padding: 0 4px;\n position: relative;\n top: -13px;\n}\n```\n\nExample:\n```text\n<p>\n This is the first paragraph of text. This is the first paragraph of text. This\n is the first paragraph of text. This is the first paragraph of text.\n</p>\n\n<hr />\n\n<p>\n This is the second paragraph of text. This is the second paragraph of text.\n This is the second paragraph of text. This is the second paragraph of text.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.539Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":45,"estimatedTokens":202}}40{"id":"doc-ins_html_inserted_text_element_html_mdn-81fa7188","source":"documentation","title":"<ins> HTML inserted text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins","text":"Example:\n```text\n<p>“You're late!”</p>\n<del>\n <p>“I apologize for the delay.”</p>\n</del>\n<ins cite=\"../how-to-be-a-wizard.html\" datetime=\"2018-05\">\n <p>“A wizard is never late …”</p>\n</ins>\n```\n\nExample:\n```text\ndel,\nins {\n display: block;\n text-decoration: none;\n position: relative;\n}\n\ndel {\n background-color: #ffbbbb;\n}\n\nins {\n background-color: #d4fcbc;\n}\n\ndel::before,\nins::before {\n position: absolute;\n left: 0.5rem;\n font-family: monospace;\n}\n\ndel::before {\n content: \"โ\";\n}\n\nins::before {\n content: \"+\";\n}\n\np {\n margin: 0 1.8rem;\n font-family: \"Georgia\", serif;\n font-size: 1rem;\n}\n```\n\nExample:\n```text\nins::before,\nins::after {\n clip-path: inset(100%);\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\nins::before {\n content: \" [insertion start] \";\n}\n\nins::after {\n content: \" [insertion end] \";\n}\n```\n\nExample:\n```text\n<ins>This text has been inserted</ins>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.539Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":78,"estimatedTokens":258}}41{"id":"doc-html_html_document_root_element_html_mdn-44bd9d1f","source":"documentation","title":"<html> HTML document root element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/html","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en\">\n <head>\n <!-- โฆ -->\n </head>\n <body>\n <!-- โฆ -->\n </body>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.540Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":14,"estimatedTokens":36}}42{"id":"doc-iframe_html_inline_frame_element_html_mdn-34161b13","source":"documentation","title":"<iframe> HTML inline frame element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe","text":"Example:\n```text\n<iframe\n id=\"inlineFrameExample\"\n title=\"Inline Frame Example\"\n width=\"300\"\n height=\"200\"\n src=\"https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik\">\n</iframe>\n```\n\nExample:\n```text\niframe {\n border: 1px solid black;\n width: 100%; /* takes precedence over the width set with the HTML width attribute */\n}\n```\n\nExample:\n```text\n<iframe\n title=\"Wikipedia page for Avocados\"\n src=\"https://en.wikipedia.org/wiki/Avocado\"></iframe>\n```\n\nExample:\n```text\n<iframe\n src=\"https://example.org\"\n title=\"iframe Example 1\"\n width=\"400\"\n height=\"300\">\n</iframe>\n```\n\nExample:\n```text\n<article>\n <footer>Nine minutes ago, <i>jc</i> wrote:</footer>\n <iframe\n sandbox\n srcdoc=\"<p>There are two ways to use the <code>iframe</code> element:</p>\n<ol>\n<li><a href="about:srcdoc#embed_another">To embed content from another page</a></li>\n<li><a href="about:srcdoc#embed_user">To embed user-generated content</a></li>\n</ol>\n<h2 id="embed_another">Embedding content from another page</h2>\n<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>\n<pre><code>&lt;iframe src="https://example.org"&gt;&lt;/iframe&gt;</code></pre>\n<h2 id="embed_user">Embedding user-generated content</h2>\n<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>\n\"\n width=\"500\"\n height=\"250\"\n></iframe>\n</article>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.541Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":60,"estimatedTokens":396}}43{"id":"doc-i_html_idiomatic_text_element_html_mdn-a1874375","source":"documentation","title":"<i> HTML idiomatic text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i","text":"Example:\n```text\n<p>I looked at it and thought <i>This can't be real!</i></p>\n\n<p>\n <i>Musa</i> is one of two or three genera in the family <i>Musaceae</i>; it\n includes bananas and plantains.\n</p>\n\n<p>\n The term <i>bandwidth</i> describes the measure of how much information can\n pass through a data connection in a given amount of time.\n</p>\n```\n\nExample:\n```text\ni {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\n<p>\n The Latin phrase <i lang=\"la\">Veni, vidi, vici</i> is often mentioned in\n music, art, and literature.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.541Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":31,"estimatedTokens":140}}44{"id":"doc-kbd_html_keyboard_input_element_html_mdn-4970be3d","source":"documentation","title":"<kbd> HTML keyboard input element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd","text":"Example:\n```text\n<p>\n Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an\n MDN page.\n</p>\n```\n\nExample:\n```text\nkbd {\n background-color: #eeeeee;\n border-radius: 3px;\n border: 1px solid #b4b4b4;\n box-shadow:\n 0 1px 1px rgb(0 0 0 / 0.2),\n 0 2px 0 0 rgb(255 255 255 / 0.7) inset;\n color: #333333;\n display: inline-block;\n font-size: 0.85em;\n font-weight: bold;\n line-height: 1;\n padding: 2px 4px;\n white-space: nowrap;\n}\n```\n\nExample:\n```text\n<p>\n Use the command <kbd>help my-command</kbd> to view documentation for the\n command \"my-command\".\n</p>\n```\n\nExample:\n```text\n<p>\n You can also create a new document using the\n <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.\n</p>\n```\n\nExample:\n```text\nkbd > kbd {\n border-radius: 3px;\n padding: 1px 2px 0;\n border: 1px solid black;\n}\n```\n\nExample:\n```text\n<p>\n You can also create a new document by pressing the\n <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.\n</p>\n```\n\nExample:\n```text\n<p>\n If a syntax error occurs, the tool will output the initial command you typed\n for your review:\n</p>\n<blockquote>\n <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>\n</blockquote>\n```\n\nExample:\n```text\n<p>\n To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>\n โ<kbd><samp>New Document</samp></kbd></kbd> menu option.\n</p>\n\n<p>\n Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once\n you've entered the name of the new file.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.542Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":85,"estimatedTokens":374}}45{"id":"doc-main_html_main_element_html_mdn-bdf98b97","source":"documentation","title":"<main> HTML main element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main","text":"Example:\n```text\n<header>Gecko facts</header>\n\n<main>\n <p>\n Geckos are a group of usually small, usually nocturnal lizards. They are\n found on every continent except Antarctica.\n </p>\n\n <p>\n Many species of gecko have adhesive toe pads which enable them to climb\n walls and even windows.\n </p>\n</main>\n```\n\nExample:\n```text\nheader {\n font:\n bold 7vw \"Arial\",\n sans-serif;\n}\n```\n\nExample:\n```text\n<body>\n <a href=\"#main-content\">Skip to main content</a>\n\n <!-- navigation and header content -->\n\n <main id=\"main-content\">\n <!-- main page content -->\n </main>\n</body>\n```\n\nExample:\n```text\n<!-- other content -->\n\n<main>\n <h1>Apples</h1>\n <p>The apple is the pomaceous fruit of the apple tree.</p>\n\n <article>\n <h2>Red Delicious</h2>\n <p>\n These bright red apples are the most common found in many supermarkets.\n </p>\n <p>โฆ</p>\n <p>โฆ</p>\n </article>\n\n <article>\n <h2>Granny Smith</h2>\n <p>These juicy, green apples make a great filling for apple pies.</p>\n <p>โฆ</p>\n <p>โฆ</p>\n </article>\n</main>\n\n<!-- other content -->\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.542Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":68,"estimatedTokens":276}}46{"id":"doc-map_html_image_map_element_html_mdn-f50c9d80","source":"documentation","title":"<map> HTML image map element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map","text":"Example:\n```text\n<map name=\"infographic\">\n <area\n shape=\"poly\"\n coords=\"130,147,200,107,254,219,130,228\"\n href=\"https://developer.mozilla.org/docs/Web/HTML\"\n alt=\"HTML\" />\n <area\n shape=\"poly\"\n coords=\"130,147,130,228,6,219,59,107\"\n href=\"https://developer.mozilla.org/docs/Web/CSS\"\n alt=\"CSS\" />\n <area\n shape=\"poly\"\n coords=\"130,147,200,107,130,4,59,107\"\n href=\"https://developer.mozilla.org/docs/Web/JavaScript\"\n alt=\"JavaScript\" />\n</map>\n<img\n usemap=\"#infographic\"\n src=\"/shared-assets/images/examples/mdn-info2.png\"\n alt=\"MDN infographic\" />\n```\n\nExample:\n```text\nimg {\n display: block;\n margin: 0 auto;\n width: 260px;\n height: 232px;\n}\n```\n\nExample:\n```text\n<!-- Photo by Juliana e Mariana Amorim on Unsplash -->\n<map name=\"primary\">\n <area\n shape=\"circle\"\n coords=\"75,75,75\"\n href=\"https://developer.mozilla.org/docs/Web/JavaScript\"\n target=\"_blank\"\n alt=\"JavaScript\" />\n <area\n shape=\"circle\"\n coords=\"275,75,75\"\n href=\"https://developer.mozilla.org/docs/Web/CSS\"\n target=\"_blank\"\n alt=\"CSS\" />\n</map>\n<img\n usemap=\"#primary\"\n src=\"parrots.jpg\"\n alt=\"350 x 150 picture of two parrots\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.543Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":59,"estimatedTokens":299}}47{"id":"doc-marquee_html_marquee_element_html_mdn-96046622","source":"documentation","title":"<marquee> HTML marquee element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/marquee","text":"Example:\n```text\n<marquee>This text will scroll from right to left</marquee>\n\n<marquee direction=\"up\">This text will scroll from bottom to top</marquee>\n\n<marquee\n direction=\"down\"\n width=\"250\"\n height=\"200\"\n behavior=\"alternate\"\n class=\"outlined\">\n <marquee behavior=\"alternate\">This text will bounce</marquee>\n</marquee>\n```\n\nExample:\n```text\n.outlined {\n border: solid;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.543Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":24,"estimatedTokens":100}}48{"id":"doc-mark_html_mark_text_element_html_mdn-c4d0503f","source":"documentation","title":"<mark> HTML mark text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark","text":"Example:\n```text\n<p>Search results for \"salamander\":</p>\n\n<hr />\n\n<p>\n Several species of <mark>salamander</mark> inhabit the temperate rainforest of\n the Pacific Northwest.\n</p>\n\n<p>\n Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and\n other small creatures.\n</p>\n```\n\nExample:\n```text\nmark {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\nmark::before,\nmark::after {\n clip-path: inset(100%);\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\nmark::before {\n content: \" [highlight start] \";\n}\n\nmark::after {\n content: \" [highlight end] \";\n}\n```\n\nExample:\n```text\n<blockquote>\n It is a period of civil war. Rebel spaceships, striking from a hidden base,\n have won their first victory against the evil Galactic Empire. During the\n battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's\n ultimate weapon, the DEATH STAR, an armored space station with enough power to\n destroy an entire planet.\n</blockquote>\n```\n\nExample:\n```text\n<p>\n It is a dark time for the Rebellion. Although the Death Star has been\n destroyed, <mark class=\"match\">Imperial</mark> troops have driven the Rebel\n forces from their hidden base and pursued them across the galaxy.\n</p>\n\n<p>\n Evading the dreaded <mark class=\"match\">Imperial</mark> Starfleet, a group of\n freedom fighters led by Luke Skywalker has established a new secret base on\n the remote ice world of Hoth.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.544Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":73,"estimatedTokens":381}}49{"id":"doc-label_html_label_element_html_mdn-24cb509b","source":"documentation","title":"<label> HTML label element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label","text":"Example:\n```text\n<div class=\"preference\">\n <label for=\"cheese\">I like cheese.</label>\n <input type=\"checkbox\" name=\"cheese\" id=\"cheese\" />\n</div>\n\n<div class=\"preference\">\n <label for=\"peas\">I like peas.</label>\n <input type=\"checkbox\" name=\"peas\" id=\"peas\" />\n</div>\n```\n\nExample:\n```text\n.preference {\n display: flex;\n justify-content: space-between;\n width: 60%;\n margin: 0.5rem;\n}\n```\n\nExample:\n```text\n<label for=\"peas\">I like peas.</label>\n<input type=\"checkbox\" name=\"peas\" id=\"peas\" />\n```\n\nExample:\n```text\n<label>\n I like peas.\n <input type=\"checkbox\" name=\"peas\" />\n</label>\n```\n\nExample:\n```text\n<label for=\"username\">Enter your username:</label>\n<input id=\"username\" name=\"username\" type=\"text\" />\n<label for=\"username\">Forgot your username?</label>\n```\n\nExample:\n```text\n<label for=\"tac\">\n <input id=\"tac\" type=\"checkbox\" name=\"terms-and-conditions\" />\n I agree to the <a href=\"terms-and-conditions.html\">Terms and Conditions</a>\n</label>\n```\n\nExample:\n```text\n<p>\n <a href=\"terms-and-conditions.html\">Read our Terms and Conditions</a>\n</p>\n<label for=\"tac\">\n <input id=\"tac\" type=\"checkbox\" name=\"terms-and-conditions\" />\n I agree to the Terms and Conditions\n</label>\n```\n\nExample:\n```text\n<label for=\"your-name\">\n <h3>Your name</h3>\n <input id=\"your-name\" name=\"your-name\" type=\"text\" />\n</label>\n```\n\nExample:\n```text\n<label class=\"large-label\" for=\"your-name\">\n Your name\n <input id=\"your-name\" name=\"your-name\" type=\"text\" />\n</label>\n```\n\nExample:\n```text\n<label>Click me <input type=\"text\" /></label>\n```\n\nExample:\n```text\n<label for=\"username\">Click me to focus on the input field</label>\n<input type=\"text\" id=\"username\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.544Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":91,"estimatedTokens":421}}50{"id":"doc-geolocation_html_geolocation_element_html_mdn-ff987b72","source":"documentation","title":"<geolocation> HTML geolocation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/geolocation","text":"Example:\n```text\n<geolocation>\n <p>Your browser doesn't support the Geolocation element.</p>\n</geolocation>\n```\n\nExample:\n```text\n<geolocation>\n <button id=\"fallback\">Use location</button>\n</geolocation>\n```\n\nExample:\n```text\n<geolocation>\n <button id=\"fallback\">Use location</button>\n</geolocation>\n<p id=\"output\"></p>\n```\n\nExample:\n```javascript\nconst outputElem = document.querySelector(\"#output\");\n\nif (typeof HTMLGeolocationElement === \"function\") {\n const geo = document.querySelector(\"geolocation\");\n geo.addEventListener(\"location\", () => {\n if (geo.position) {\n outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;\n } else if (geo.error) {\n outputElem.textContent += `${geo.error.message}, `;\n }\n });\n} else {\n const fallback = document.querySelector(\"#fallback\");\n fallback.addEventListener(\"click\", () => {\n navigator.geolocation.getCurrentPosition(\n (position) => {\n outputElem.textContent += `(${position.coords.latitude}, ${position.coords.longitude}), `;\n },\n (error) => {\n outputElem.textContent += `${error.message}, `;\n },\n );\n });\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.545Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":51,"estimatedTokens":296}}51{"id":"doc-menu_html_menu_element_html_mdn-2ba94e15","source":"documentation","title":"<menu> HTML menu element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/menu","text":"Example:\n```text\n<div class=\"news\">\n <a href=\"#\">NASA's Webb Delivers Deepest Infrared Image of Universe Yet</a>\n <menu>\n <li><button id=\"save\">Save for later</button></li>\n <li><button id=\"share\">Share this news</button></li>\n </menu>\n</div>\n```\n\nExample:\n```text\n.news {\n background-color: bisque;\n padding: 1em;\n border: solid thin black;\n}\n\nmenu {\n list-style-type: none;\n display: flex;\n padding: 0;\n margin-bottom: 0;\n gap: 1em;\n}\n```\n\nExample:\n```text\n<menu>\n <li><button onclick=\"copy()\">Copy</button></li>\n <li><button onclick=\"cut()\">Cut</button></li>\n <li><button onclick=\"paste()\">Paste</button></li>\n</menu>\n```\n\nExample:\n```text\nmenu,\nul {\n display: flex;\n list-style: none;\n padding: 0;\n width: 400px;\n}\n\nli {\n flex-grow: 1;\n}\n\nbutton {\n width: 100%;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.546Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":57,"estimatedTokens":203}}52{"id":"doc-meter_html_meter_element_html_mdn-877ec970","source":"documentation","title":"<meter> HTML meter element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter","text":"Example:\n```text\n<label for=\"fuel\">Fuel level:</label>\n\n<meter id=\"fuel\" min=\"0\" max=\"100\" low=\"33\" high=\"66\" optimum=\"80\" value=\"50\">\n at 50/100\n</meter>\n```\n\nExample:\n```text\nlabel {\n padding-right: 10px;\n font-size: 1rem;\n}\n```\n\nExample:\n```text\n<p>Battery level: <meter min=\"0\" max=\"100\" value=\"75\">75%</meter></p>\n```\n\nExample:\n```text\n<p>\n Student's exam score:\n <meter low=\"50\" high=\"80\" max=\"100\" value=\"84\">84%</meter>\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.548Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":31,"estimatedTokens":114}}53{"id":"doc-nobr_html_non_breaking_text_element_html_mdn-da28a992","source":"documentation","title":"<nobr> HTML non-breaking text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nobr","text":"Example:\n```text\n<span class=\"nobr\">Long line with no breaks</span>\n```\n\nExample:\n```text\n.nobr {\n white-space: nowrap;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.548Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":35}}54{"id":"doc-meta_html_metadata_element_html_mdn-6441d694","source":"documentation","title":"<meta> HTML metadata element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta","text":"Example:\n```text\n<meta\n name=\"description\"\n content=\"The HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements.\" />\n```\n\nExample:\n```text\n<meta http-equiv=\"refresh\" content=\"3;url=https://www.mozilla.org\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.549Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":73}}55{"id":"doc-option_html_option_element_html_mdn-df4d8be4","source":"documentation","title":"<option> HTML option element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option","text":"Example:\n```text\n<label for=\"pet-select\">Choose a pet:</label>\n\n<select id=\"pet-select\">\n <option value=\"\">--Please choose an option--</option>\n <option value=\"dog\">Dog</option>\n <option value=\"cat\">Cat</option>\n <option value=\"hamster\">Hamster</option>\n <option value=\"parrot\">Parrot</option>\n <option value=\"spider\">Spider</option>\n <option value=\"goldfish\">Goldfish</option>\n</select>\n```\n\nExample:\n```text\nlabel {\n font-family: sans-serif;\n font-size: 1rem;\n padding-right: 10px;\n}\n\nselect {\n font-size: 0.9rem;\n padding: 2px 5px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.549Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":30,"estimatedTokens":142}}56{"id":"doc-legend_html_field_set_legend_element_html_mdn-1b264c54","source":"documentation","title":"<legend> HTML field set legend element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend","text":"Example:\n```text\n<fieldset>\n <legend>Choose your favorite monster</legend>\n\n <input type=\"radio\" id=\"kraken\" name=\"monster\" value=\"K\" />\n <label for=\"kraken\">Kraken</label><br />\n\n <input type=\"radio\" id=\"sasquatch\" name=\"monster\" value=\"S\" />\n <label for=\"sasquatch\">Sasquatch</label><br />\n\n <input type=\"radio\" id=\"mothman\" name=\"monster\" value=\"M\" />\n <label for=\"mothman\">Mothman</label>\n</fieldset>\n```\n\nExample:\n```text\nlegend {\n background-color: black;\n color: white;\n padding: 3px 6px;\n}\n\ninput {\n margin: 0.4rem;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.550Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":30,"estimatedTokens":139}}57{"id":"doc-picture_html_picture_element_html_mdn-71c1c75a","source":"documentation","title":"<picture> HTML picture element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture","text":"Example:\n```text\n<!--Change the browser window width to see the image change.-->\n\n<picture>\n <source\n srcset=\"/shared-assets/images/examples/surfer.jpg\"\n media=\"(orientation: portrait)\" />\n <img src=\"/shared-assets/images/examples/painted-hand.jpg\" alt=\"\" />\n</picture>\n```\n\nExample:\n```text\n<picture>\n <source srcset=\"mdn-logo-wide.png\" media=\"(width >= 600px)\" />\n <img src=\"mdn-logo-narrow.png\" alt=\"MDN\" />\n</picture>\n```\n\nExample:\n```text\n<picture>\n <source srcset=\"logo-dark.png\" media=\"(prefers-color-scheme: dark)\" />\n <source srcset=\"logo-light.png\" media=\"(prefers-color-scheme: light)\" />\n <img src=\"logo-light.png\" alt=\"Product logo\" />\n</picture>\n```\n\nExample:\n```text\n<picture>\n <source srcset=\"logo.png, logo-1.5x.png 1.5x\" />\n <img src=\"logo.png\" alt=\"MDN Web Docs logo\" height=\"320\" width=\"320\" />\n</picture>\n```\n\nExample:\n```text\n<img\n srcset=\"logo.png, logo-2x.png 2x\"\n src=\"logo.png\"\n height=\"320\"\n width=\"320\"\n alt=\"MDN Web Docs logo\" />\n```\n\nExample:\n```text\n<picture>\n <source\n srcset=\"small.jpg 480w, medium.jpg 800w, large.jpg 1200w\"\n sizes=\"(max-width: 600px) 400px, 800px\"\n type=\"image/jpeg\" />\n <img src=\"fallback.jpg\" alt=\"Example image\" />\n</picture>\n```\n\nExample:\n```text\n<picture>\n <source srcset=\"photo.avif\" type=\"image/avif\" />\n <source srcset=\"photo.webp\" type=\"image/webp\" />\n <img src=\"photo.jpg\" alt=\"photo\" />\n</picture>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.551Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":68,"estimatedTokens":353}}58{"id":"doc-noscript_html_noscript_element_html_mdn-130d7885","source":"documentation","title":"<noscript> HTML noscript element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript","text":"Example:\n```text\n<noscript>\n <!-- anchor linking to external file -->\n <a href=\"https://www.mozilla.org/\">External Link</a>\n</noscript>\n<p>Rocks!</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.551Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":10,"estimatedTokens":43}}59{"id":"doc-optgroup_html_option_group_element_html_mdn-f8558fc6","source":"documentation","title":"<optgroup> HTML option group element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup","text":"Example:\n```text\n<label for=\"dino-select\">Choose a dinosaur:</label>\n<select id=\"dino-select\">\n <optgroup label=\"Theropods\">\n <option>Tyrannosaurus</option>\n <option>Velociraptor</option>\n <option>Deinonychus</option>\n </optgroup>\n <optgroup label=\"Sauropods\">\n <option>Diplodocus</option>\n <option>Saltasaurus</option>\n <option>Apatosaurus</option>\n </optgroup>\n</select>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-bottom: 10px;\n}\n```\n\nExample:\n```text\n<select>\n <optgroup label=\"Group 1\">\n <option>Option 1.1</option>\n </optgroup>\n <optgroup label=\"Group 2\">\n <option>Option 2.1</option>\n <option>Option 2.2</option>\n </optgroup>\n <optgroup label=\"Group 3\" disabled>\n <option>Option 3.1</option>\n <option>Option 3.2</option>\n <option>Option 3.3</option>\n </optgroup>\n</select>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.551Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":44,"estimatedTokens":214}}60{"id":"doc-link_html_external_resource_link_element_html_md-5ae75bc2","source":"documentation","title":"<link> HTML external resource link element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link","text":"Example:\n```text\n<link href=\"/shared-assets/misc/link-element-example.css\" rel=\"stylesheet\" />\n\n<p>This text will be red as defined in the external stylesheet.</p>\n<p style=\"color: blue\">\n The <code>style</code> attribute can override it, though.\n</p>\n```\n\nExample:\n```text\n<link href=\"main.css\" rel=\"stylesheet\" />\n```\n\nExample:\n```text\n<link rel=\"icon\" href=\"favicon.ico\" />\n```\n\nExample:\n```text\n<link\n rel=\"apple-touch-icon\"\n sizes=\"114x114\"\n href=\"apple-icon-114.png\"\n type=\"image/png\" />\n```\n\nExample:\n```text\n<link href=\"print.css\" rel=\"stylesheet\" media=\"print\" />\n<link href=\"mobile.css\" rel=\"stylesheet\" media=\"screen and (width <= 600px)\" />\n```\n\nExample:\n```text\n<link\n rel=\"preload\"\n href=\"myFont.woff2\"\n as=\"font\"\n type=\"font/woff2\"\n crossorigin=\"anonymous\" />\n```\n\nExample:\n```text\n<link href=\"style.css\" rel=\"stylesheet\" />\n```\n\nExample:\n```text\n<link href=\"default.css\" rel=\"stylesheet\" title=\"Default Style\" />\n<link href=\"fancy.css\" rel=\"alternate stylesheet\" title=\"Fancy\" />\n<link href=\"basic.css\" rel=\"alternate stylesheet\" title=\"Basic\" />\n```\n\nExample:\n```text\n<!-- iPad Pro with high-resolution Retina display: -->\n<link\n rel=\"apple-touch-icon\"\n sizes=\"167x167\"\n href=\"/apple-touch-icon-167x167.png\" />\n<!-- 3x resolution iPhone: -->\n<link\n rel=\"apple-touch-icon\"\n sizes=\"180x180\"\n href=\"/apple-touch-icon-180x180.png\" />\n<!-- non-Retina iPad, iPad mini, etc.: -->\n<link\n rel=\"apple-touch-icon\"\n sizes=\"152x152\"\n href=\"/apple-touch-icon-152x152.png\" />\n<!-- 2x resolution iPhone and other devices: -->\n<link rel=\"apple-touch-icon\" href=\"/apple-touch-icon-120x120.png\" />\n<!-- basic favicon -->\n<link rel=\"icon\" href=\"/favicon.ico\" />\n```\n\nExample:\n```text\n<link href=\"print.css\" rel=\"stylesheet\" media=\"print\" />\n<link href=\"mobile.css\" rel=\"stylesheet\" media=\"all\" />\n<link href=\"desktop.css\" rel=\"stylesheet\" media=\"screen and (width >= 600px)\" />\n<link\n href=\"highres.css\"\n rel=\"stylesheet\"\n media=\"screen and (resolution >= 300dpi)\" />\n```\n\nExample:\n```text\n<link rel=\"stylesheet\" href=\"mystylesheet.css\" id=\"my-stylesheet\" />\n```\n\nExample:\n```javascript\nconst stylesheet = document.getElementById(\"my-stylesheet\");\n\nstylesheet.onload = () => {\n // Do something interesting; the sheet has been loaded\n};\n\nstylesheet.onerror = () => {\n console.log(\"An error occurred loading the stylesheet!\");\n};\n```\n\nExample:\n```text\n<link blocking=\"render\" rel=\"stylesheet\" href=\"example.css\" crossorigin />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.553Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":115,"estimatedTokens":616}}61{"id":"doc-noframes_html_frame_fallback_element_html_mdn-bb10d63a","source":"documentation","title":"<noframes> HTML frame fallback element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noframes","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <!-- Document metadata goes here -->\n </head>\n <frameset rows=\"45%, 55%\">\n <frame src=\"https://developer.mozilla.org/en/HTML/Element/frameset\" />\n <frame src=\"https://developer.mozilla.org/en/HTML/Element/frame\" />\n <noframes>\n <p>\n It seems your browser does not support frames or is configured to not\n allow them.\n </p>\n </noframes>\n </frameset>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.553Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":21,"estimatedTokens":120}}62{"id":"doc-noembed_html_embed_fallback_element_html_mdn-a94b19e9","source":"documentation","title":"<noembed> HTML embed fallback element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noembed","text":"Example:\n```text\n<embed\n type=\"video/webm\"\n src=\"/media/examples/flower.mp4\"\n width=\"200\"\n height=\"200\" />\n<noembed>\n <h1>Alternative content</h1>\n</noembed>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.554Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":13,"estimatedTokens":45}}63{"id":"doc-object_html_external_object_element_html_mdn-928abc6f","source":"documentation","title":"<object> HTML external object element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object","text":"Example:\n```text\n<object\n type=\"video/mp4\"\n data=\"/shared-assets/videos/flower.mp4\"\n width=\"250\"\n height=\"200\"></object>\n```\n\nExample:\n```text\n<object\n type=\"video/webm\"\n data=\"/shared-assets/videos/flower.webm\"\n width=\"600\"\n height=\"140\">\n <img\n src=\"/shared-assets/images/examples/flowers.jpg\"\n alt=\"Some beautiful flowers\" />\n</object>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.555Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":23,"estimatedTokens":93}}64{"id":"doc-rb_html_ruby_base_element_html_mdn-49a0d5a0","source":"documentation","title":"<rb> HTML ruby base element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rb","text":"Example:\n```text\n<ruby>\n <rb>ๆผข</rb><rb>ๅญ </rb><rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>\n</ruby>\n```\n\nExample:\n```text\n<ruby>\n ๆผข <rp>(</rp><rt>Kan</rt><rp>)</rp> ๅญ <rp>(</rp><rt>ji</rt><rp>)</rp>\n</ruby>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.555Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":15,"estimatedTokens":56}}65{"id":"doc-pre_html_preformatted_text_element_html_mdn-1b4fd05e","source":"documentation","title":"<pre> HTML preformatted text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre","text":"Example:\n```text\n<pre>\n S\n A\n LUT\n M\n O N\n D E\n DONT\n JE SUIS\n LA LAN\n G U E ร\n L O Q U E N\n TE QUESA\n B O U C H E\n O P A R I S\n T I R E ET TIRERA\n T O U JOURS\n AUX A L\n LEM ANDS - Apollinaire\n</pre>\n```\n\nExample:\n```text\npre {\n font-size: 0.7rem;\n margin: 0;\n}\n```\n\nExample:\n```text\n<figure>\n <pre role=\"img\" aria-label=\"ASCII COW\">\n ___________________________\n < I'm an expert in my field. >\n ---------------------------\n \\ ^__^\n \\ (oo)\\_______\n (__)\\ )\\/\\\n ||----w |\n || ||\n </pre>\n <figcaption id=\"cow-caption\">\n A cow saying, \"I'm an expert in my field.\" The cow is illustrated using\n preformatted text characters.\n </figcaption>\n</figure>\n```\n\nExample:\n```text\n<p>Using CSS to change the font color is easy.</p>\n<pre><code>\nbody {\n color: red;\n}\n</code></pre>\n```\n\nExample:\n```text\n<pre><code>\nlet i = 5;\n\nif (i < 10 && i > 0)\n return "Single Digit Number"\n</code></pre>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.556Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":73,"estimatedTokens":312}}66{"id":"doc-script_html_script_element_html_mdn-d03db41d","source":"documentation","title":"<script> HTML script element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script","text":"Example:\n```text\n<script\n src=\"myscript.js\"\n attributionsrc=\"https://a.example/register-source https://b.example/register-source\"></script>\n```\n\nExample:\n```text\n<script src=\"javascript.js\"></script>\n```\n\nExample:\n```text\n<script>\n alert(\"Hello World!\");\n</script>\n```\n\nExample:\n```text\n<script async src=\"js/vendor/jquery.js\"></script>\n<script async src=\"js/script2.js\"></script>\n<script async src=\"js/script3.js\"></script>\n```\n\nExample:\n```text\n<script defer src=\"js/vendor/jquery.js\"></script>\n<script defer src=\"js/script2.js\"></script>\n<script defer src=\"js/script3.js\"></script>\n```\n\nExample:\n```text\n<script type=\"module\" src=\"main.js\"></script>\n<script nomodule src=\"fallback.js\"></script>\n```\n\nExample:\n```javascript\nimport { name as circleName } from \"https://example.com/shapes/circle.js\";\nimport { name as squareName, draw } from \"./shapes/square.js\";\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"circle\": \"https://example.com/shapes/circle.js\",\n \"square\": \"./shapes/square.js\"\n }\n }\n</script>\n```\n\nExample:\n```javascript\nimport { name as circleName } from \"circle\";\nimport { name as squareName, draw } from \"square\";\n```\n\nExample:\n```text\n<!-- Generated by the server -->\n<script id=\"data\" type=\"application/json\">\n {\n \"userId\": 1234,\n \"userName\": \"Maria Cruz\",\n \"memberSince\": \"2000-01-01T00:00:00.000Z\"\n }\n</script>\n\n<!-- Static -->\n<script>\n const userInfo = JSON.parse(document.getElementById(\"data\").text);\n console.log(\"User information: %o\", userInfo);\n</script>\n```\n\nExample:\n```text\n<script blocking=\"render\" async src=\"async-script.js\"></script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.557Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":87,"estimatedTokens":411}}67{"id":"doc-hidden_html_global_attribute_html_mdn-fee3919f","source":"documentation","title":"hidden HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden","text":"Example:\n```text\n<p>\n This content should be read right now, as it is important. I am so glad you\n are able to find it!\n</p>\n\n<p hidden>\n This content is not relevant to this page right now, so should not be seen.\n Nothing to see here. Nada.\n</p>\n```\n\nExample:\n```text\np {\n background: #ffe8d4;\n border: 1px solid #f69d3c;\n padding: 5px;\n border-radius: 5px;\n}\n```\n\nExample:\n```text\ndiv {\n height: 40px;\n width: 300px;\n border: 5px dashed black;\n margin: 1rem 0;\n padding: 1rem;\n font-size: 2rem;\n}\n```\n\nExample:\n```text\ndiv {\n height: 40px;\n width: 300px;\n border: 5px dashed black;\n margin: 1rem 0;\n padding: 1rem;\n font-size: 2rem;\n}\n\ndiv#until-found-box {\n color: red;\n border: 5px dotted red;\n background-color: lightgray;\n}\n```\n\nExample:\n```text\n#until-found-box {\n scroll-margin-top: 200px;\n}\n```\n\nExample:\n```javascript\nconst untilFound = document.querySelector(\"#until-found-box\");\nuntilFound.addEventListener(\n \"beforematch\",\n () => (untilFound.textContent = \"I've been revealed!\"),\n);\n```\n\nExample:\n```javascript\ndocument.querySelector(\"#reset\").addEventListener(\"click\", () => {\n document.location.hash = \"\";\n document.location.reload();\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.558Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":78,"estimatedTokens":300}}68{"id":"doc-exportparts_html_global_attribute_html_mdn-7fa9ed1c","source":"documentation","title":"exportparts HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/exportparts","text":"Example:\n```text\n<template id=\"ancestor-component\">\n <nested-component exportparts=\"part1, part2, part5\"></nested-component>\n</template>\n```\n\nExample:\n```text\n<template id=\"ancestor-component\">\n <nested-component\n exportparts=\"part1:exposed1, part2:exposed2\"></nested-component>\n</template>\n```\n\nExample:\n```text\n<template id=\"card-component-template\">\n <style>\n :host {\n display: block;\n }\n </style>\n <div class=\"base\" part=\"base\">\n <div part=\"header\"><slot name=\"header_slot\"></slot></div>\n <div part=\"body\"><slot name=\"body_slot\"></slot></div>\n <div part=\"footer\"><slot name=\"footer_slot\"></slot></div>\n </div>\n</template>\n\n<card-component>\n <p slot=\"header_slot\">This is the header</p>\n <p slot=\"body_slot\">This is the body</p>\n <p slot=\"footer_slot\">This is the footer</p>\n</card-component>\n```\n\nExample:\n```javascript\ncustomElements.define(\n \"card-component\",\n class extends HTMLElement {\n constructor() {\n super(); // Always call super first in constructor\n const template = document.getElementById(\"card-component-template\");\n const shadowRoot = this.attachShadow({\n mode: \"open\",\n });\n shadowRoot.appendChild(document.importNode(template.content, true));\n }\n },\n);\n```\n\nExample:\n```text\n::part(body) {\n color: red;\n font-style: italic;\n}\n```\n\nExample:\n```text\n<template id=\"card-component-template\">\n <style>\n :host {\n display: block;\n }\n </style>\n <div class=\"base\" part=\"base\">\n <div part=\"header\"><slot name=\"header_slot\"></slot></div>\n <div part=\"body\"><slot name=\"body_slot\"></slot></div>\n <div part=\"footer\"><slot name=\"footer_slot\"></slot></div>\n </div>\n</template>\n```\n\nExample:\n```text\n<template id=\"card-wrapper\">\n <style>\n :host {\n display: block;\n }\n </style>\n <card-component exportparts=\"base, header, body\">\n <slot name=\"H\" slot=\"header_slot\"></slot>\n <slot name=\"B\" slot=\"body_slot\"></slot>\n <slot name=\"F\" slot=\"footer_slot\"></slot>\n </card-component>\n</template>\n```\n\nExample:\n```text\n<h2>Card wrapper</h2>\n\n<card-wrapper>\n <p slot=\"H\">This is the header</p>\n <p slot=\"B\">This is the body</p>\n <p slot=\"F\">This is the footer</p>\n</card-wrapper>\n\n<h2>Card component</h2>\n\n<card-component>\n <p slot=\"header_slot\">This is the header</p>\n <p slot=\"body_slot\">This is the body</p>\n <p slot=\"footer_slot\">This is the footer</p>\n</card-component>\n```\n\nExample:\n```javascript\ncustomElements.define(\n \"card-wrapper\",\n class extends HTMLElement {\n constructor() {\n super(); // Always call super first in constructor\n const template = document.getElementById(\"card-wrapper\");\n const shadowRoot = this.attachShadow({\n mode: \"open\",\n });\n shadowRoot.appendChild(document.importNode(template.content, true));\n }\n },\n);\n```\n\nExample:\n```text\nh2 {\n background-color: #dedede;\n}\n\ncard-wrapper,\ncard-component {\n border: 1px dashed blue;\n width: fit-content;\n}\n\n::part(body) {\n color: red;\n font-style: italic;\n}\n\n::part(header),\n::part(footer) {\n font-weight: bold;\n}\n```\n\nExample:\n```typescript\n<template id=\"card-component-template\">\n <div class=\"base\" part=\"base\">\n <div part=\"header\"><slot name=\"header_slot\"></slot></div>\n <div part=\"body\"><slot name=\"body_slot\"></slot></div>\n <div part=\"footer\"><slot name=\"footer_slot\"></slot></div>\n </div>\n</template>\n\n<card-wrapper>\n <p slot=\"H\">This is the header</p>\n <p slot=\"B\">This is the body</p>\n <p slot=\"F\">This is the footer</p>\n</card-wrapper>\n```\n\nExample:\n```typescript\n<template id=\"card-wrapper\">\n <card-component\n exportparts=\"\n base:card__base,\n header:card__header,\n footer:card__footer\n \">\n <span slot=\"header_slot\"><slot name=\"H\"></slot></span>\n <span slot=\"body_slot\"><slot name=\"B\"></slot></span>\n <span slot=\"footer_slot\"><slot name=\"F\"></slot></span>\n </card-component>\n</template>\n```\n\nExample:\n```typescript\n/* selects the exported parts name */\n::part(card__header) {\n font-weight: bold;\n}\n/* selects nothing: these part names were not exported */\n::part(footer),\n::part(body) {\n font-weight: bold;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.559Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":200,"estimatedTokens":1032}}69{"id":"doc-small_html_side_comment_element_html_mdn-e6eda90c","source":"documentation","title":"<small> HTML side comment element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/small","text":"Example:\n```text\n<p>\n MDN Web Docs is a learning platform for Web technologies and the software that\n powers the Web.\n</p>\n\n<hr />\n\n<p>\n <small\n >The content is licensed under a Creative Commons Attribution-ShareAlike 2.5\n Generic License.</small\n >\n</p>\n```\n\nExample:\n```text\nsmall {\n font-size: 0.7em;\n}\n```\n\nExample:\n```text\n<p>\n This is the first sentence.\n <small>This whole sentence is in small letters.</small>\n</p>\n```\n\nExample:\n```text\n<p>\n This is the first sentence.\n <span class=\"small\">This whole sentence is in small letters.</span>\n</p>\n```\n\nExample:\n```text\n.small {\n font-size: 0.8em;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.560Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":48,"estimatedTokens":160}}70{"id":"doc-summary_html_disclosure_summary_element_html_mdn-0bc36e5f","source":"documentation","title":"<summary> HTML disclosure summary element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary","text":"Example:\n```text\n<details>\n <summary>\n I have keys but no doors. I have space but no room. You can enter but can't\n leave. What am I?\n </summary>\n A keyboard.\n</details>\n```\n\nExample:\n```text\ndetails {\n border: 1px solid #aaaaaa;\n border-radius: 4px;\n padding: 0.5em 0.5em 0;\n}\n\nsummary {\n font-weight: bold;\n margin: -0.5em -0.5em 0;\n padding: 0.5em;\n}\n\ndetails[open] {\n padding: 0.5em;\n}\n\ndetails[open] summary {\n border-bottom: 1px solid #aaaaaa;\n margin-bottom: 0.5em;\n}\n```\n\nExample:\n```text\n<details open>\n <summary>Overview</summary>\n <ol>\n <li>Cash on hand: $500.00</li>\n <li>Current invoice: $75.30</li>\n <li>Due date: 5/6/19</li>\n </ol>\n</details>\n```\n\nExample:\n```text\n<details open>\n <summary><h4>Overview</h4></summary>\n <ol>\n <li>Cash on hand: $500.00</li>\n <li>Current invoice: $75.30</li>\n <li>Due date: 5/6/19</li>\n </ol>\n</details>\n```\n\nExample:\n```text\n<details open>\n <summary><strong>Overview</strong></summary>\n <ol>\n <li>Cash on hand: $500.00</li>\n <li>Current invoice: $75.30</li>\n <li>Due date: 5/6/19</li>\n </ol>\n</details>\n```\n\nExample:\n```text\ndetails {\n font-size: 1rem;\n font-family: \"Open Sans\", \"Calibri\", sans-serif;\n border: solid;\n padding: 2px 6px;\n margin-bottom: 1em;\n}\n\ndetails:first-of-type summary::marker,\n:is(::-webkit-details-marker) {\n content: \"+ \";\n font-family: monospace;\n color: red;\n font-weight: bold;\n}\n\ndetails[open]:first-of-type summary::marker {\n content: \"โ \";\n}\n\ndetails:last-of-type summary {\n list-style: none;\n &::after {\n content: \"+\";\n color: white;\n background-color: darkgreen;\n border-radius: 1em;\n font-weight: bold;\n padding: 0 5px;\n margin-inline-start: 5px;\n }\n [open] &::after {\n content: \"โ\";\n }\n}\ndetails:last-of-type summary::-webkit-details-marker {\n display: none;\n}\n```\n\nExample:\n```text\n<h1>Quotes from Helen Keller</h1>\n\n<details>\n <summary>On women's rights</summary>\n <p>\n <q>We have prayed, we have coaxed, we have begged, for the vote, with the\n hope that men, out of chivalry, would bestow equal rights upon women and\n take them into partnership in the affairs of the state. We hoped that\n their common sense would triumph over prejudices and stupidity. We thought\n their boasted sense of justice would overcome the errors that so often\n fetter the human spirit; but we have always gone away empty-handed. We\n shall beg no more.</q>\n </p>\n</details>\n\n<details>\n <summary>On optimism</summary>\n <p>\n <q>Optimism is the faith that leads to achievement; nothing can be done\n without hope.</q>\n </p>\n</details>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.560Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":140,"estimatedTokens":663}}71{"id":"doc-source_html_media_or_image_source_element_html_m-2f369c9d","source":"documentation","title":"<source> HTML media or image source element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source","text":"Example:\n```text\n<video controls width=\"250\" height=\"200\" muted>\n <source src=\"/shared-assets/videos/flower.webm\" type=\"video/webm\" />\n <source src=\"/shared-assets/videos/flower.mp4\" type=\"video/mp4\" />\n Download the\n <a href=\"/shared-assets/videos/flower.webm\">WEBM</a>\n or\n <a href=\"/shared-assets/videos/flower.mp4\">MP4</a>\n video.\n</video>\n```\n\nExample:\n```text\n<video controls>\n <source src=\"foo.webm\" type=\"video/webm\" />\n <source src=\"foo.ogg\" type=\"video/ogg\" />\n <source src=\"foo.mov\" type=\"video/quicktime\" />\n I'm sorry; your browser doesn't support HTML video.\n</video>\n```\n\nExample:\n```text\n<video controls>\n <source src=\"foo-large.webm\" media=\"(width >= 800px)\" />\n <source src=\"foo.webm\" />\n I'm sorry; your browser doesn't support HTML video.\n</video>\n```\n\nExample:\n```text\n<picture>\n <source srcset=\"mdn-logo-wide.png\" media=\"(width >= 800px)\" />\n <source srcset=\"mdn-logo-medium.png\" media=\"(width >= 600px)\" />\n <img src=\"mdn-logo-narrow.png\" alt=\"MDN Web Docs\" />\n</picture>\n```\n\nExample:\n```text\n<picture>\n <source\n srcset=\"landscape.png\"\n media=\"(width >= 1000px)\"\n width=\"1000\"\n height=\"400\" />\n <source\n srcset=\"square.png\"\n media=\"(width >= 800px)\"\n width=\"800\"\n height=\"800\" />\n <source\n srcset=\"portrait.png\"\n media=\"(width >= 600px)\"\n width=\"600\"\n height=\"800\" />\n <img\n src=\"fallback.png\"\n alt=\"Image used when the browser does not support the sources\"\n width=\"500\"\n height=\"400\" />\n</picture>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.561Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":68,"estimatedTokens":378}}72{"id":"doc-selectedcontent_html_selected_option_display_ele-754a7383","source":"documentation","title":"<selectedcontent> HTML selected option display element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/selectedcontent","text":"Example:\n```text\n<select>\n <button>\n <selectedcontent></selectedcontent>\n </button>\n <option></option>\n ...\n</select>\n```\n\nExample:\n```text\nselectedcontent img {\n display: none;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.562Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":19,"estimatedTokens":52}}73{"id":"doc-thead_html_table_head_element_html_mdn-a86700e0","source":"documentation","title":"<thead> HTML table head element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead","text":"Example:\n```text\n<table>\n <caption>\n Council budget (in ยฃ) 2018\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Items</th>\n <th scope=\"col\">Expenditure</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Donuts</th>\n <td>3,000</td>\n </tr>\n <tr>\n <th scope=\"row\">Stationery</th>\n <td>18,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th scope=\"row\">Totals</th>\n <td>21,000</td>\n </tr>\n </tfoot>\n</table>\n```\n\nExample:\n```text\nthead,\ntfoot {\n background-color: #2c5e77;\n color: white;\n}\n\ntbody {\n background-color: #e4f0f5;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntd {\n text-align: center;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th>Student ID</th>\n <th>Name</th>\n <th>Major</th>\n <th>Credits</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>3741255</td>\n <td>Jones, Martha</td>\n <td>Computer Science</td>\n <td>240</td>\n </tr>\n <tr>\n <td>3971244</td>\n <td>Nim, Victor</td>\n <td>Russian Literature</td>\n <td>220</td>\n </tr>\n <tr>\n <td>4100332</td>\n <td>Petrov, Alexandra</td>\n <td>Astrophysics</td>\n <td>260</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\nthead {\n border-bottom: 2px solid rgb(160 160 160);\n text-align: center;\n background-color: #2c5e77;\n color: white;\n}\n\ntbody {\n background-color: #e4f0f5;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntbody > tr > td:last-of-type {\n text-align: center;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th rowspan=\"2\">Student ID</th>\n <th colspan=\"2\">Student</th>\n <th rowspan=\"2\">Major</th>\n <th rowspan=\"2\">Credits</th>\n </tr>\n <tr>\n <th>First name</th>\n <th>Last name</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>3741255</td>\n <td>Martha</td>\n <td>Jones</td>\n <td>Computer Science</td>\n <td>240</td>\n </tr>\n <tr>\n <td>3971244</td>\n <td>Victor</td>\n <td>Nim</td>\n <td>Russian Literature</td>\n <td>220</td>\n </tr>\n <tr>\n <td>4100332</td>\n <td>Alexandra</td>\n <td>Petrov</td>\n <td>Astrophysics</td>\n <td>260</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\nthead {\n border-bottom: 2px solid rgb(160 160 160);\n background-color: #2c5e77;\n color: white;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ntbody {\n background-color: #e4f0f5;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntbody > tr > td:last-of-type {\n text-align: center;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.562Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":209,"estimatedTokens":778}}74{"id":"doc-tfoot_html_table_foot_element_html_mdn-eb8cf903","source":"documentation","title":"<tfoot> HTML table foot element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot","text":"Example:\n```text\n<table>\n <caption>\n Council budget (in ยฃ) 2018\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Items</th>\n <th scope=\"col\">Expenditure</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Donuts</th>\n <td>3,000</td>\n </tr>\n <tr>\n <th scope=\"row\">Stationery</th>\n <td>18,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th scope=\"row\">Totals</th>\n <td>21,000</td>\n </tr>\n </tfoot>\n</table>\n```\n\nExample:\n```text\nthead,\ntfoot {\n background-color: #2c5e77;\n color: white;\n}\n\ntbody {\n background-color: #e4f0f5;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntd {\n text-align: center;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th>Student ID</th>\n <th>Name</th>\n <th>Major</th>\n <th>Credits</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>3741255</td>\n <td>Jones, Martha</td>\n <td>Computer Science</td>\n <td>240</td>\n </tr>\n <tr>\n <td>3971244</td>\n <td>Nim, Victor</td>\n <td>Russian Literature</td>\n <td>220</td>\n </tr>\n <tr>\n <td>4100332</td>\n <td>Petrov, Alexandra</td>\n <td>Astrophysics</td>\n <td>260</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th colspan=\"3\" scope=\"row\">Average Credits</th>\n <td>240</td>\n </tr>\n </tfoot>\n</table>\n```\n\nExample:\n```text\ntfoot {\n border-top: 3px dotted rgb(160 160 160);\n background-color: #2c5e77;\n color: white;\n}\n\ntfoot th {\n text-align: right;\n}\n\ntfoot td {\n font-weight: bold;\n}\n\nthead {\n border-bottom: 2px solid rgb(160 160 160);\n background-color: #2c5e77;\n color: white;\n}\n\ntbody {\n background-color: #e4f0f5;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntr > td:last-of-type {\n text-align: center;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.563Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":156,"estimatedTokens":552}}75{"id":"doc-td_html_table_data_cell_element_html_mdn-a169d78a","source":"documentation","title":"<td> HTML table data cell element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td","text":"Example:\n```text\n<table>\n <caption>\n Alien football stars\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Player</th>\n <th scope=\"col\">Gloobles</th>\n <th scope=\"col\">Za'taak</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">TR-7</th>\n <td>7</td>\n <td>4,569</td>\n </tr>\n <tr>\n <th scope=\"row\">Khiresh Odo</th>\n <td>7</td>\n <td>7,223</td>\n </tr>\n <tr>\n <th scope=\"row\">Mia Oolong</th>\n <td>9</td>\n <td>6,219</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth[scope=\"col\"] {\n background-color: #505050;\n color: white;\n}\n\nth[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n\ntd {\n text-align: center;\n}\n\ntr:nth-of-type(even) {\n background-color: #eeeeee;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>AL fah</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td>DELL tah</td>\n </tr>\n</table>\n```\n\nExample:\n```text\ntd,\nth {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntr:nth-of-type(odd) td {\n background-color: #eeeeee;\n}\n\ntr th[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>AL fah</td>\n <td rowspan=\"3\">ABC</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td colspan=\"2\">DELL tah</td>\n </tr>\n <tr>\n <th scope=\"row\">E</th>\n <td>Echo</td>\n <td colspan=\"2\">ECK oh</td>\n </tr>\n</table>\n```\n\nExample:\n```text\ntr:first-of-type td:last-of-type {\n width: 60px;\n background-color: #505050;\n color: white;\n font-weight: bold;\n text-align: center;\n}\n\ntd,\nth {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntr:nth-of-type(odd) td {\n background-color: #eeeeee;\n}\n\ntr th[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th id=\"a\" scope=\"row\">A</th>\n <td>Alfa</td>\n <td>AL fah</td>\n <td headers=\"a b c\" rowspan=\"3\">ABC</td>\n </tr>\n <tr>\n <th id=\"b\" scope=\"row\">B</th>\n <td>Bravo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th id=\"c\" scope=\"row\">C</th>\n <td>Charlie</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td colspan=\"2\">DELL tah</td>\n </tr>\n <tr>\n <th scope=\"row\">E</th>\n <td>Echo</td>\n <td colspan=\"2\">ECK oh</td>\n </tr>\n</table>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.564Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":216,"estimatedTokens":793}}76{"id":"doc-th_html_table_header_element_html_mdn-0cfd899a","source":"documentation","title":"<th> HTML table header element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th","text":"Example:\n```text\n<table>\n <caption>\n Alien football stars\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Player</th>\n <th scope=\"col\">Gloobles</th>\n <th scope=\"col\">Za'taak</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">TR-7</th>\n <td>7</td>\n <td>4,569</td>\n </tr>\n <tr>\n <th scope=\"row\">Khiresh Odo</th>\n <td>7</td>\n <td>7,223</td>\n </tr>\n <tr>\n <th scope=\"row\">Mia Oolong</th>\n <td>9</td>\n <td>6,219</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth[scope=\"col\"] {\n background-color: #505050;\n color: white;\n}\n\nth[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n\ntd {\n text-align: center;\n}\n\ntr:nth-of-type(even) {\n background-color: #eeeeee;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th scope=\"col\">Symbol</th>\n <th scope=\"col\">Code word</th>\n <th scope=\"col\">Pronunciation</th>\n </tr>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>AL fah</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td>DELL tah</td>\n </tr>\n</table>\n```\n\nExample:\n```text\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth[scope=\"col\"] {\n background-color: #505050;\n color: white;\n}\n\nth[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n\ntr:nth-of-type(odd) td {\n background-color: #eeeeee;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th scope=\"col\" rowspan=\"2\">Symbol</th>\n <th scope=\"col\" rowspan=\"2\">Code word</th>\n <th scope=\"col\" colspan=\"2\">Pronunciation</th>\n </tr>\n <tr>\n <th scope=\"col\">IPA</th>\n <th scope=\"col\">Respelling</th>\n </tr>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>หรฆlfa</td>\n <td>AL fah</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>หbraหหvo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>หtสษหli</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td>หdeltษ</td>\n <td>DELL tah</td>\n </tr>\n</table>\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth[scope=\"col\"] {\n background-color: #505050;\n color: white;\n}\n\nth[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n\ntr:nth-of-type(odd) td {\n background-color: #eeeeee;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th scope=\"col\" rowspan=\"2\">Symbol</th>\n <th scope=\"col\" rowspan=\"2\">Code word</th>\n <th scope=\"col\" colspan=\"2\" id=\"p\" headers=\"i r\">Pronunciation</th>\n </tr>\n <tr>\n <th scope=\"col\" id=\"i\" headers=\"p\">IPA</th>\n <th scope=\"col\" id=\"r\" headers=\"p\">Respelling</th>\n </tr>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>หรฆlfa</td>\n <td>AL fah</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>หbraหหvo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>หtสษหli</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td>หdeltษ</td>\n <td>DELL tah</td>\n </tr>\n</table>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.565Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":245,"estimatedTokens":955}}77{"id":"doc-sup_html_superscript_element_html_mdn-f5107697","source":"documentation","title":"<sup> HTML superscript element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sup","text":"Example:\n```text\n<p>\n The <em>Pythagorean theorem</em> is often expressed as the following equation:\n</p>\n\n<p>\n <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>\n</p>\n```\n\nExample:\n```text\np {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n```\n\nExample:\n```typescript\n<p>\n One of the most common equations in all of physics is <var>E</var>=<var>m</var\n ><var>c</var><sup>2</sup>.\n</p>\n```\n\nExample:\n```text\n<p>Robert a prรฉsentรฉ son rapport ร M<sup>lle</sup> Bernard.</p>\n```\n\nExample:\n```text\n<p>\n The ordinal number \"fifth\" can be abbreviated in various languages as follows:\n</p>\n<ul>\n <li>English: 5<sup>th</sup></li>\n <li>French: 5<sup>รจme</sup></li>\n</ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.565Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":45,"estimatedTokens":179}}78{"id":"doc-u_html_unarticulated_annotation_underline_elemen-f9ab43b4","source":"documentation","title":"<u> HTML unarticulated annotation (underline) element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/u","text":"Example:\n```text\n<p>\n You could use this element to highlight <u>speling</u> mistakes, so the writer\n can <u>corect</u> them.\n</p>\n```\n\nExample:\n```text\np {\n margin: 0;\n}\n\nu {\n text-decoration: red wavy underline;\n}\n```\n\nExample:\n```text\n<p>This paragraph includes a <u class=\"spelling\">wrnogly</u> spelled word.</p>\n```\n\nExample:\n```text\nu.spelling {\n text-decoration: red wavy underline;\n}\n```\n\nExample:\n```text\n<span class=\"underline\">Today's Special</span>\n<br />\nChicken Noodle Soup With Carrots\n```\n\nExample:\n```text\n.underline {\n text-decoration: underline;\n}\n```\n\nExample:\n```text\n<p>The class read <cite>Moby-Dick</cite> in the first term.</p>\n```\n\nExample:\n```text\ncite {\n font-style: normal;\n text-decoration: underline;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.566Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":59,"estimatedTokens":190}}79{"id":"doc-var_html_variable_element_html_mdn-13204207","source":"documentation","title":"<var> HTML variable element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var","text":"Example:\n```text\n<p>\n The volume of a box is <var>l</var> ร <var>w</var> ร <var>h</var>, where\n <var>l</var> represents the length, <var>w</var> the width and\n <var>h</var> the height of the box.\n</p>\n```\n\nExample:\n```text\nvar {\n font-weight: bold;\n}\n```\n\nExample:\n```text\nvar {\n font-style: normal;\n}\n```\n\nExample:\n```text\n<p>An algebraic equation: <var>x</var> = <var>y</var> + 2</p>\n```\n\nExample:\n```text\nvar {\n font:\n bold 15px \"Courier\",\n \"Courier New\",\n monospace;\n}\n```\n\nExample:\n```text\n<p>\n The variables <var>minSpeed</var> and <var>maxSpeed</var> control the minimum\n and maximum speed of the apparatus in revolutions per minute (RPM).\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.566Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":47,"estimatedTokens":172}}80{"id":"doc-textarea_html_textarea_element_html_mdn-f35d160c","source":"documentation","title":"<textarea> HTML textarea element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea","text":"Example:\n```text\n<label for=\"story\">Tell us your story:</label>\n\n<textarea id=\"story\" name=\"story\" rows=\"5\" cols=\"33\">\nIt was a dark and stormy night...\n</textarea>\n```\n\nExample:\n```text\nlabel,\ntextarea {\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ntextarea {\n padding: 10px;\n max-width: 100%;\n line-height: 1.5;\n border-radius: 5px;\n border: 1px solid #cccccc;\n box-shadow: 1px 1px 1px #999999;\n}\n\nlabel {\n display: block;\n margin-bottom: 10px;\n}\n```\n\nExample:\n```text\ntextarea {\n resize: none;\n}\n```\n\nExample:\n```text\ntextarea:invalid {\n border: 2px dashed red;\n}\n\ntextarea:valid {\n border: 2px solid lime;\n}\n```\n\nExample:\n```text\n<textarea name=\"textarea\" rows=\"5\" cols=\"15\">Write something here</textarea>\n```\n\nExample:\n```text\ntextarea {\n max-height: 130px;\n max-width: 500px;\n}\n```\n\nExample:\n```text\n<textarea name=\"textarea\" rows=\"5\" cols=\"30\" minlength=\"10\" maxlength=\"20\">\nWrite something hereโฆ\n</textarea>\n```\n\nExample:\n```text\n<textarea\n name=\"textarea\"\n rows=\"5\"\n cols=\"30\"\n placeholder=\"Comment text.\"></textarea>\n```\n\nExample:\n```text\n<textarea name=\"textarea\" rows=\"5\" cols=\"30\" readonly>\nI am a read-only textarea.\n</textarea>\n<textarea name=\"textarea\" rows=\"5\" cols=\"30\" disabled>\nI am a disabled textarea.\n</textarea>\n```\n\nExample:\n```text\ntextarea {\n display: block;\n resize: horizontal;\n max-width: 500px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.567Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":99,"estimatedTokens":342}}81{"id":"doc-table_html_table_element_html_mdn-8dc103a1","source":"documentation","title":"<table> HTML table element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table","text":"Example:\n```text\n<table>\n <caption>\n Front-end web developer course 2021\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Person</th>\n <th scope=\"col\">Most interest in</th>\n <th scope=\"col\">Age</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Chris</th>\n <td>HTML tables</td>\n <td>22</td>\n </tr>\n <tr>\n <th scope=\"row\">Dennis</th>\n <td>Web accessibility</td>\n <td>45</td>\n </tr>\n <tr>\n <th scope=\"row\">Sarah</th>\n <td>JavaScript frameworks</td>\n <td>29</td>\n </tr>\n <tr>\n <th scope=\"row\">Karen</th>\n <td>Web performance</td>\n <td>36</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th scope=\"row\" colspan=\"2\">Average age</th>\n <td>33</td>\n </tr>\n </tfoot>\n</table>\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n font-weight: bold;\n}\n\nthead,\ntfoot {\n background-color: rgb(228 240 245);\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntd:last-of-type {\n text-align: center;\n}\n\ntbody > tr:nth-of-type(even) {\n background-color: rgb(237 238 242);\n}\n\ntfoot th {\n text-align: right;\n}\n\ntfoot td {\n font-weight: bold;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th>Name</th>\n <th>Age</th>\n </tr>\n <tr>\n <td>Maria Sanchez</td>\n <td>28</td>\n </tr>\n <tr>\n <td>Michael Johnson</td>\n <td>34</td>\n </tr>\n</table>\n```\n\nExample:\n```text\n<table>\n <tr>\n <th>Name</th>\n <th>ID</th>\n <th>Member Since</th>\n <th>Balance</th>\n </tr>\n <tr>\n <th>Margaret Nguyen</th>\n <td>427311</td>\n <td><time datetime=\"2010-06-03\">June 3, 2010</time></td>\n <td>0.00</td>\n </tr>\n <tr>\n <th>Edvard Galinski</th>\n <td>533175</td>\n <td><time datetime=\"2011-01-13\">January 13, 2011</time></td>\n <td>37.00</td>\n </tr>\n <tr>\n <th>Hoshi Nakamura</th>\n <td>601942</td>\n <td><time datetime=\"2012-07-23\">July 23, 2012</time></td>\n <td>15.00</td>\n </tr>\n</table>\n```\n\nExample:\n```text\ntable {\n border: 2px solid rgb(140 140 140);\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <th scope=\"col\">Name</th>\n <th scope=\"col\">ID</th>\n <th scope=\"col\">Member Since</th>\n <th scope=\"col\">Balance</th>\n </tr>\n <tr>\n <th scope=\"row\">Margaret Nguyen</th>\n <td>427311</td>\n <td><time datetime=\"2010-06-03\">June 3, 2010</time></td>\n <td>0.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Edvard Galinski</th>\n <td>533175</td>\n <td><time datetime=\"2011-01-13\">January 13, 2011</time></td>\n <td>37.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Hoshi Nakamura</th>\n <td>601942</td>\n <td><time datetime=\"2012-07-23\">July 23, 2012</time></td>\n <td>15.00</td>\n </tr>\n</table>\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th scope=\"col\">Name</th>\n <th scope=\"col\">ID</th>\n <th scope=\"col\">Member Since</th>\n <th scope=\"col\">Balance</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Margaret Nguyen</th>\n <td>427311</td>\n <td><time datetime=\"2010-06-03\">June 3, 2010</time></td>\n <td>0.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Edvard Galinski</th>\n <td>533175</td>\n <td><time datetime=\"2011-01-13\">January 13, 2011</time></td>\n <td>37.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Hoshi Nakamura</th>\n <td>601942</td>\n <td><time datetime=\"2012-07-23\">July 23, 2012</time></td>\n <td>15.00</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th scope=\"col\" rowspan=\"2\">Name</th>\n <th scope=\"col\" rowspan=\"2\">ID</th>\n <th scope=\"col\" colspan=\"2\">Membership Dates</th>\n <th scope=\"col\" rowspan=\"2\">Balance</th>\n </tr>\n <tr>\n <th scope=\"col\">Joined</th>\n <th scope=\"col\">Canceled</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Margaret Nguyen</th>\n <td>427311</td>\n <td><time datetime=\"2010-06-03\">June 3, 2010</time></td>\n <td>n/a</td>\n <td>0.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Edvard Galinski</th>\n <td>533175</td>\n <td><time datetime=\"2011-01-13\">January 13, 2011</time></td>\n <td><time datetime=\"2017-04-08\">April 8, 2017</time></td>\n <td>37.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Hoshi Nakamura</th>\n <td>601942</td>\n <td><time datetime=\"2012-07-23\">July 23, 2012</time></td>\n <td>n/a</td>\n <td>15.00</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\n<table>\n <caption>\n Status of the club members 2021\n </caption>\n <thead>\n <tr>\n <th scope=\"col\" rowspan=\"2\">Name</th>\n <th scope=\"col\" rowspan=\"2\">ID</th>\n <th scope=\"col\" colspan=\"2\">Membership Dates</th>\n <th scope=\"col\" rowspan=\"2\">Balance</th>\n </tr>\n <tr>\n <th scope=\"col\">Joined</th>\n <th scope=\"col\">Canceled</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Margaret Nguyen</th>\n <td>427311</td>\n <td><time datetime=\"2010-06-03\">June 3, 2010</time></td>\n <td>n/a</td>\n <td>0.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Edvard Galinski</th>\n <td>533175</td>\n <td><time datetime=\"2011-01-13\">January 13, 2011</time></td>\n <td><time datetime=\"2017-04-08\">April 8, 2017</time></td>\n <td>37.00</td>\n </tr>\n <tr>\n <th scope=\"row\">Hoshi Nakamura</th>\n <td>601942</td>\n <td><time datetime=\"2012-07-23\">July 23, 2012</time></td>\n <td>n/a</td>\n <td>15.00</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th scope=\"row\" colspan=\"4\">Total balance</th>\n <td>52.00</td>\n </tr>\n </tfoot>\n</table>\n```\n\nExample:\n```text\ntable {\n border: 2px solid rgb(140 140 140);\n font:\n 16px \"Open Sans\",\n \"Helvetica\",\n \"Arial\",\n sans-serif;\n}\n\nthead > tr,\ntfoot > tr {\n background-color: rgb(228 240 245);\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n border: 2px solid rgb(140 140 140);\n font:\n 16px \"Open Sans\",\n \"Helvetica\",\n \"Arial\",\n sans-serif;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n font-weight: bold;\n}\n```\n\nExample:\n```text\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 4px 6px;\n}\n\nth {\n vertical-align: bottom;\n}\n```\n\nExample:\n```text\nthead > tr {\n background-color: rgb(228 240 245);\n}\n\nthead > tr:nth-of-type(2) {\n border-bottom: 2px solid rgb(140 140 140);\n}\n```\n\nExample:\n```text\nthead > tr:last-of-type > th:nth-of-type(1) {\n background-color: rgb(225 255 225);\n}\n\nthead > tr:last-of-type > th:nth-of-type(2) {\n background-color: rgb(255 225 225);\n}\n```\n\nExample:\n```text\ntbody > tr > th:first-of-type {\n text-align: left;\n background-color: rgb(225 229 244);\n}\n```\n\nExample:\n```text\ntbody > tr:nth-of-type(even) {\n background-color: rgb(237 238 242);\n}\n```\n\nExample:\n```text\ntbody > tr > td:last-of-type {\n text-align: right;\n}\n```\n\nExample:\n```text\ntfoot > tr {\n border-top: 2px dashed rgb(140 140 140);\n background-color: rgb(228 240 245);\n}\n\ntfoot th,\ntfoot td {\n text-align: right;\n font-weight: bold;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th>1<sup>3</sup> equals:</th>\n <th>2<sup>3</sup> equals:</th>\n <th>3<sup>3</sup> equals:</th>\n <th>4<sup>3</sup> equals:</th>\n <th>5<sup>3</sup> equals:</th>\n <th>6<sup>3</sup> equals:</th>\n <th>7<sup>3</sup> equals:</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>row 1: 1</td>\n <td>row 1: 8</td>\n <td>row 1: 27</td>\n <td>row 1: 64</td>\n <td>row 1: 125</td>\n <td>row 1: 216</td>\n <td>row 1: 343</td>\n </tr>\n <tr>\n <td>row 2: 1</td>\n <td>row 2: 8</td>\n <td>row 2: 27</td>\n <td>row 2: 64</td>\n <td>row 2: 125</td>\n <td>row 2: 216</td>\n <td>row 2: 343</td>\n </tr>\n <tr>\n <td>row 3: 1</td>\n <td>row 3: 8</td>\n <td>row 3: 27</td>\n <td>row 3: 64</td>\n <td>row 3: 125</td>\n <td>row 3: 216</td>\n <td>row 3: 343</td>\n </tr>\n <tr>\n <td>row 4: 1</td>\n <td>row 4: 8</td>\n <td>row 4: 27</td>\n <td>row 4: 64</td>\n <td>row 4: 125</td>\n <td>row 4: 216</td>\n <td>row 4: 343</td>\n </tr>\n <tr>\n <td>row 5: 1</td>\n <td>row 5: 8</td>\n <td>row 5: 27</td>\n <td>row 5: 64</td>\n <td>row 5: 125</td>\n <td>row 5: 216</td>\n <td>row 5: 343</td>\n </tr>\n <tr>\n <td>row 6: 1</td>\n <td>row 6: 8</td>\n <td>row 6: 27</td>\n <td>row 6: 64</td>\n <td>row 6: 125</td>\n <td>row 6: 216</td>\n <td>row 6: 343</td>\n </tr>\n <tr>\n <td>row 7: 1</td>\n <td>row 7: 8</td>\n <td>row 7: 27</td>\n <td>row 7: 64</td>\n <td>row 7: 125</td>\n <td>row 7: 216</td>\n <td>row 7: 343</td>\n </tr>\n <tr>\n <td>row 8: 1</td>\n <td>row 8: 8</td>\n <td>row 8: 27</td>\n <td>row 8: 64</td>\n <td>row 8: 125</td>\n <td>row 8: 216</td>\n <td>row 8: 343</td>\n </tr>\n <tr>\n <td>row 9: 1</td>\n <td>row 9: 8</td>\n <td>row 9: 27</td>\n <td>row 9: 64</td>\n <td>row 9: 125</td>\n <td>row 9: 216</td>\n <td>row 9: 343</td>\n </tr>\n <tr>\n <td>row 10: 1</td>\n <td>row 10: 8</td>\n <td>row 10: 27</td>\n <td>row 10: 64</td>\n <td>row 10: 125</td>\n <td>row 10: 216</td>\n <td>row 10: 343</td>\n </tr>\n <tr>\n <td>row 11: 1</td>\n <td>row 11: 8</td>\n <td>row 11: 27</td>\n <td>row 11: 64</td>\n <td>row 11: 125</td>\n <td>row 11: 216</td>\n <td>row 11: 343</td>\n </tr>\n <tr>\n <td>row 12: 1</td>\n <td>row 12: 8</td>\n <td>row 12: 27</td>\n <td>row 12: 64</td>\n <td>row 12: 125</td>\n <td>row 12: 216</td>\n <td>row 12: 343</td>\n </tr>\n <tr>\n <td>row 13: 1</td>\n <td>row 13: 8</td>\n <td>row 13: 27</td>\n <td>row 13: 64</td>\n <td>row 13: 125</td>\n <td>row 13: 216</td>\n <td>row 13: 343</td>\n </tr>\n <tr>\n <td>row 14: 1</td>\n <td>row 14: 8</td>\n <td>row 14: 27</td>\n <td>row 14: 64</td>\n <td>row 14: 125</td>\n <td>row 14: 216</td>\n <td>row 14: 343</td>\n </tr>\n <tr>\n <td>row 15: 1</td>\n <td>row 15: 8</td>\n <td>row 15: 27</td>\n <td>row 15: 64</td>\n <td>row 15: 125</td>\n <td>row 15: 216</td>\n <td>row 15: 343</td>\n </tr>\n <tr>\n <td>row 16: 1</td>\n <td>row 16: 8</td>\n <td>row 16: 27</td>\n <td>row 16: 64</td>\n <td>row 16: 125</td>\n <td>row 16: 216</td>\n <td>row 16: 343</td>\n </tr>\n <tr>\n <td>row 17: 1</td>\n <td>row 17: 8</td>\n <td>row 17: 27</td>\n <td>row 17: 64</td>\n <td>row 17: 125</td>\n <td>row 17: 216</td>\n <td>row 17: 343</td>\n </tr>\n <tr>\n <td>row 18: 1</td>\n <td>row 18: 8</td>\n <td>row 18: 27</td>\n <td>row 18: 64</td>\n <td>row 18: 125</td>\n <td>row 18: 216</td>\n <td>row 18: 343</td>\n </tr>\n <tr>\n <td>row 19: 1</td>\n <td>row 19: 8</td>\n <td>row 19: 27</td>\n <td>row 19: 64</td>\n <td>row 19: 125</td>\n <td>row 19: 216</td>\n <td>row 19: 343</td>\n </tr>\n <tr>\n <td>row 20: 1</td>\n <td>row 20: 8</td>\n <td>row 20: 27</td>\n <td>row 20: 64</td>\n <td>row 20: 125</td>\n <td>row 20: 216</td>\n <td>row 20: 343</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntable,\nth,\ntd {\n border: 1px solid black;\n}\n\ntable {\n overflow: auto;\n width: 100%;\n max-width: 400px;\n height: 240px;\n display: block;\n margin: 0 auto;\n border-spacing: 0;\n}\n\ntbody {\n white-space: nowrap;\n}\n\nth,\ntd {\n padding: 5px 10px;\n border-top-width: 0;\n border-left-width: 0;\n}\n\nth {\n position: sticky;\n top: 0;\n background: white;\n vertical-align: bottom;\n}\n\nth:last-child,\ntd:last-child {\n border-right-width: 0;\n}\n\ntr:last-child td {\n border-bottom-width: 0;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.569Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":662,"estimatedTokens":3031}}82{"id":"doc-time_html_time_date_element_html_mdn-6e9fd353","source":"documentation","title":"<time> HTML time (date) element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time","text":"Example:\n```text\n<p>\n The Cure will be celebrating their 40th anniversary on\n <time datetime=\"2018-07-07\">July 7</time> in London's Hyde Park.\n</p>\n\n<p>\n The concert starts at <time datetime=\"20:00\">20:00</time> and you'll be able\n to enjoy the band for at least <time datetime=\"PT2H30M\">2h 30m</time>.\n</p>\n```\n\nExample:\n```text\ntime {\n font-weight: bold;\n}\n```\n\nExample:\n```text\n<p>The concert starts at <time datetime=\"2018-07-07T20:00:00\">20:00</time>.</p>\n```\n\nExample:\n```text\n<p>\n The concert took place on <time datetime=\"2001-05-15T19:00\">May 15</time>.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.569Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":33,"estimatedTokens":148}}83{"id":"doc-tbody_html_table_body_element_html_mdn-6ca8d866","source":"documentation","title":"<tbody> HTML table body element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody","text":"Example:\n```text\n<table>\n <caption>\n Council budget (in ยฃ) 2018\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Items</th>\n <th scope=\"col\">Expenditure</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Donuts</th>\n <td>3,000</td>\n </tr>\n <tr>\n <th scope=\"row\">Stationery</th>\n <td>18,000</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th scope=\"row\">Totals</th>\n <td>21,000</td>\n </tr>\n </tfoot>\n</table>\n```\n\nExample:\n```text\nthead,\ntfoot {\n background-color: #2c5e77;\n color: white;\n}\n\ntbody {\n background-color: #e4f0f5;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\ntd {\n text-align: center;\n}\n```\n\nExample:\n```text\n<table>\n <tr>\n <td>3741255</td>\n <td>Jones, Martha</td>\n <td>Computer Science</td>\n <td>240</td>\n </tr>\n <tr>\n <td>3971244</td>\n <td>Nim, Victor</td>\n <td>Russian Literature</td>\n <td>220</td>\n </tr>\n <tr>\n <td>4100332</td>\n <td>Petrov, Alexandra</td>\n <td>Astrophysics</td>\n <td>260</td>\n </tr>\n</table>\n```\n\nExample:\n```text\ntbody {\n background-color: #e4f0f5;\n}\n\ntbody > tr > td:last-of-type {\n width: 60px;\n text-align: center;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th>Student ID</th>\n <th>Name</th>\n <th>Major</th>\n <th>Credits</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>3741255</td>\n <td>Jones, Martha</td>\n <td>Computer Science</td>\n <td>240</td>\n </tr>\n <tr>\n <td>3971244</td>\n <td>Nim, Victor</td>\n <td>Russian Literature</td>\n <td>220</td>\n </tr>\n <tr>\n <td>4100332</td>\n <td>Petrov, Alexandra</td>\n <td>Astrophysics</td>\n <td>260</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntbody {\n background-color: #e4f0f5;\n}\n\ntbody > tr > td:last-of-type {\n text-align: center;\n}\n\nthead {\n border-bottom: 2px solid rgb(160 160 160);\n background-color: #2c5e77;\n color: white;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th>Student ID</th>\n <th>Name</th>\n <th>Credits</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th colspan=\"3\">Computer Science</th>\n </tr>\n <tr>\n <td>3741255</td>\n <td>Jones, Martha</td>\n <td>240</td>\n </tr>\n <tr>\n <td>4077830</td>\n <td>Pierce, Benjamin</td>\n <td>200</td>\n </tr>\n <tr>\n <td>5151701</td>\n <td>Kirk, James</td>\n <td>230</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <th colspan=\"3\">Russian Literature</th>\n </tr>\n <tr>\n <td>3971244</td>\n <td>Nim, Victor</td>\n <td>220</td>\n </tr>\n </tbody>\n <tbody>\n <tr>\n <th colspan=\"3\">Astrophysics</th>\n </tr>\n <tr>\n <td>4100332</td>\n <td>Petrov, Alexandra</td>\n <td>260</td>\n </tr>\n <tr>\n <td>8892377</td>\n <td>Toyota, Hiroko</td>\n <td>240</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntbody > tr > th {\n border-top: 2px solid rgb(160 160 160);\n border-bottom: 1px solid rgb(140 140 140);\n background-color: #e4f0f5;\n font-weight: normal;\n}\n\ntbody {\n background-color: whitesmoke;\n}\n\nthead {\n background-color: #2c5e77;\n color: white;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 6px 8px;\n text-align: left;\n}\n\ntbody > tr > td:last-of-type {\n text-align: center;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.571Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":287,"estimatedTokens":1052}}84{"id":"doc-template_html_content_template_element_html_mdn-f7e87069","source":"documentation","title":"<template> HTML content template element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template","text":"Example:\n```text\n<table id=\"producttable\">\n <thead>\n <tr>\n <td>UPC_Code</td>\n <td>Product_Name</td>\n </tr>\n </thead>\n <tbody>\n <!-- existing data could optionally be included here -->\n </tbody>\n</table>\n\n<template id=\"productrow\">\n <tr>\n <td class=\"record\"></td>\n <td></td>\n </tr>\n</template>\n```\n\nExample:\n```javascript\n// Test to see if the browser supports the HTML template element by checking\n// for the presence of the template element's content attribute.\nif (\"content\" in document.createElement(\"template\")) {\n // Instantiate the table with the existing HTML tbody\n // and the row with the template\n const tbody = document.querySelector(\"tbody\");\n const template = document.querySelector(\"#productrow\");\n\n // Clone the new row and insert it into the table\n const clone = document.importNode(template.content, true);\n let td = clone.querySelectorAll(\"td\");\n td[0].textContent = \"1235646565\";\n td[1].textContent = \"Stuff\";\n\n tbody.appendChild(clone);\n\n // Clone the new row and insert it into the table\n const clone2 = document.importNode(template.content, true);\n td = clone2.querySelectorAll(\"td\");\n td[0].textContent = \"0384928528\";\n td[1].textContent = \"Acme Kidney Beans 2\";\n\n tbody.appendChild(clone2);\n} else {\n // Find another way to add the rows to the table because\n // the HTML template element is not supported.\n}\n```\n\nExample:\n```text\ntable {\n background: black;\n}\ntable td {\n background: white;\n}\n```\n\nExample:\n```text\n<p hidden>\n โ Your browser doesn't support <code>shadowrootmode</code> attribute yet.\n</p>\n<article>\n <style>\n p {\n padding: 8px;\n background-color: wheat;\n }\n </style>\n <p>I'm in the DOM.</p>\n</article>\n<article>\n <template shadowrootmode=\"open\">\n <style>\n p {\n padding: 8px;\n background-color: plum;\n }\n </style>\n <p>I'm in the shadow DOM.</p>\n </template>\n</article>\n```\n\nExample:\n```javascript\nconst isShadowRootModeSupported = Object.hasOwn(\n HTMLTemplateElement.prototype,\n \"shadowRootMode\",\n);\n\ndocument\n .querySelector(\"p[hidden]\")\n .toggleAttribute(\"hidden\", isShadowRootModeSupported);\n```\n\nExample:\n```text\ndiv:focus {\n border: 2px solid red;\n}\n```\n\nExample:\n```text\n<article id=\"host\">\n <template shadowrootmode=\"open\" shadowrootslotassignment=\"named\">\n <style>\n .header {\n background-color: plum;\n }\n .meta {\n background-color: green;\n }\n .body {\n background-color: lightblue;\n }\n </style>\n\n <h2 class=\"header\">\n <slot name=\"title\"></slot>\n </h2>\n\n <div class=\"meta\">\n <slot name=\"meta\"></slot>\n </div>\n\n <div class=\"body\">\n <slot></slot>\n </div>\n </template>\n\n <p>\n Text 1 with no slot attribute. Goes into default (unnamed) slot inside the\n \"body\" div.\n </p>\n <span slot=\"title\">Text for the title slot</span>\n <span slot=\"meta\">Text for the meta slot</span>\n <p>\n Text 2 with no slot attribute. Also goes into default (unnamed) slot inside\n the \"body\" div.\n </p>\n</article>\n```\n\nExample:\n```text\n<p id=\"support-warning\" hidden>\n โ Your browser doesn't support the\n <code>shadowrootslotassignment</code> attribute yet.\n</p>\n```\n\nExample:\n```text\n<article id=\"host\">\n <template shadowrootmode=\"open\" shadowrootslotassignment=\"manual\">\n <style>\n .header {\n background-color: plum;\n }\n .meta {\n background-color: green;\n }\n .body {\n background-color: lightblue;\n }\n </style>\n\n <h2 class=\"header\">\n <slot id=\"titleSlot\"></slot>\n </h2>\n\n <div class=\"meta\">\n <slot id=\"metaSlot\"></slot>\n </div>\n\n <div class=\"body\">\n <slot id=\"bodySlot\"></slot>\n </div>\n </template>\n\n <span id=\"text_title\">Text for the title slot</span>\n <span id=\"text_meta\">Text for the meta slot</span>\n <p id=\"text_body_1\">Text 1 for body slot.</p>\n <p id=\"text_body_2\">Text 2 for body slot.</p>\n</article>\n```\n\nExample:\n```javascript\nconst host = document.querySelector(\"#host\");\nconst shadow = host.shadowRoot;\n\n// 1. Target your slots\nconst titleSlot = shadow.querySelector(\"#titleSlot\");\nconst metaSlot = shadow.querySelector(\"#metaSlot\");\nconst bodySlot = shadow.querySelector(\"#bodySlot\");\n\n// 2. Target the Elements to slot\nconst body1Text = document.querySelector(\"#text_body_1\");\nconst body2Text = document.querySelector(\"#text_body_2\");\nconst titleText = document.querySelector(\"#text_title\");\nconst metaText = document.querySelector(\"#text_meta\");\n\n// 3. Manually assign them\ntitleSlot.assign(titleText);\nmetaSlot.assign(metaText);\nbodySlot.assign(body2Text, body1Text);\n```\n\nExample:\n```javascript\nconst isShadowRootSlotAssignmentSupported = Object.hasOwn(\n HTMLTemplateElement.prototype,\n \"shadowRootSlotAssignment\",\n);\n\ndocument\n .querySelector(\"p[hidden]\")\n .toggleAttribute(\"hidden\", isShadowRootSlotAssignmentSupported);\n```\n\nExample:\n```text\n<div id=\"container\"></div>\n\n<template id=\"template\">\n <div>Click me</div>\n</template>\n```\n\nExample:\n```javascript\nconst container = document.getElementById(\"container\");\nconst template = document.getElementById(\"template\");\n\nfunction clickHandler(event) {\n event.target.append(\" โ Clicked this div\");\n}\n\nconst firstClone = document.importNode(template.content, true);\nfirstClone.addEventListener(\"click\", clickHandler);\ncontainer.appendChild(firstClone);\n\nconst secondClone = document.importNode(template.content, true);\nsecondClone.children[0].addEventListener(\"click\", clickHandler);\ncontainer.appendChild(secondClone);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.573Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":257,"estimatedTokens":1386}}85{"id":"doc-content_categories_html_mdn-7dee7eea","source":"documentation","title":"Content categories - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories","text":"Example:\n```text\n<ruby>\n Text before\n <ins>\n <!-- Invalid: rt cannot be placed inside ins here -->\n <rt>Pronunciation</rt>\n </ins>\n</ruby>\n```\n\nExample:\n```text\n<ruby>\n Text before\n <!-- Valid: ins can be inside ruby, and rt can be inside ruby -->\n <ins>Inserted text</ins>\n <rt>Pronunciation</rt>\n</ruby>\n```\n\nExample:\n```text\n<ruby>\n Text before\n <!-- Valid: rt can be inside ruby, and ins can be inside rt -->\n <rt><ins>Pronunciation</ins></rt>\n</ruby>\n```\n\nExample:\n```text\n<ul>\n <del>\n <li>Oranges</li>\n <li>Toilet paper</li>\n </del>\n <li>Toothpaste</li>\n</ul>\n```\n\nExample:\n```text\n<ul>\n <li><del>Oranges</del></li>\n <li><del>Toilet paper</del></li>\n <li>Toothpaste</li>\n</ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.574Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":51,"estimatedTokens":182}}86{"id":"doc-use_data_attributes_html_mdn-e00c8208","source":"documentation","title":"Use data attributes - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes","text":"Example:\n```text\n<main>\n <article\n id=\"electric-cars\"\n data-columns=\"3\"\n data-index-number=\"12314\"\n data-parent=\"cars\">\n <!-- Electric car content -->\n </article>\n\n <article\n id=\"solar-cars\"\n data-columns=\"3\"\n data-index-number=\"12315\"\n data-parent=\"cars\">\n <!-- Solar car content -->\n </article>\n\n <article\n id=\"flying-cars\"\n data-columns=\"4\"\n data-index-number=\"12316\"\n data-parent=\"cars\">\n <!-- Flying car content -->\n </article>\n</main>\n```\n\nExample:\n```javascript\nconst article = document.querySelector(\"#electric-cars\");\n// The following would also work:\n// const article = document.getElementById(\"electric-cars\")\n\narticle.dataset.columns; // \"3\"\narticle.dataset.indexNumber; // \"12314\"\narticle.dataset.parent; // \"cars\"\n```\n\nExample:\n```javascript\n// Find all elements with a data-columns attribute\nconst articles = document.querySelectorAll(\"[data-columns]\");\n\n// Find all elements with data-columns=\"3\"\nconst threeColumnArticles = document.querySelectorAll('[data-columns=\"3\"]');\n// You can then iterate over the results\nthreeColumnArticles.forEach((article) => {\n console.log(article.dataset.indexNumber);\n});\n```\n\nExample:\n```text\narticle::before {\n content: attr(data-parent);\n}\n```\n\nExample:\n```text\narticle[data-columns=\"3\"] {\n width: 400px;\n}\narticle[data-columns=\"4\"] {\n width: 600px;\n}\n```\n\nExample:\n```text\n<div class=\"callout callout--note\">...</div>\n<div class=\"callout callout--warning\">...</div>\n```\n\nExample:\n```text\n.callout {\n margin: 0.5em 0;\n padding: 0.5em;\n border-radius: 4px;\n border-width: 2px;\n border-style: solid;\n}\n\n.callout--note {\n border-color: rgb(15 15 235);\n background-color: rgb(15 15 235 / 0.2);\n}\n.callout--warning {\n border-color: rgb(235 15 15);\n background-color: rgb(235 15 15 / 0.2);\n}\n```\n\nExample:\n```text\n<div class=\"callout\">...</div>\n<div class=\"callout\" data-variant=\"note\">...</div>\n<div class=\"callout\" data-variant=\"warning\">...</div>\n```\n\nExample:\n```text\n.callout {\n margin: 0.5em 0;\n padding: 0.5em;\n border-radius: 4px;\n border-width: 2px;\n border-style: solid;\n}\n\n/* Default style */\n.callout:not([data-variant]) {\n border-color: rgb(15 15 15);\n background-color: rgb(15 15 15 / 0.2);\n}\n.callout[data-variant=\"note\"] {\n border-color: rgb(15 15 235);\n background-color: rgb(15 15 235 / 0.2);\n}\n.callout[data-variant=\"warning\"] {\n border-color: rgb(235 15 15);\n background-color: rgb(235 15 15 / 0.2);\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.574Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":129,"estimatedTokens":615}}87{"id":"doc-define_terms_with_html_html_mdn-99f13921","source":"documentation","title":"Define terms with HTML - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Define_terms_with_HTML","text":"Example:\n```text\n<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>\n```\n\nExample:\n```text\n<p>\n <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>\n is a description language used to structure documents on the web.\n</p>\n```\n\nExample:\n```text\n<p>\n <span id=\"ff\">\n <dfn aria-describedby=\"ff\">Firefox</dfn>\n is the web browser created by the Mozilla Foundation.\n </span>\n You can download it at <a href=\"https://www.mozilla.org\">mozilla.org</a>\n</p>\n```\n\nExample:\n```text\n<dl>\n <dt>jambalaya</dt>\n <dd>\n rice-based entree typically containing chicken, sausage, seafood, and spices\n </dd>\n\n <dt>sukiyaki</dt>\n <dd>\n Japanese specialty consisting of thinly sliced meat, vegetables, and\n noodles, cooked in sake and soy sauce\n </dd>\n\n <dt>chianti</dt>\n <dd>dry Italian red wine originating in Tuscany</dd>\n</dl>\n```\n\nExample:\n```text\ndt {\n font-weight: bold;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.575Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":51,"estimatedTokens":234}}88{"id":"doc-integrity_html_attribute_html_mdn-247b63bd","source":"documentation","title":"integrity HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/integrity","text":"Example:\n```text\n<script\n src=\"https://cdn.example.com/script.js\"\n integrity=\"\n sha256-NmUxNTFiMDUzZGIwZjcwZDIyYTc5NTA4ZmQyNT\n sha384-Tk2Yjg3YmYzMWNkZTdhMTFkM2FlNDg4ZjE3MzEzNTk3ZDlh\n sha512-OGUwYThkZDc2YzFlZGI5MDEzZmZhMGFkMGQ0OTQ3MzZkNGYZTEzODk2\"\n crossorigin=\"anonymous\"></script>\n```\n\nExample:\n```text\n<script\n src=\"https://cdn.example.com/script.js\"\n integrity=\"\n sha512-ZmQ5NjNiYWJjYTM3MjRhMGI4MTQzNWRmZTZkZGYyMzQyOGYYTZkYjBm\n sha512-OGUwYThkZDc2YzFlZGI5MDEzZmZhMGFkMGQ0OTQ3MzZkNGYZTEzODk2\"\n crossorigin=\"anonymous\"></script>\n```\n\nExample:\n```text\n<link\n rel=\"stylesheet\"\n href=\"https://cdn.example.com/style.css\"\n integrity=\"\n sha256-NmUxNTFiMDUzZGIwZjcwZDIyYTc5NTA4ZmQyNT\n sha256-OTcyMGZkY2Y3NGZhZjUwNWU5NGQ0ZWJhYWVhND\n sha384-Tk2Yjg3YmYzMWNkZTdhMTFkM2FlNDg4ZjE3MzEzNTk3ZDlh\n sha384-ZTdhYjQ2NTE5OTg0Yjc2ZDU2MDMxMDUxY2Y5NDMxYzI5NjA\n sha512-OGUwYThkZDc2YzFlZGI5MDEzZmZhMGFkMGQ0OTQ3MzZkNGYZTEzODk2\n sha512-IxZTcwZjE2ZjU3MzE4NWM5ODU4ZmJkYjBlYzBhYzFkYzU0OGJmM2ZkN\"\n crossorigin=\"anonymous\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.575Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":37,"estimatedTokens":258}}89{"id":"doc-web_application_manifest_progressive_web_apps_md-a77c7866","source":"documentation","title":"Web application manifest - Progressive web apps | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest","text":"Example:\n```json\n{\n \"short_name\": \"MDN\",\n \"name\": \"MDN Web Docs\",\n \"icons\": [\n {\n \"src\": \"/favicon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/favicon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"black\",\n \"background_color\": \"white\"\n}\n```\n\nExample:\n```text\n<link rel=\"manifest\" href=\"manifest.json\" />\n```\n\nExample:\n```text\n<link rel=\"manifest\" href=\"/app.webmanifest\" crossorigin=\"use-credentials\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.576Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":35,"estimatedTokens":145}}90{"id":"doc-opensearch_description_format_xml_mdn-bffc1c78","source":"documentation","title":"OpenSearch description format - XML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/XML/Guides/OpenSearch","text":"Example:\n```text\n<OpenSearchDescription\n xmlns=\"http://a9.com/-/spec/opensearch/1.1/\"\n xmlns:moz=\"http://www.mozilla.org/2006/browser/search/\">\n <ShortName>[SNK]</ShortName>\n <Description>[Search engine full name and summary]</Description>\n <InputEncoding>[UTF-8]</InputEncoding>\n <Image width=\"16\" height=\"16\" type=\"image/x-icon\">[https://example.com/favicon.ico]</Image>\n <Url type=\"text/html\" template=\"[searchURL]\"/>\n <Url type=\"application/x-suggestions+json\" template=\"[suggestionURL]\"/>\n</OpenSearchDescription>\n```\n\nExample:\n```text\n<Image height=\"16\" width=\"16\" type=\"image/x-icon\">https://example.com/favicon.ico</Image>\n <!-- or -->\n<Image height=\"16\" width=\"16\">data:image/x-icon;base64,AAABAAEAEBAAAโฆDAAA=</Image>\n```\n\nExample:\n```text\n<link\n rel=\"search\"\n type=\"application/opensearchdescription+xml\"\n title=\"[searchTitle]\"\n href=\"[descriptionURL]\" />\n```\n\nExample:\n```text\n<link\n rel=\"search\"\n type=\"application/opensearchdescription+xml\"\n title=\"MySite: By Author\"\n href=\"https://example.com/mysiteauthor.xml\" />\n\n<link\n rel=\"search\"\n type=\"application/opensearchdescription+xml\"\n title=\"MySite: By Title\"\n href=\"https://example.com/mysitetitle.xml\" />\n```\n\nExample:\n```text\n<Url\n type=\"application/opensearchdescription+xml\"\n rel=\"self\"\n template=\"https://example.com/mysearchdescription.xml\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.577Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":54,"estimatedTokens":339}}91{"id":"doc-audio_html_embed_audio_element_html_mdn-230668d7","source":"documentation","title":"<audio> HTML embed audio element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio","text":"Example:\n```text\n<figure>\n <figcaption>Listen to the T-Rex:</figcaption>\n <audio controls src=\"/shared-assets/audio/t-rex-roar.mp3\"></audio>\n <a href=\"/shared-assets/audio/t-rex-roar.mp3\"> Download audio </a>\n</figure>\n```\n\nExample:\n```text\nfigure {\n margin: 0;\n}\n```\n\nExample:\n```text\n<audio controls>\n <source src=\"myAudio.mp3\" type=\"audio/mpeg\" />\n <source src=\"myAudio.ogg\" type=\"audio/ogg\" />\n <p>\n Download <a href=\"myAudio.mp3\" download=\"myAudio.mp3\">MP3</a> or\n <a href=\"myAudio.ogg\" download=\"myAudio.ogg\">OGG</a> audio.\n </p>\n</audio>\n```\n\nExample:\n```javascript\nconst audioElement = document.querySelector(\"audio\");\nnavigator.mediaDevices\n .getUserMedia({ audio: true })\n .then((stream) => {\n audioElement.srcObject = stream;\n })\n .catch((error) => {\n console.error(\"Error accessing the microphone\", error);\n });\n```\n\nExample:\n```javascript\nconst elem = document.querySelector(\"audio\");\n\nelem.audioTrackList.onaddtrack = (event) => {\n trackEditor.addTrack(event.track);\n};\n\nelem.audioTrackList.onremovetrack = (event) => {\n trackEditor.removeTrack(event.track);\n};\n```\n\nExample:\n```text\n1\n00:00:00 --> 00:00:45\n[Energetic techno music]\n\n2\n00:00:46 --> 00:00:51\nWelcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?\n\n16\n00:00:52 --> 00:01:02\n[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?\n```\n\nExample:\n```text\n<audio controls>\n <source src=\"myAudio.mp3\" type=\"audio/mpeg\" />\n <source src=\"myAudio.ogg\" type=\"audio/ogg\" />\n <p>\n Download <a href=\"myAudio.mp3\">MP3</a> or\n <a href=\"myAudio.ogg\" download=\"myAudio.ogg\">OGG</a> audio.\n </p>\n</audio>\n```\n\nExample:\n```text\n<!-- Basic audio playback -->\n<audio src=\"AudioTest.ogg\" autoplay>\n <a href=\"AudioTest.ogg\" download=\"AudioTest.ogg\">Download OGG audio</a>.\n</audio>\n```\n\nExample:\n```text\n<audio controls>\n <source src=\"foo.wav\" type=\"audio/wav\" />\n <a href=\"foo.wav\" download=\"foo.wav\">Download WAV audio</a>.\n</audio>\n```\n\nExample:\n```text\n<audio controls>\n <source src=\"foo.opus\" type=\"audio/ogg; codecs=opus\" />\n <source src=\"foo.ogg\" type=\"audio/ogg; codecs=vorbis\" />\n <source src=\"foo.mp3\" type=\"audio/mpeg\" />\n</audio>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.578Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":107,"estimatedTokens":557}}92{"id":"doc-datalist_html_data_list_element_html_mdn-5117f30f","source":"documentation","title":"<datalist> HTML data list element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist","text":"Example:\n```text\n<label for=\"ice-cream-choice\">Choose a flavor:</label>\n<input list=\"ice-cream-flavors\" id=\"ice-cream-choice\" name=\"ice-cream-choice\" />\n\n<datalist id=\"ice-cream-flavors\">\n <option value=\"Chocolate\"></option>\n <option value=\"Coconut\"></option>\n <option value=\"Mint\"></option>\n <option value=\"Strawberry\"></option>\n <option value=\"Vanilla\"></option>\n</datalist>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-bottom: 10px;\n}\n```\n\nExample:\n```text\n<label for=\"myBrowser\">Choose a browser from this list:</label>\n<input list=\"browsers\" id=\"myBrowser\" name=\"myBrowser\" />\n<datalist id=\"browsers\">\n <option value=\"Chrome\"></option>\n <option value=\"Firefox\"></option>\n <option value=\"Opera\"></option>\n <option value=\"Safari\"></option>\n <option value=\"Microsoft Edge\"></option>\n</datalist>\n```\n\nExample:\n```text\n<input type=\"time\" list=\"popularHours\" />\n<datalist id=\"popularHours\">\n <option value=\"12:00\"></option>\n <option value=\"13:00\"></option>\n <option value=\"14:00\"></option>\n</datalist>\n```\n\nExample:\n```text\n<label for=\"tick\">Tip amount:</label>\n<input type=\"range\" list=\"tickmarks\" min=\"0\" max=\"100\" id=\"tick\" name=\"tick\" />\n<datalist id=\"tickmarks\">\n <option value=\"0\" label=\"0%\"></option>\n <option value=\"10\" label=\"Minimum Tip\"></option>\n <option value=\"20\" label=\"Standard\"></option>\n <option value=\"30\" label=\"Generous\"></option>\n <option value=\"50\" label=\"Very Generous\"></option>\n</datalist>\n```\n\nExample:\n```text\n<label for=\"colors\">Pick a color (preferably a red tone):</label>\n<input type=\"color\" list=\"redColors\" id=\"colors\" />\n<datalist id=\"redColors\">\n <option value=\"#800000\"></option>\n <option value=\"#8B0000\"></option>\n <option value=\"#A52A2A\"></option>\n <option value=\"#DC143C\"></option>\n</datalist>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.578Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":71,"estimatedTokens":446}}93{"id":"doc-exslt_xml_mdn-1d400fb0","source":"documentation","title":"EXSLT - XML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/XML/EXSLT","text":"Example:\n```text\n<xsl:stylesheet version=\"1.0\"\n xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\"\n xmlns:regexp=\"http://exslt.org/regular-expressions\">\n <xsl:template match=\"/\">\n <!-- โฆ -->\n <xsl:value-of select=\"regexp:replace(/root/@value, 'before', 'gi', 'AFTER')\"/>\n <!-- โฆ -->\n </xsl:template>\n</xsl:stylesheet>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.579Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":14,"estimatedTokens":94}}94{"id":"doc-xml_introduction_xml_mdn-97826d0d","source":"documentation","title":"XML introduction - XML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/XML/Guides/XML_introduction","text":"Example:\n```text\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n```\n\nExample:\n```text\n<!-- Comment -->\n```\n\nExample:\n```text\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<message>\n <warning>\n Hello World\n <!--missing </warning> -->\n</message>\n```\n\nExample:\n```text\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<message>\n <warning>\n Hello World\n </warning>\n</message>\n```\n\nExample:\n```text\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE body [\n <!ENTITY warning \"Warning: Something bad happened... please refresh and try again.\">\n]>\n<body>\n <message> &warning; </message>\n</body>\n```\n\nExample:\n```text\n<?xml-stylesheet type=\"text/css\" href=\"stylesheet.css\"?>\n```\n\nExample:\n```text\n<?xml-stylesheet type=\"text/xsl\" href=\"transform.xsl\"?>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.579Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":52,"estimatedTokens":191}}95{"id":"doc-canvas_html_graphics_canvas_element_html_mdn-a3eb952d","source":"documentation","title":"<canvas> HTML graphics canvas element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas","text":"Example:\n```text\n<canvas width=\"120\" height=\"120\">\n An alternative text describing what your canvas displays.\n</canvas>\n```\n\nExample:\n```javascript\nconst canvas = document.querySelector(\"canvas\");\nconst ctx = canvas.getContext(\"2d\");\nctx.fillStyle = \"green\";\n// Add a rectangle at (10, 10) with size 100x100 pixels\nctx.fillRect(10, 10, 100, 100);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.580Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":17,"estimatedTokens":92}}96{"id":"doc-footer_html_footer_element_html_mdn-551d8e92","source":"documentation","title":"<footer> HTML footer element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer","text":"Example:\n```text\n<article>\n <h1>How to be a wizard</h1>\n <ol>\n <li>Grow a long, majestic beard.</li>\n <li>Wear a tall, pointed hat.</li>\n <li>Have I mentioned the beard?</li>\n </ol>\n <footer>\n <p>ยฉ 2018 Gandalf</p>\n </footer>\n</article>\n```\n\nExample:\n```text\narticle {\n min-height: 100%;\n display: grid;\n grid-template-rows: auto 1fr auto;\n}\n\nfooter {\n display: flex;\n justify-content: center;\n padding: 5px;\n background-color: #45a1ff;\n color: white;\n}\n```\n\nExample:\n```text\n<body>\n <h3>FIFA World Cup top goalscorers</h3>\n <ol>\n <li>Miroslav Klose, 16</li>\n <li>Ronaldo Nazรกrio, 15</li>\n <li>Gerd Mรผller, 14</li>\n </ol>\n\n <footer>\n <small>\n Copyright ยฉ 2023 Football History Archives. All Rights Reserved.\n </small>\n </footer>\n</body>\n```\n\nExample:\n```text\nfooter {\n text-align: center;\n padding: 5px;\n background-color: #abbaba;\n color: black;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.580Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":61,"estimatedTokens":230}}97{"id":"doc-aside_html_aside_element_html_mdn-c6cdaa16","source":"documentation","title":"<aside> HTML aside element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside","text":"Example:\n```text\n<p>\n Salamanders are a group of amphibians with a lizard-like appearance, including\n short legs and a tail in both larval and adult forms.\n</p>\n\n<aside>\n <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>\n</aside>\n\n<p>\n Several species of salamander inhabit the temperate rainforest of the Pacific\n Northwest, including the Ensatina, the Northwestern Salamander and the\n Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,\n worms and other small creatures.\n</p>\n```\n\nExample:\n```text\naside {\n width: 40%;\n padding-left: 0.5rem;\n margin-left: 0.5rem;\n float: right;\n box-shadow: inset 5px 0 5px -5px #29627e;\n font-style: italic;\n color: #29627e;\n}\n\naside > p {\n margin: 0.5rem;\n}\n```\n\nExample:\n```text\n<article>\n <p>\n The Disney movie <cite>The Little Mermaid</cite> was first released to\n theatres in 1989.\n </p>\n <aside>\n <p>The movie earned $87 million during its initial release.</p>\n </aside>\n <p>More info about the movieโฆ</p>\n</article>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.581Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":51,"estimatedTokens":263}}98{"id":"doc-head_html_document_metadata_header_element_html_-79c98023","source":"documentation","title":"<head> HTML document metadata (header) element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n <title>Document title</title>\n </head>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.581Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":13,"estimatedTokens":55}}99{"id":"doc-title_html_document_title_element_html_mdn-fa5e5a90","source":"documentation","title":"<title> HTML document title element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title","text":"Example:\n```text\n<title>Grandma's Heavy Metal Festival Journal</title>\n```\n\nExample:\n```text\n<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>\n```\n\nExample:\n```text\n<title>\n 2 errors - Your order - Sea Food Store - Food: Online takeout today!\n</title>\n```\n\nExample:\n```text\n<title>Awesome interesting stuff</title>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.582Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":23,"estimatedTokens":91}}100{"id":"doc-body_html_document_body_element_html_mdn-9bf738cc","source":"documentation","title":"<body> HTML document body element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body","text":"Example:\n```text\n<html lang=\"en\">\n <head>\n <title>Document title</title>\n </head>\n <body>\n <p>\n The <code><body></code> HTML element represents the content of an\n HTML document. There can be only one <code><body></code> element in\n a document.\n </p>\n </body>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.582Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":17,"estimatedTokens":81}}101{"id":"doc-header_html_header_element_html_mdn-9af7e1cb","source":"documentation","title":"<header> HTML header element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header","text":"Example:\n```text\n<header>\n <a class=\"logo\" href=\"#\">Cute Puppies Express!</a>\n</header>\n\n<article>\n <header>\n <h1>Beagles</h1>\n <time>08.12.2014</time>\n </header>\n <p>\n I love beagles <em>so</em> much! Like, really, a lot. They're adorable and\n their ears are so, so snugly soft!\n </p>\n</article>\n```\n\nExample:\n```text\n.logo {\n background: left / cover\n url(\"/shared-assets/images/examples/puppy-header.jpg\");\n display: flex;\n height: 120px;\n align-items: center;\n justify-content: center;\n font:\n bold calc(1em + 2 * (100vw - 120px) / 100) \"Dancing Script\",\n fantasy;\n color: #ff0083;\n text-shadow: black 2px 2px 0.2rem;\n}\n\nheader > h1 {\n margin-bottom: 0;\n}\n\nheader > time {\n font: italic 0.7rem sans-serif;\n}\n```\n\nExample:\n```text\n<article>\n <header>\n <h2>The Planet Earth</h2>\n <p>\n Posted on Wednesday, <time datetime=\"2017-10-04\">4 October 2017</time> by\n Jane Smith\n </p>\n </header>\n <p>\n We live on a planet that's blue and green, with so many things still unseen.\n </p>\n <p><a href=\"https://example.com/the-planet-earth/\">Continue readingโฆ</a></p>\n</article>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.583Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":61,"estimatedTokens":287}}102{"id":"doc-article_html_article_contents_element_html_mdn-bdae4f62","source":"documentation","title":"<article> HTML article contents element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article","text":"Example:\n```text\n<article class=\"forecast\">\n <h1>Weather forecast for Seattle</h1>\n <article class=\"day-forecast\">\n <h2>03 March 2018</h2>\n <p>Rain.</p>\n </article>\n <article class=\"day-forecast\">\n <h2>04 March 2018</h2>\n <p>Periods of rain.</p>\n </article>\n <article class=\"day-forecast\">\n <h2>05 March 2018</h2>\n <p>Heavy rain.</p>\n </article>\n</article>\n```\n\nExample:\n```text\n.forecast {\n margin: 0;\n padding: 0.3rem;\n background-color: #eeeeee;\n}\n\n.forecast > h1,\n.day-forecast {\n margin: 0.5rem;\n padding: 0.3rem;\n font-size: 1.2rem;\n}\n\n.day-forecast {\n background: right/contain content-box border-box no-repeat\n url(\"/shared-assets/images/examples/rain.svg\") white;\n}\n\n.day-forecast > h2,\n.day-forecast > p {\n margin: 0.2rem;\n font-size: 1rem;\n}\n```\n\nExample:\n```text\n<article class=\"film_review\">\n <h2>Jurassic Park</h2>\n <section class=\"main_review\">\n <h3>Review</h3>\n <p>Dinos were great!</p>\n </section>\n <section class=\"user_reviews\">\n <h3>User reviews</h3>\n <article class=\"user_review\">\n <h4>Too scary!</h4>\n <p>Way too scary for me.</p>\n <footer>\n <p>\n Posted on\n <time datetime=\"2015-05-16 19:00\">May 16</time>\n by Lisa.\n </p>\n </footer>\n </article>\n <article class=\"user_review\">\n <h4>Love the dinos!</h4>\n <p>I agree, dinos are my favorite.</p>\n <footer>\n <p>\n Posted on\n <time datetime=\"2015-05-17 19:00\">May 17</time>\n by Tom.\n </p>\n </footer>\n </article>\n </section>\n <footer>\n <p>\n Posted on\n <time datetime=\"2015-05-15 19:00\">May 15</time>\n by Staff.\n </p>\n </footer>\n</article>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.583Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":90,"estimatedTokens":432}}103{"id":"doc-html_cheatsheet_for_syntax_and_common_tasks_html-fda65f4e","source":"documentation","title":"HTML cheatsheet for syntax and common tasks - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet","text":"Example:\n```text\n<a href=\"https://example.org\">\nA link to example.org</a>.\n```\n\nExample:\n```text\n<img src=\"beast.png\" width=\"50\" />\n```\n\nExample:\n```text\nUsed to group elements: for example,\nto <span style=\"color:blue\">style\nthem</span>.\n```\n\nExample:\n```text\n<em>I'm posh</em>.\n```\n\nExample:\n```text\nMark a phrase in <i>italics</i>.\n```\n\nExample:\n```text\nBold <b>a word or phrase</b>.\n```\n\nExample:\n```text\n<strong>I'm important!</strong>\n```\n\nExample:\n```text\n<mark>Notice me!</mark>\n```\n\nExample:\n```text\n<s>I'm irrelevant.</s>\n```\n\nExample:\n```text\nH<sub>2</sub>O\n```\n\nExample:\n```text\nUsed to represent the <small>small\nprint </small>of a document.\n```\n\nExample:\n```text\n<address>Main street 67</address>\n```\n\nExample:\n```text\nFor more monsters,\nsee <cite>The Monster Book of Monsters</cite>.\n```\n\nExample:\n```text\nx<sup>2</sup>\n```\n\nExample:\n```text\n<q>Me?</q>, she said.\n```\n\nExample:\n```text\nLine 1<br />Line 2\n```\n\nExample:\n```text\nUsed to format the date. For example:\n<time datetime=\"2020-05-24\">\npublished on 23-05-2020</time>.\n```\n\nExample:\n```text\nThis text is in normal format,\nbut <code>this text is in code\nformat</code>.\n```\n\nExample:\n```text\n<audio controls>\n <source src=\"/shared-assets/audio/t-rex-roar.mp3\" type=\"audio/mpeg\" />\n</audio>\n```\n\nExample:\n```text\n<video controls width=\"250\"\n src=\"/shared-assets/videos/flower.webm\" >\n <a href=\"/shared-assets/videos/flower.webm\">Download WebM video</a>\n</video>\n```\n\nExample:\n```text\n<p>I'm a paragraph</p>\n<p>I'm another paragraph</p>\n```\n\nExample:\n```text\nThey said:\n<blockquote>The blockquote element indicates\nan extended quotation.</blockquote>\n```\n\nExample:\n```text\n<details>\n <summary>HTML Cheat Sheet</summary>\n <p>Inline elements</p>\n <p>Block elements</p>\n</details>\n```\n\nExample:\n```text\n<dl>\n <dt>A Term</dt>\n <dd>Definition of a term</dd>\n <dt>Another Term</dt>\n <dd>Definition of another term</dd>\n</dl>\n```\n\nExample:\n```text\nbefore<hr />after\n```\n\nExample:\n```text\n<h1> This is Heading 1 </h1>\n<h2> This is Heading 2 </h2>\n<h3> This is Heading 3 </h3>\n<h4> This is Heading 4 </h4>\n<h5> This is Heading 5 </h5>\n<h6> This is Heading 6 </h6>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.586Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":26,"totalLines":162,"estimatedTokens":538}}104{"id":"doc-using_responsive_images_in_html_html_mdn-5281dec7","source":"documentation","title":"Using responsive images in HTML - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images","text":"Example:\n```text\n<img src=\"elva-fairy-800w.jpg\" alt=\"Elva dressed as a fairy\" />\n```\n\nExample:\n```text\n<img\n srcset=\"elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w\"\n sizes=\"(width <= 600px) 480px,\n 800px\"\n src=\"elva-fairy-800w.jpg\"\n alt=\"Elva dressed as a fairy\" />\n```\n\nExample:\n```text\n<img\n srcset=\"elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x\"\n src=\"elva-fairy-640w.jpg\"\n alt=\"Elva dressed as a fairy\" />\n```\n\nExample:\n```text\nimg {\n width: 320px;\n}\n```\n\nExample:\n```text\n<img src=\"elva-800w.jpg\" alt=\"Chris standing up holding his daughter Elva\" />\n```\n\nExample:\n```text\n<picture>\n <source media=\"(width < 800px)\" srcset=\"elva-480w-close-portrait.jpg\" />\n <source media=\"(width >= 800px)\" srcset=\"elva-800w.jpg\" />\n <img src=\"elva-800w.jpg\" alt=\"Chris standing up holding his daughter Elva\" />\n</picture>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.589Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":45,"estimatedTokens":219}}105{"id":"doc-using_date_and_time_formats_in_html_html_mdn-b060892a","source":"documentation","title":"Using date and time formats in HTML - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats","text":"Example:\n```text\n<!--midnight of January 1st, 10000: the exact time of Y10K-->\n<input type=\"datetime-local\" value=\"+010000-01-01T05:00\" />\n```\n\nExample:\n```javascript\nfunction setValue(element, date) {\n const isoString = date.toISOString();\n element.value = isoString.substring(0, isoString.indexOf(\"T\") + 6);\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.590Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":15,"estimatedTokens":83}}106{"id":"doc-rtc_html_ruby_text_container_element_html_mdn-df5bbffc","source":"documentation","title":"<rtc> HTML ruby text container element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rtc","text":"Example:\n```text\n<ruby lang=\"zh-Hant\">\n <rbc>\n <rb>้ฆฌ</rb><rp>(</rp><rt>mว</rt><rp>)</rp>\n <rb>ไพ</rb><rp>(</rp><rt>lรกi</rt><rp>)</rp>\n <rb>่ฅฟ</rb><rp>(</rp><rt>xฤซ</rt><rp>)</rp>\n <rb>ไบ</rb><rp>(</rp><rt>yร </rt><rp>)</rp>\n </rbc>\n <rtc lang=\"en\">\n <rp>(</rp><rt>Malaysia</rt><rp>)</rp>\n </rtc>\n</ruby>\n```\n\nExample:\n```text\nruby {\n font-size: 2em;\n ruby-position: under;\n}\n\nrtc {\n ruby-position: over;\n}\n```\n\nExample:\n```text\n<div class=\"info\">\n <ruby>\n <rbc>\n <rb>ๆง</rb><rt>jiรน</rt> <rb>้</rb><rt>jฤซn</rt> <rb>ๅฑฑ</rb><rt>shฤn</rt>\n </rbc>\n <rtc>San Francisco</rtc>\n </ruby>\n</div>\n```\n\nExample:\n```text\n.info {\n padding-top: 10px;\n font-size: 36px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.590Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":48,"estimatedTokens":177}}107{"id":"doc-rp_html_ruby_fallback_parenthesis_element_html_m-2969f039","source":"documentation","title":"<rp> HTML ruby fallback parenthesis element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rp","text":"Example:\n```text\n<ruby>\n ๆผข <rp>(</rp><rt>kan</rt><rp>)</rp> ๅญ <rp>(</rp><rt>ji</rt><rp>)</rp>\n</ruby>\n```\n\nExample:\n```text\nruby {\n font-size: 2em;\n}\n```\n\nExample:\n```text\n<ruby>\n ๆผข <rp>(</rp><rt>Kan</rt><rp>)</rp> ๅญ <rp>(</rp><rt>ji</rt><rp>)</rp>\n</ruby>\n```\n\nExample:\n```text\nbody {\n font-size: 22px;\n}\n```\n\nExample:\n```text\nๆผข (Kan) ๅญ (ji)\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.591Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":34,"estimatedTokens":91}}108{"id":"doc-rt_html_ruby_text_element_html_mdn-d7c7c826","source":"documentation","title":"<rt> HTML ruby text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rt","text":"Example:\n```text\n<ruby>\n ๆผข <rp>(</rp><rt>kan</rt><rp>)</rp> ๅญ <rp>(</rp><rt>ji</rt><rp>)</rp>\n</ruby>\n```\n\nExample:\n```text\nruby {\n font-size: 2em;\n}\n```\n\nExample:\n```text\n<ruby> ๆผข <rt>Kan</rt> ๅญ <rt>ji</rt> </ruby>\n```\n\nExample:\n```text\nbody {\n font-size: 22px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.591Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":27,"estimatedTokens":72}}109{"id":"doc-ruby_html_ruby_annotation_element_html_mdn-1c7845d0","source":"documentation","title":"<ruby> HTML ruby annotation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby","text":"Example:\n```text\n<ruby> ๆๆฅ <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>\n```\n\nExample:\n```text\nruby {\n font-size: 2em;\n}\n```\n\nExample:\n```text\n<ruby>\n ๆผข <rp>(</rp><rt>Kan</rt><rp>)</rp> ๅญ <rp>(</rp><rt>ji</rt><rp>)</rp>\n</ruby>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.592Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":20,"estimatedTokens":62}}110{"id":"doc-s_html_strikethrough_element_html_mdn-421fbe5c","source":"documentation","title":"<s> HTML strikethrough element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/s","text":"Example:\n```text\n<p><s>There will be a few tickets available at the box office tonight.</s></p>\n\n<p>SOLD OUT!</p>\n```\n\nExample:\n```text\ns {\n /* Add your styles here */\n}\n```\n\nExample:\n```text\ns::before,\ns::after {\n clip-path: inset(100%);\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\ns::before {\n content: \" [start of stricken text] \";\n}\n\ns::after {\n content: \" [end of stricken text] \";\n}\n```\n\nExample:\n```text\n.sold-out {\n text-decoration: line-through;\n}\n```\n\nExample:\n```text\n<s>Today's Special: Salmon</s> SOLD OUT<br />\n<span class=\"sold-out\">Today's Special: Salmon</span> SOLD OUT\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.593Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":50,"estimatedTokens":175}}111{"id":"doc-samp_html_sample_output_element_html_mdn-8788fff4","source":"documentation","title":"<samp> HTML sample output element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/samp","text":"Example:\n```text\n<p>I was trying to boot my computer, but I got this hilarious message:</p>\n\n<p>\n <samp>Keyboard not found <br />Press F1 to continue</samp>\n</p>\n```\n\nExample:\n```text\nsamp {\n font-weight: bold;\n}\n```\n\nExample:\n```text\nsamp {\n font-family: \"Courier\";\n}\n```\n\nExample:\n```text\n<p>\n When the process is complete, the utility will output the text\n <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to\n the next step.\n</p>\n```\n\nExample:\n```text\n<pre>\n<samp><span class=\"prompt\">mike@interwebz:~$</span> <kbd>md5 -s \"Hello world\"</kbd>\nMD5 (\"Hello world\") = 3e25960a79dbc69b674cd4ec67a72c62\n\n<span class=\"prompt\">mike@interwebz:~$</span> <span class=\"cursor\">โ</span></samp></pre>\n```\n\nExample:\n```text\n.prompt {\n color: #bb0000;\n}\n\nsamp > kbd {\n font-weight: bold;\n}\n\n.cursor {\n color: #0000bb;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.593Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":57,"estimatedTokens":215}}112{"id":"doc-q_html_inline_quotation_element_html_mdn-600a76d2","source":"documentation","title":"<q> HTML inline quotation element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q","text":"Example:\n```text\n<p>\n When Dave asks HAL to open the pod bay door, HAL answers:\n <q\n cite=\"https://www.imdb.com/title/tt0062622/quotes/?item=qt0396921&ref_=ext_shr_lnk\">\n I'm sorry, Dave. I'm afraid I can't do that.\n </q>\n</p>\n```\n\nExample:\n```text\nq {\n font-style: italic;\n}\n```\n\nExample:\n```text\n<p>\n According to Mozilla's website,\n <q cite=\"https://www.mozilla.org/en-US/about/history/details/\"\n >Firefox 1.0 was released in 2004 and became a big success.</q\n >\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.594Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":29,"estimatedTokens":126}}113{"id":"doc-strong_html_strong_importance_element_html_mdn-35607881","source":"documentation","title":"<strong> HTML strong importance element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong","text":"Example:\n```text\n<p>\n ... the most important rule, the rule you can never forget, no matter how much\n he cries, no matter how much he begs:\n <strong>never feed him after midnight</strong>.\n</p>\n```\n\nExample:\n```text\np {\n font-size: 1rem;\n}\n```\n\nExample:\n```text\n<p>\n Before proceeding, <strong>make sure you put on your safety goggles</strong>.\n</p>\n```\n\nExample:\n```text\n<p>\n <strong>Important:</strong> Before proceeding, make sure you add plenty of\n butter.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.594Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":32,"estimatedTokens":123}}114{"id":"doc-strike_html_strikethrough_element_html_mdn-97bec3e4","source":"documentation","title":"<strike> HTML strikethrough element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strike","text":"Example:\n```text\n<strike>: <strike>Today's Special: Salmon</strike> SOLD OUT<br />\n<s>: <s>Today's Special: Salmon</s> SOLD OUT\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.595Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":7,"estimatedTokens":40}}115{"id":"doc-sub_html_subscript_element_html_mdn-598b311a","source":"documentation","title":"<sub> HTML subscript element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sub","text":"Example:\n```text\n<p>\n Almost every developer's favorite molecule is\n C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as\n \"caffeine.\"\n</p>\n```\n\nExample:\n```text\np {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n```\n\nExample:\n```text\n<p>\n According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this\n will result in the complete annihilation of both particles.\n</p>\n```\n\nExample:\n```typescript\n<p>\n The horizontal coordinates' positions along the X-axis are represented as\n <var>x<sub>1</sub></var> โฆ <var>x<sub>n</sub></var>.\n</p>\n```\n\nExample:\n```text\n<p>\n Almost every developer's favorite molecule is\n C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is commonly known\n as \"caffeine.\"\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.595Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":44,"estimatedTokens":193}}116{"id":"doc-slot_html_web_component_slot_element_html_mdn-2ddff534","source":"documentation","title":"<slot> HTML web component slot element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot","text":"Example:\n```text\n<template id=\"element-details-template\">\n <style>\n details {\n font-family: \"Open Sans Light\", \"Helvetica\", \"Arial\", sans-serif;\n }\n .name {\n font-weight: bold;\n color: #217ac0;\n font-size: 120%;\n }\n h4 {\n margin: 10px 0 -8px 0;\n background: #217ac0;\n color: white;\n padding: 2px 6px;\n border: 1px solid #cee9f9;\n border-radius: 4px;\n }\n .attributes {\n margin-left: 22px;\n font-size: 90%;\n }\n .attributes p {\n margin-left: 16px;\n font-style: italic;\n }\n </style>\n <details>\n <summary>\n <code class=\"name\">\n <<slot name=\"element-name\">NEED NAME</slot>>\n </code>\n <span class=\"desc\"><slot name=\"description\">NEED DESCRIPTION</slot></span>\n </summary>\n <div class=\"attributes\">\n <h4>Attributes</h4>\n <slot name=\"attributes\"><p>None</p></slot>\n </div>\n </details>\n <hr />\n</template>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.595Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":46,"estimatedTokens":242}}117{"id":"doc-style_html_style_information_element_html_mdn-c3b58ef5","source":"documentation","title":"<style> HTML style information element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style","text":"Example:\n```text\n<style>\n p {\n color: #26b72b;\n }\n code {\n font-weight: bold;\n }\n</style>\n\n<p>\n This text will be green. Inline styles take precedence over CSS included\n externally.\n</p>\n\n<p style=\"color: blue\">\n The <code>style</code> attribute can override it, though.\n</p>\n```\n\nExample:\n```text\np {\n color: red;\n}\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>Test page</title>\n <style>\n p {\n color: red;\n }\n </style>\n </head>\n <body>\n <p>This is my paragraph.</p>\n </body>\n</html>\n```\n\nExample:\n```text\n<template id=\"card-template\">\n <style>\n .card {\n border: 1px solid #cccccc;\n padding: 1rem;\n border-radius: 0.5rem;\n }\n </style>\n\n <div class=\"card\">Template content</div>\n</template>\n```\n\nExample:\n```typescript\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>Test page</title>\n <style>\n p {\n color: white;\n background-color: blue;\n padding: 5px;\n border: 1px solid black;\n }\n </style>\n <style>\n p {\n color: blue;\n background-color: yellow;\n }\n </style>\n </head>\n <body>\n <p>This is my paragraph.</p>\n </body>\n</html>\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>Test page</title>\n <style>\n p {\n color: white;\n background-color: blue;\n padding: 5px;\n border: 1px solid black;\n }\n </style>\n <style media=\"(width < 500px)\">\n p {\n color: blue;\n background-color: yellow;\n }\n </style>\n </head>\n <body>\n <p>This is my paragraph.</p>\n </body>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.596Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":119,"estimatedTokens":439}}118{"id":"doc-autocomplete_html_attribute_html_mdn-3cb1bb8e","source":"documentation","title":"autocomplete HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete","text":"Example:\n```text\n<label for=\"firstName\">First Name:</label>\n<input name=\"firstName\" id=\"firstName\" type=\"text\" autocomplete=\"given-name\" />\n\n<label for=\"lastName\">Last Name:</label>\n<input name=\"lastName\" id=\"lastName\" type=\"text\" autocomplete=\"family-name\" />\n\n<label for=\"email\">Email:</label>\n<input name=\"email\" id=\"email\" type=\"email\" autocomplete=\"off\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1rem;\n}\n```\n\nExample:\n```text\n<input autocomplete=\"off\" />\n<input autocomplete=\"on\" />\n<textarea autocomplete=\"shipping street-address\"></textarea>\n<input autocomplete=\"section-user1 billing postal-code\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.597Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":29,"estimatedTokens":162}}119{"id":"doc-select_html_select_element_html_mdn-7f91eb10","source":"documentation","title":"<select> HTML select element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select","text":"Example:\n```text\n<label for=\"pet-select\">Choose a pet:</label>\n\n<select name=\"pets\" id=\"pet-select\">\n <option value=\"\">--Please choose an option--</option>\n <option value=\"dog\">Dog</option>\n <option value=\"cat\">Cat</option>\n <option value=\"hamster\">Hamster</option>\n <option value=\"parrot\">Parrot</option>\n <option value=\"spider\">Spider</option>\n <option value=\"goldfish\">Goldfish</option>\n</select>\n```\n\nExample:\n```text\nlabel {\n font-family: sans-serif;\n font-size: 1rem;\n padding-right: 10px;\n}\n\nselect {\n font-size: 0.9rem;\n padding: 2px 5px;\n}\n```\n\nExample:\n```text\n<select name=\"choice\">\n <option value=\"first\">First Value</option>\n <option value=\"second\" selected>Second Value</option>\n <option value=\"third\">Third Value</option>\n</select>\n```\n\nExample:\n```text\n<label for=\"hr-select\">Your favorite food</label> <br />\n\n<select name=\"foods\" id=\"hr-select\">\n <option value=\"\">Choose a food</option>\n <hr />\n <optgroup label=\"Fruit\">\n <option value=\"apple\">Apples</option>\n <option value=\"banana\">Bananas</option>\n <option value=\"cherry\">Cherries</option>\n <option value=\"damson\">Damsons</option>\n </optgroup>\n <hr />\n <optgroup label=\"Vegetables\">\n <option value=\"artichoke\">Artichokes</option>\n <option value=\"broccoli\">Broccoli</option>\n <option value=\"cabbage\">Cabbages</option>\n </optgroup>\n <hr />\n <optgroup label=\"Meat\">\n <option value=\"beef\">Beef</option>\n <option value=\"chicken\">Chicken</option>\n <option value=\"pork\">Pork</option>\n </optgroup>\n <hr />\n <optgroup label=\"Fish\">\n <option value=\"cod\">Cod</option>\n <option value=\"haddock\">Haddock</option>\n <option value=\"salmon\">Salmon</option>\n <option value=\"turbot\">Turbot</option>\n </optgroup>\n</select>\n```\n\nExample:\n```text\n<label>\n Please choose one or more pets:\n <select name=\"pets\" multiple size=\"4\">\n <optgroup label=\"4-legged pets\">\n <option value=\"dog\">Dog</option>\n <option value=\"cat\">Cat</option>\n <option value=\"hamster\" disabled>Hamster</option>\n </optgroup>\n <optgroup label=\"Flying pets\">\n <option value=\"parrot\">Parrot</option>\n <option value=\"macaw\">Macaw</option>\n <option value=\"albatross\">Albatross</option>\n </optgroup>\n </select>\n</label>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.598Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":93,"estimatedTokens":566}}120{"id":"doc-accept_html_attribute_html_mdn-a4a1019b","source":"documentation","title":"accept HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept","text":"Example:\n```text\n<label for=\"movie\">Choose a movie to upload:</label>\n\n<input type=\"file\" id=\"movie\" name=\"movie\" accept=\"video/*\" />\n\n<label for=\"poster\">Choose a poster:</label>\n\n<input type=\"file\" id=\"poster\" name=\"poster\" accept=\"image/png, image/jpeg\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1rem;\n}\n\ninput {\n margin-bottom: 1rem;\n}\n```\n\nExample:\n```text\n<input\n type=\"file\"\n id=\"docpicker\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\" />\n```\n\nExample:\n```text\n<input type=\"file\" id=\"soundFile\" accept=\"audio/*\" />\n<input type=\"file\" id=\"videoFile\" accept=\"video/*\" />\n<input type=\"file\" id=\"imageFile\" accept=\"image/*\" />\n```\n\nExample:\n```text\n<p>\n <label for=\"soundFile\">Select an audio file:</label>\n <input type=\"file\" id=\"soundFile\" accept=\"audio/*\" />\n</p>\n<p>\n <label for=\"videoFile\">Select a video file:</label>\n <input type=\"file\" id=\"videoFile\" accept=\"video/*\" />\n</p>\n<p>\n <label for=\"imageFile\">Select some images:</label>\n <input type=\"file\" id=\"imageFile\" accept=\"image/*\" multiple />\n</p>\n```\n\nExample:\n```text\n<input type=\"file\" accept=\"image/*,.pdf\" />\n```\n\nExample:\n```text\n<form method=\"post\" enctype=\"multipart/form-data\">\n <div>\n <label for=\"file\">Choose file to upload</label>\n <input type=\"file\" id=\"file\" name=\"file\" multiple />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n}\n```\n\nExample:\n```text\n<form method=\"post\" enctype=\"multipart/form-data\">\n <div>\n <label for=\"profile_pic\">Choose file to upload</label>\n <input\n type=\"file\"\n id=\"profile_pic\"\n name=\"profile_pic\"\n accept=\".jpg, .jpeg, .png\" />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.599Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":97,"estimatedTokens":454}}121{"id":"doc-track_html_embed_text_track_element_html_mdn-5de88c77","source":"documentation","title":"<track> HTML embed text track element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track","text":"Example:\n```text\n<video controls src=\"/shared-assets/videos/friday.mp4\">\n <track\n default\n kind=\"captions\"\n srclang=\"en\"\n label=\"English\"\n src=\"/shared-assets/misc/friday.vtt\" />\n Download the\n <a href=\"/shared-assets/videos/friday.mp4\">MP4</a>\n video, and\n <a href=\"/shared-assets/misc/friday.vtt\">subtitles</a>.\n</video>\n```\n\nExample:\n```text\nvideo {\n width: 250px;\n}\n\nvideo::cue {\n font-size: 1rem;\n}\n```\n\nExample:\n```javascript\nlet textTrackElem = document.getElementById(\"text-track\");\n\ntextTrackElem.addEventListener(\"cuechange\", (event) => {\n let cues = event.target.track.activeCues;\n});\n```\n\nExample:\n```text\n<video controls poster=\"/images/sample.gif\">\n <source src=\"sample.mp4\" type=\"video/mp4\" />\n <source src=\"sample.ogv\" type=\"video/ogv\" />\n <track kind=\"captions\" src=\"sampleCaptions.vtt\" srclang=\"en\" />\n <track kind=\"chapters\" src=\"sampleChapters.vtt\" srclang=\"en\" />\n <track kind=\"subtitles\" src=\"sampleSubtitles_de.vtt\" srclang=\"de\" />\n <track kind=\"subtitles\" src=\"sampleSubtitles_en.vtt\" srclang=\"en\" />\n <track kind=\"subtitles\" src=\"sampleSubtitles_ja.vtt\" srclang=\"ja\" />\n <track kind=\"subtitles\" src=\"sampleSubtitles_oz.vtt\" srclang=\"oz\" />\n <track kind=\"metadata\" src=\"keyStage1.vtt\" srclang=\"en\" label=\"Key Stage 1\" />\n <track kind=\"metadata\" src=\"keyStage2.vtt\" srclang=\"en\" label=\"Key Stage 2\" />\n <track kind=\"metadata\" src=\"keyStage3.vtt\" srclang=\"en\" label=\"Key Stage 3\" />\n <!-- Fallback -->\n โฆ\n</video>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.599Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":56,"estimatedTokens":373}}122{"id":"doc-wbr_html_line_break_opportunity_element_html_mdn-9713e62e","source":"documentation","title":"<wbr> HTML line break opportunity element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/wbr","text":"Example:\n```text\n#example-paragraphs {\n background-color: white;\n overflow: hidden;\n resize: horizontal;\n width: 9rem;\n border: 2px dashed #999999;\n}\n```\n\nExample:\n```text\n<p>\n http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.600Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":19,"estimatedTokens":124}}123{"id":"doc-capture_html_attribute_html_mdn-5df9176b","source":"documentation","title":"capture HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/capture","text":"Example:\n```text\n<label for=\"selfie\">Take a picture of your face:</label>\n\n<input type=\"file\" id=\"selfie\" name=\"selfie\" accept=\"image/*\" capture=\"user\" />\n\n<label for=\"picture\">Take a picture using back facing camera:</label>\n\n<input\n type=\"file\"\n id=\"picture\"\n name=\"picture\"\n accept=\"image/*\"\n capture=\"environment\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1rem;\n}\n\ninput {\n margin-bottom: 1rem;\n}\n```\n\nExample:\n```text\n<p>\n <label for=\"soundFile\">What does your voice sound like?:</label>\n <input type=\"file\" id=\"soundFile\" capture=\"user\" accept=\"audio/*\" />\n</p>\n<p>\n <label for=\"videoFile\">Upload a video:</label>\n <input type=\"file\" id=\"videoFile\" capture=\"environment\" accept=\"video/*\" />\n</p>\n<p>\n <label for=\"imageFile\">Upload a photo of yourself:</label>\n <input type=\"file\" id=\"imageFile\" capture=\"user\" accept=\"image/*\" />\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.600Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":45,"estimatedTokens":224}}124{"id":"doc-tt_html_teletype_text_element_html_mdn-f99c8d9b","source":"documentation","title":"<tt> HTML teletype text element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tt","text":"Example:\n```text\n<p>\n Enter the following at the telnet command prompt:\n <code>set localecho</code><br />\n\n The telnet client should display: <tt>Local Echo is on</tt>\n</p>\n```\n\nExample:\n```text\ntt {\n font-family: \"Lucida Console\", \"Menlo\", \"Monaco\", \"Courier New\", monospace;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.601Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":18,"estimatedTokens":75}}125{"id":"doc-tr_html_table_row_element_html_mdn-490a2ed4","source":"documentation","title":"<tr> HTML table row element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr","text":"Example:\n```text\n<table>\n <caption>\n Alien football stars\n </caption>\n <thead>\n <tr>\n <th scope=\"col\">Player</th>\n <th scope=\"col\">Gloobles</th>\n <th scope=\"col\">Za'taak</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">TR-7</th>\n <td>7</td>\n <td>4,569</td>\n </tr>\n <tr>\n <th scope=\"row\">Khiresh Odo</th>\n <td>7</td>\n <td>7,223</td>\n </tr>\n <tr>\n <th scope=\"row\">Mia Oolong</th>\n <td>9</td>\n <td>6,219</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\nth[scope=\"col\"] {\n background-color: #505050;\n color: white;\n}\n\nth[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n\ntd {\n text-align: center;\n}\n\ntr:nth-of-type(even) {\n background-color: #eeeeee;\n}\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ncaption {\n caption-side: bottom;\n padding: 10px;\n}\n```\n\nExample:\n```text\n<table>\n <tbody>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>AL fah</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td>DELL tah</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntr:nth-of-type(odd) {\n background-color: #eeeeee;\n}\n\ntr th[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th scope=\"col\">Symbol</th>\n <th scope=\"col\">Code word</th>\n <th scope=\"col\">Pronunciation</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">A</th>\n <td>Alfa</td>\n <td>AL fah</td>\n </tr>\n <tr>\n <th scope=\"row\">B</th>\n <td>Bravo</td>\n <td>BRAH voh</td>\n </tr>\n <tr>\n <th scope=\"row\">C</th>\n <td>Charlie</td>\n <td>CHAR lee</td>\n </tr>\n <tr>\n <th scope=\"row\">D</th>\n <td>Delta</td>\n <td>DELL tah</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\ntr:nth-of-type(odd) {\n background-color: #eeeeee;\n}\n\ntr th[scope=\"col\"] {\n background-color: #505050;\n color: white;\n}\n\ntr th[scope=\"row\"] {\n background-color: #d6ecd4;\n}\n```\n\nExample:\n```text\n<table>\n <tbody>\n <tr>\n <td>3</td>\n </tr>\n <tr>\n <td>2</td>\n </tr>\n <tr>\n <td>1</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```javascript\nHTMLTableSectionElement.prototype.sort = function (cb) {\n Array.from(this.rows)\n .sort(cb)\n .forEach((e) => this.appendChild(this.removeChild(e)));\n};\n\ndocument\n .querySelector(\"table\")\n .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 4px 8px;\n}\n```\n\nExample:\n```text\n<table>\n <thead>\n <tr>\n <th>Numbers</th>\n <th>Letters</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>3</td>\n <td>A</td>\n </tr>\n <tr>\n <td>2</td>\n <td>B</td>\n </tr>\n <tr>\n <td>1</td>\n <td>C</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```javascript\nconst allTables = document.querySelectorAll(\"table\");\n\nfor (const table of allTables) {\n const tBody = table.tBodies[0];\n const rows = Array.from(tBody.rows);\n const headerCells = table.tHead.rows[0].cells;\n\n for (const th of headerCells) {\n const cellIndex = th.cellIndex;\n\n th.addEventListener(\"click\", () => {\n rows.sort((tr1, tr2) => {\n const tr1Text = tr1.cells[cellIndex].textContent;\n const tr2Text = tr2.cells[cellIndex].textContent;\n return tr1Text.localeCompare(tr2Text);\n });\n\n tBody.append(...rows);\n });\n }\n}\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 4px 8px;\n}\n\nth {\n background-color: #505050;\n color: white;\n cursor: pointer;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.602Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":300,"estimatedTokens":1135}}126{"id":"doc-crossorigin_html_attribute_html_mdn-c05f3910","source":"documentation","title":"crossorigin HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/crossorigin","text":"Example:\n```text\n<script\n src=\"https://example.com/example-framework.js\"\n crossorigin=\"anonymous\"></script>\n```\n\nExample:\n```text\n<link rel=\"manifest\" href=\"/app.webmanifest\" crossorigin=\"use-credentials\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.602Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":57}}127{"id":"doc-content_html_attribute_html_mdn-10025708","source":"documentation","title":"content HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/content","text":"Example:\n```text\n<meta\n name=\"description\"\n content=\"The HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements.\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.602Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":8,"estimatedTokens":50}}128{"id":"doc-elementtiming_html_attribute_html_mdn-bd8f1e56","source":"documentation","title":"elementtiming HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/elementtiming","text":"Example:\n```text\n<img alt=\"alt\" src=\"img.jpg\" elementtiming=\"label for element\" />\n```\n\nExample:\n```text\n<img\n alt=\"Alt for a main blog post image\"\n src=\"my-massive-image.jpg\"\n elementtiming=\"Main image\" />\n\n<p elementtiming=\"important-text\">Some very important information.</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.603Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":16,"estimatedTokens":75}}129{"id":"doc-for_html_attribute_html_mdn-8e03e805","source":"documentation","title":"for HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/for","text":"Example:\n```text\n<p>\n <label>First Name (no \"for\" attribute):</label>\n <input id=\"first\" type=\"text\" value=\"Jane\" />\n</p>\n<p>\n <label for=\"last\">Last Name (w/ \"for\" attribute):</label>\n <input id=\"last\" type=\"text\" value=\"Doe\" />\n</p>\n<p id=\"result\">\n <strong id=\"result-label\">Full Name:</strong>\n <output for=\"first last\" aria-labelledby=\"result-label\" id=\"output\"></output>\n</p>\n```\n\nExample:\n```text\nlabel[for=\"paragraph\"] {\n color: rebeccapurple;\n}\n\n#result {\n text-align: center;\n}\n\n#result-label {\n font-size: 16pt;\n}\n\n#result-label,\n#output {\n display: block;\n}\n```\n\nExample:\n```javascript\nconst firstNameEl = document.getElementById(\"first\");\nconst lastNameEl = document.getElementById(\"last\");\nconst outputEl = document.getElementById(\"output\");\n\nfunction updateOutput() {\n const value = `${firstNameEl.value} ${lastNameEl.value}`;\n outputEl.innerText = value;\n}\n\nupdateOutput();\nfirstNameEl.addEventListener(\"input\", updateOutput);\nlastNameEl.addEventListener(\"input\", updateOutput);\n```\n\nExample:\n```text\n<label for=\"username\">Your name</label> <input type=\"text\" id=\"username\" />\n```\n\nExample:\n```text\n<input type=\"range\" id=\"b\" name=\"b\" value=\"50\" /> +\n<input type=\"number\" id=\"a\" name=\"a\" value=\"10\" /> =\n<output name=\"result\" for=\"a b\">60</output>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.603Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":65,"estimatedTokens":324}}130{"id":"doc-disabled_html_attribute_html_mdn-632dc669","source":"documentation","title":"disabled HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled","text":"Example:\n```text\n<form>\n <label for=\"name\">Name:</label>\n <input id=\"name\" name=\"name\" type=\"text\" />\n\n <label for=\"emp\">Employed:</label>\n <select id=\"emp\" name=\"emp\" disabled>\n <option>No</option>\n <option>Yes</option>\n </select>\n\n <label for=\"empDate\">Employment Date:</label>\n <input id=\"empDate\" name=\"empDate\" type=\"date\" disabled />\n\n <label for=\"resume\">Resume:</label>\n <input id=\"resume\" name=\"resume\" type=\"file\" />\n</form>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1em;\n}\n\n*:disabled {\n background-color: dimgrey;\n color: linen;\n opacity: 1;\n}\n```\n\nExample:\n```text\n<fieldset>\n <legend>Checkboxes</legend>\n <p>\n <label>\n <input type=\"checkbox\" name=\"ch-box\" value=\"regular\" /> Regular\n </label>\n </p>\n <p>\n <label>\n <input type=\"checkbox\" name=\"ch-box\" value=\"disabled\" disabled /> disabled\n </label>\n </p>\n</fieldset>\n\n<fieldset>\n <legend>Radio buttons</legend>\n <p>\n <label> <input type=\"radio\" name=\"radio\" value=\"regular\" /> Regular </label>\n </p>\n <p>\n <label>\n <input type=\"radio\" name=\"radio\" value=\"disabled\" disabled /> disabled\n </label>\n </p>\n</fieldset>\n\n<p>\n <label\n >Select an option:\n <select>\n <optgroup label=\"Group 1\">\n <option>Option 1.1</option>\n </optgroup>\n <optgroup label=\"Group 2\">\n <option>Option 2.1</option>\n <option disabled>Option 2.2</option>\n <option>Option 2.3</option>\n </optgroup>\n <optgroup label=\"Group 3\" disabled>\n <option>Disabled 3.1</option>\n <option>Disabled 3.2</option>\n <option>Disabled 3.3</option>\n </optgroup>\n </select>\n </label>\n</p>\n\n<fieldset disabled>\n <legend>Disabled fieldset</legend>\n <p>\n <label>\n Name: <input type=\"radio\" name=\"radio\" value=\"regular\" /> Regular\n </label>\n </p>\n <p>\n <label>Number: <input type=\"number\" /></label>\n </p>\n</fieldset>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.604Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":97,"estimatedTokens":483}}131{"id":"doc-form_html_attribute_html_mdn-b0e00313","source":"documentation","title":"form HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form","text":"Example:\n```text\n<form id=\"externalForm\"></form>\n<form id=\"internalForm\">\n <label for=\"username\">Username:</label>\n <input form=\"externalForm\" type=\"text\" name=\"username\" id=\"username\" />\n</form>\n```\n\nExample:\n```text\n<form id=\"exampleForm\"></form>\n\n<fieldset form=\"exampleForm\">\n <legend>Login information</legend>\n <label\n >Username: <input form=\"exampleForm\" type=\"text\" name=\"username\"\n /></label>\n <label>Password: <input type=\"password\" name=\"password\" /></label>\n</fieldset>\n```\n\nExample:\n```text\n<form id=\"calcForm\">\n <label>First number: <input id=\"a\" value=\"2\" type=\"number\" /></label>\n <label>Second number: <input id=\"b\" value=\"3\" type=\"number\" /></label>\n <label>Sum: <output name=\"result\" for=\"a b\" form=\"calcForm\">5</output></label>\n</form>\n```\n\nExample:\n```text\n<form id=\"loginForm\">\n <label>Username: <input type=\"text\" name=\"username\" /></label>\n</form>\n\n<label\n >Password: <input form=\"loginForm\" type=\"password\" name=\"password\"\n/></label>\n<label>\n Choose an option:\n <select form=\"loginForm\" name=\"options\">\n <option value=\"A\">A</option>\n <option value=\"B\">B</option>\n </select>\n</label>\n<label\n >Description:\n <textarea form=\"loginForm\" rows=\"4\" name=\"description\">\nHello, World!</textarea>\n</label>\n<button form=\"loginForm\" type=\"submit\" name=\"submitLogin\" value=\"Login\">\n Submit\n</button>\n```\n\nExample:\n```text\n<form id=\"targetForm\">\n <input type=\"text\" name=\"targetInput\" />\n</form>\n<form id=\"parentForm\">\n <button form=\"targetForm\" type=\"submit\" name=\"submitTarget\" value=\"Target\">\n Submit target form\n </button>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.604Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":70,"estimatedTokens":399}}132{"id":"doc-dirname_html_attribute_html_mdn-9e03d286","source":"documentation","title":"dirname HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/dirname","text":"Example:\n```text\n<form method=\"get\" action=\"https://www.example.com/submit\">\n <textarea name=\"comment\" dir=\"auto\" dirname=\"comment-direction\">ุณูุจ</textarea>\n <button type=\"submit\">Send my greetings</button>\n</form>\n```\n\nExample:\n```text\nhttps://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl\n```\n\nExample:\n```text\n<form method=\"get\" action=\"https://www.example.com/submit\">\n <input\n type=\"text\"\n name=\"comment-input\"\n dir=\"auto\"\n dirname=\"comment-direction\"\n value=\"Hello\" />\n <button type=\"submit\">Send my greetings</button>\n</form>\n```\n\nExample:\n```text\nhttps://www.example.com/submit?comment-input=Hello&comment-direction=ltr\n```\n\nExample:\n```text\nhttps://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.605Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":37,"estimatedTokens":206}}133{"id":"doc-required_html_attribute_html_mdn-79dc3c5e","source":"documentation","title":"required HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required","text":"Example:\n```text\n<form>\n <div class=\"group\">\n <input type=\"text\" />\n <label>Normal</label>\n </div>\n <div class=\"group\">\n <input type=\"text\" required />\n <label>Required</label>\n </div>\n <input type=\"submit\" />\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.606Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":16,"estimatedTokens":63}}134{"id":"doc-size_html_attribute_html_mdn-80197b7b","source":"documentation","title":"size HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/size","text":"Example:\n```text\n<label for=\"firstName\">First Name:</label>\n<input id=\"firstName\" name=\"firstName\" type=\"text\" size=\"10\" />\n\n<label for=\"lastName\">Last Name:</label>\n<input id=\"lastName\" name=\"lastName\" type=\"text\" size=\"20\" />\n\n<label for=\"fruit\">Favorite fruit:</label>\n<select id=\"fruit\" name=\"fruit\" size=\"2\">\n <option>Orange</option>\n <option>Banana</option>\n <option>Apple</option>\n</select>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1rem;\n}\n```\n\nExample:\n```text\n<label for=\"fruit\">Enter a fruit</label>\n<input type=\"text\" size=\"15\" id=\"fruit\" />\n<label for=\"vegetable\">Enter a vegetable</label>\n<input type=\"text\" id=\"vegetable\" />\n\n<select name=\"fruits\" size=\"5\">\n <option>banana</option>\n <option>cherry</option>\n <option>strawberry</option>\n <option>durian</option>\n <option>blueberry</option>\n</select>\n\n<select name=\"vegetables\" size=\"5\">\n <option>carrot</option>\n <option>cucumber</option>\n <option>cauliflower</option>\n <option>celery</option>\n <option>collard greens</option>\n</select>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.606Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":49,"estimatedTokens":263}}135{"id":"doc-multiple_html_attribute_html_mdn-8e9045bc","source":"documentation","title":"multiple HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/multiple","text":"Example:\n```text\n<label for=\"recipients\">Where should we send the receipt?</label>\n<input id=\"recipients\" name=\"recipients\" type=\"email\" multiple />\n\n<label for=\"shakes\">Which shakes would you like to order?</label>\n<select id=\"shakes\" name=\"shakes\" multiple>\n <option>Vanilla Shake</option>\n <option>Strawberry Shake</option>\n <option>Chocolate Shake</option>\n</select>\n\n<label for=\"payment\">How would you like to pay?</label>\n<select id=\"payment\" name=\"payment\">\n <option>Credit card</option>\n <option>Bank Transfer</option>\n</select>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1em;\n}\n\ninput,\nselect {\n width: 100%;\n}\n\ninput:invalid {\n background-color: lightpink;\n}\n```\n\nExample:\n```text\n<input type=\"email\" multiple name=\"emails\" id=\"emails\" />\n```\n\nExample:\n```text\n<input type=\"file\" multiple name=\"uploads\" id=\"uploads\" />\n```\n\nExample:\n```text\n<select multiple name=\"dwarfs\" id=\"dwarfs\">\n <option>Grumpy</option>\n <option>Happy</option>\n <option>Sleepy</option>\n <option>Bashful</option>\n <option>Sneezy</option>\n <option>Dopey</option>\n <option>Doc</option>\n</select>\n```\n\nExample:\n```text\n<label for=\"emails\">Who do you want to email?</label>\n<input\n type=\"email\"\n multiple\n name=\"emails\"\n id=\"emails\"\n list=\"dwarf-emails\"\n required\n size=\"64\" />\n\n<datalist id=\"dwarf-emails\">\n <option value=\"grumpy@woodworkers.com\">Grumpy</option>\n <option value=\"happy@woodworkers.com\">Happy</option>\n <option value=\"sleepy@woodworkers.com\">Sleepy</option>\n <option value=\"bashful@woodworkers.com\">Bashful</option>\n <option value=\"sneezy@woodworkers.com\">Sneezy</option>\n <option value=\"dopey@woodworkers.com\">Dopey</option>\n <option value=\"doc@woodworkers.com\">Doc</option>\n</datalist>\n```\n\nExample:\n```text\ninput:invalid {\n border: red solid 3px;\n}\n```\n\nExample:\n```text\n<form method=\"post\" enctype=\"multipart/form-data\">\n <p>\n <label for=\"uploads\"> Choose the images you want to upload: </label>\n <input\n type=\"file\"\n id=\"uploads\"\n name=\"uploads\"\n accept=\".jpg, .jpeg, .png, .svg, .gif\"\n multiple />\n </p>\n <p>\n <label for=\"text\">Pick a text file to upload: </label>\n <input type=\"file\" id=\"text\" name=\"text\" accept=\".txt\" />\n </p>\n <p>\n <input type=\"submit\" value=\"Submit\" />\n </p>\n</form>\n```\n\nExample:\n```text\n<form method=\"get\" action=\"#\">\n <p>\n <label for=\"dwarfs\">Select the dwarf woodsman you like:</label>\n <select multiple name=\"dwarfs\" id=\"dwarfs\">\n <option>grumpy@woodworkers.com</option>\n <option>happy@woodworkers.com</option>\n <option>sleepy@woodworkers.com</option>\n <option>bashful@woodworkers.com</option>\n <option>sneezy@woodworkers.com</option>\n <option>dopey@woodworkers.com</option>\n <option>doc@woodworkers.com</option>\n </select>\n </p>\n <p>\n <label for=\"favoriteOnly\">Select your favorite:</label>\n <select name=\"favoriteOnly\" id=\"favoriteOnly\">\n <option>grumpy@woodworkers.com</option>\n <option>happy@woodworkers.com</option>\n <option>sleepy@woodworkers.com</option>\n <option>bashful@woodworkers.com</option>\n <option>sneezy@woodworkers.com</option>\n <option>dopey@woodworkers.com</option>\n <option>doc@woodworkers.com</option>\n </select>\n </p>\n <p>\n <input type=\"submit\" value=\"Submit\" />\n </p>\n</form>\n```\n\nExample:\n```text\n/* uncomment this CSS to make the multiple the same height as the single */\n\n/*\nselect[multiple] {\n height: 1.5em;\n vertical-align: top;\n}\nselect[multiple]:focus,\nselect[multiple]:active {\n height: auto;\n}\n*/\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.607Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":161,"estimatedTokens":893}}136{"id":"doc-maxlength_html_attribute_html_mdn-3c9f7ac7","source":"documentation","title":"maxlength HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength","text":"Example:\n```text\n<label for=\"name\">Product name:</label>\n<input\n id=\"name\"\n name=\"name\"\n type=\"text\"\n value=\"Shampoo\"\n minlength=\"3\"\n maxlength=\"20\"\n required />\n\n<label for=\"description\">Product description:</label>\n<textarea\n id=\"description\"\n name=\"description\"\n minlength=\"10\"\n maxlength=\"40\"\n required></textarea>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1em;\n}\n\ninput:valid,\ntextarea:valid {\n background-color: palegreen;\n}\n```\n\nExample:\n```text\n<input type=\"password\" maxlength=\"4\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.607Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":40,"estimatedTokens":136}}137{"id":"doc-placeholder_html_attribute_html_mdn-78e848d4","source":"documentation","title":"placeholder HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder","text":"Example:\n```text\n<form action=\"/en-US/docs/Web/HTML/Reference/Attributes/placeholder\">\n <label for=\"name\">Enter your name:</label>\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"e.g. Mike Shinoda\" />\n <button type=\"submit\">Submit</button>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.608Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":10,"estimatedTokens":69}}138{"id":"doc-pattern_html_attribute_html_mdn-24c1c7cc","source":"documentation","title":"pattern HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern","text":"Example:\n```text\n<label for=\"username\">Username: (3-16 characters)</label>\n<input\n id=\"username\"\n name=\"username\"\n type=\"text\"\n value=\"Sasha\"\n pattern=\"\\w{3,16}\"\n required />\n\n<label for=\"pin\">PIN: (4 digits)</label>\n<input id=\"pin\" name=\"pin\" type=\"password\" pattern=\"\\d{4,4}\" required />\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1em;\n}\n\ninput:valid {\n background-color: palegreen;\n}\n\ninput:invalid {\n background-color: lightpink;\n}\n```\n\nExample:\n```text\n<p>\n <label>\n Enter your phone number in the format (123) - 456 - 7890 (<input\n name=\"tel1\"\n type=\"tel\"\n pattern=\"[0-9]{3}\"\n placeholder=\"###\"\n aria-label=\"3-digit area code\"\n size=\"2\" />) -\n <input\n name=\"tel2\"\n type=\"tel\"\n pattern=\"[0-9]{3}\"\n placeholder=\"###\"\n aria-label=\"3-digit prefix\"\n size=\"2\" />\n -\n <input\n name=\"tel3\"\n type=\"tel\"\n pattern=\"[0-9]{4}\"\n placeholder=\"####\"\n aria-label=\"4-digit number\"\n size=\"3\" />\n </label>\n</p>\n```\n\nExample:\n```text\ninput:invalid {\n border: red solid 3px;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input\n type=\"text\"\n id=\"uname\"\n name=\"name\"\n required\n size=\"45\"\n pattern=\"[a-z]{4,8}\"\n title=\"4 to 8 lowercase letters\" />\n <span class=\"validity\"></span>\n <p>Usernames must be lowercase and 4-8 characters in length.</p>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\np {\n font-size: 80%;\n color: #999999;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.608Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":120,"estimatedTokens":467}}139{"id":"doc-min_html_attribute_html_mdn-42a3abf7","source":"documentation","title":"min HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/min","text":"Example:\n```text\ninput:invalid {\n border: solid red 3px;\n}\n```\n\nExample:\n```text\n<input id=\"myNumber\" name=\"myNumber\" type=\"number\" min=\"7.2\" value=\"8\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.609Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":44}}140{"id":"doc-minlength_html_attribute_html_mdn-34c60ec8","source":"documentation","title":"minlength HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength","text":"Example:\n```text\n<label for=\"name\">Product name:</label>\n<input\n id=\"name\"\n name=\"name\"\n type=\"text\"\n value=\"Shampoo\"\n minlength=\"3\"\n maxlength=\"20\"\n required />\n\n<label for=\"description\">Product description:</label>\n<textarea\n id=\"description\"\n name=\"description\"\n minlength=\"10\"\n maxlength=\"40\"\n required></textarea>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1em;\n}\n\ninput:valid,\ntextarea:valid {\n background-color: palegreen;\n}\n```\n\nExample:\n```text\n<label for=\"fruit\">Enter a fruit name that is at least 5 letters long</label>\n<input type=\"text\" minlength=\"5\" id=\"fruit\" />\n```\n\nExample:\n```text\ninput {\n border: 2px solid currentColor;\n}\ninput:invalid {\n border: 2px dashed red;\n}\ninput:invalid:focus {\n background-image: linear-gradient(pink, lightgreen);\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.609Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":54,"estimatedTokens":205}}141{"id":"doc-accesskey_html_global_attribute_html_mdn-a5d06544","source":"documentation","title":"accesskey HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/accesskey","text":"Example:\n```text\n<p>If you need to relax, press the <b>S</b>tress reliever!</p>\n<button accesskey=\"s\">Stress reliever</button>\n```\n\nExample:\n```text\nb {\n text-decoration: underline;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.610Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":14,"estimatedTokens":51}}142{"id":"doc-readonly_html_attribute_html_mdn-13800228","source":"documentation","title":"readonly HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly","text":"Example:\n```text\n<label for=\"firstName\">First Name:</label>\n<input id=\"firstName\" name=\"firstName\" type=\"text\" value=\"Adam\" />\n\n<label for=\"age\">Age:</label>\n<input id=\"age\" name=\"age\" type=\"number\" value=\"42\" readonly />\n\n<label for=\"hobbies\">Hobbies:</label>\n<textarea id=\"hobbies\" name=\"hobbies\" readonly>Baseball</textarea>\n```\n\nExample:\n```text\nlabel {\n display: block;\n margin-top: 1em;\n}\n\ninput:read-only,\ntextarea:read-only {\n background-color: silver;\n}\n```\n\nExample:\n```text\n<div class=\"group\">\n <input type=\"text\" value=\"Some value\" readonly id=\"text\" />\n <label for=\"text\">Text box</label>\n</div>\n<div class=\"group\">\n <input type=\"date\" value=\"2020-01-01\" readonly id=\"date\" />\n <label for=\"date\">Date</label>\n</div>\n<div class=\"group\">\n <input type=\"email\" value=\"Some value\" readonly id=\"email\" />\n <label for=\"email\">Email</label>\n</div>\n<div class=\"group\">\n <input type=\"password\" value=\"Some value\" readonly id=\"pwd\" />\n <label for=\"pwd\">Password</label>\n</div>\n<div class=\"group\">\n <textarea readonly id=\"ta\">Some value</textarea>\n <label for=\"ta\">Message</label>\n</div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.610Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":50,"estimatedTokens":280}}143{"id":"doc-step_html_attribute_html_mdn-fc0a651c","source":"documentation","title":"step HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/step","text":"Example:\n```text\n<input type=\"number\" min=\"10\" step=\"2\" />\n```\n\nExample:\n```text\ninput:invalid {\n border: solid red 3px;\n}\n```\n\nExample:\n```text\n<input id=\"myNumber\" name=\"myNumber\" type=\"number\" step=\"2\" min=\"1.2\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.611Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":18,"estimatedTokens":59}}144{"id":"doc-class_html_global_attribute_html_mdn-bcdae534","source":"documentation","title":"class HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/class","text":"Example:\n```text\n<p>Narrator: This is the beginning of the play.</p>\n\n<p class=\"note editorial\">Above point sounds a bit obvious. Remove/rewrite?</p>\n\n<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>\n\n<p class=\"note\">[Lights go up and wind blows; Caspian enters stage right]</p>\n```\n\nExample:\n```text\n.note {\n font-style: italic;\n font-weight: bold;\n}\n\n.editorial {\n background: rgb(255 0 0 / 0.25);\n padding: 10px;\n}\n\n.editorial::before {\n content: \"Editor: \";\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.611Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":29,"estimatedTokens":130}}145{"id":"doc-contenteditable_html_global_attribute_html_mdn-9c6f30f7","source":"documentation","title":"contenteditable HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable","text":"Example:\n```text\n<blockquote contenteditable=\"true\">\n <p>Edit this content to add your own quote</p>\n</blockquote>\n\n<cite contenteditable=\"true\">-- Write your own name here</cite>\n```\n\nExample:\n```text\nblockquote {\n background: #eeeeee;\n border-radius: 5px;\n margin: 16px 0;\n}\n\nblockquote p {\n padding: 15px;\n}\n\ncite {\n margin: 16px 32px;\n font-weight: bold;\n}\n\nblockquote p::before {\n content: \"\\201C\";\n}\n\nblockquote p::after {\n content: \"\\201D\";\n}\n\n[contenteditable=\"true\"] {\n caret-color: red;\n}\n```\n\nExample:\n```text\n<h2>Content to copy</h2>\n<p class=\"instructions\">\n Copy all the text in the block below and paste it into each of the\n contenteditable blocks to compare the results.\n</p>\n<section class=\"copying\">\n <div class=\"copy\">\n <p>\n This is a paragraph containing <strong>Bold</strong>, <em>Italic</em>, and\n <span class=\"red\">red</span> text, followed by an ordered list:\n </p>\n <ol>\n <li>Step one</li>\n <li>Step two</li>\n <li>Step three</li>\n </ol>\n </div>\n</section>\n```\n\nExample:\n```text\n<h2>Pasting areas</h2>\n<section class=\"pasting\">\n <div class=\"wrapper\">\n <h3>contenteditable=\"true\"</h3>\n <div contenteditable=\"true\"></div>\n </div>\n <div class=\"wrapper\">\n <h3>contenteditable=\"plaintext-only\"</h3>\n <div contenteditable=\"plaintext-only\"></div>\n </div>\n</section>\n```\n\nExample:\n```text\nh2 {\n margin-bottom: 0;\n}\n.copying {\n font-family: \"Georgia\", serif;\n margin: 1rem;\n padding: 1rem;\n border: solid black 1px;\n}\n.red {\n color: red;\n}\n.pasting {\n display: flex;\n flex-direction: row;\n gap: 1rem;\n width: 100%;\n .wrapper {\n flex: 1 1;\n margin: 0;\n padding: 0;\n }\n h3 {\n font-family: monospace;\n }\n [contenteditable] {\n min-height: 3rem;\n border: solid 1px;\n padding: 0.5rem;\n background-color: whitesmoke;\n }\n [contenteditable=\"true\"] {\n caret-color: blue;\n }\n [contenteditable=\"plaintext-only\"] {\n caret-color: red;\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.611Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":119,"estimatedTokens":494}}146{"id":"doc-autocapitalize_html_global_attribute_html_mdn-e4788ee6","source":"documentation","title":"autocapitalize HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocapitalize","text":"Example:\n```text\n<p>Form to test different autocapitalize settings:</p>\n\n<form>\n <div>\n <label for=\"default\">Default: no autocapitalize set</label>\n <input type=\"text\" id=\"default\" name=\"default\" />\n </div>\n <div>\n <label for=\"off\">autocapitalize=\"off\"</label>\n <input type=\"text\" id=\"off\" name=\"off\" autocapitalize=\"off\" />\n </div>\n <div>\n <label for=\"none\">autocapitalize=\"none\"</label>\n <input type=\"text\" id=\"none\" name=\"none\" autocapitalize=\"none\" />\n </div>\n <div>\n <label for=\"on\">autocapitalize=\"on\"</label>\n <input type=\"text\" id=\"on\" name=\"on\" autocapitalize=\"on\" />\n </div>\n <div>\n <label for=\"sentences\">autocapitalize=\"sentences\"</label>\n <input\n type=\"text\"\n id=\"sentences\"\n name=\"sentences\"\n autocapitalize=\"sentences\" />\n </div>\n <div>\n <label for=\"words\">autocapitalize=\"words\"</label>\n <input type=\"text\" id=\"words\" name=\"words\" autocapitalize=\"words\" />\n </div>\n <div>\n <label for=\"characters\">autocapitalize=\"characters\"</label>\n <input\n type=\"text\"\n id=\"characters\"\n name=\"characters\"\n autocapitalize=\"characters\" />\n </div>\n <div>\n <label for=\"characters-ta\">autocapitalize=\"characters\" on textarea</label>\n <textarea\n type=\"text\"\n id=\"characters-ta\"\n name=\"characters-ta\"\n autocapitalize=\"characters\">\n </textarea>\n </div>\n</form>\n\n<hr />\n\n<p contenteditable autocapitalize=\"characters\">\n This content is editable and has autocapitalize=\"characters\" set on it\n</p>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 20px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.612Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":67,"estimatedTokens":397}}147{"id":"doc-autofocus_html_global_attribute_html_mdn-e964281a","source":"documentation","title":"autofocus HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus","text":"Example:\n```text\n<input name=\"q\" autofocus />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.613Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":16}}148{"id":"doc-autocorrect_html_global_attribute_html_mdn-65d1a25c","source":"documentation","title":"autocorrect HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect","text":"Example:\n```text\n<label for=\"vegetable\">A vegetable: </label>\n<input id=\"vegetable\" name=\"vegetable\" type=\"text\" autocorrect=\"on\" />\n\n<label for=\"fruit\">A fruit: </label>\n<input id=\"fruit\" name=\"fruit\" type=\"text\" autocorrect=\"off\" />\n```\n\nExample:\n```text\n<button id=\"reset\">Reset</button>\n<label for=\"username\">Name: </label>\n<input id=\"username\" name=\"username\" type=\"text\" autocorrect=\"off\" />\n<label for=\"bio\">Biography: </label>\n<textarea id=\"bio\" name=\"bio\"></textarea>\n```\n\nExample:\n```text\n<pre id=\"log\"></pre>\n```\n\nExample:\n```text\n#log {\n height: 75px;\n overflow: scroll;\n padding: 0.5rem;\n border: 1px solid black;\n}\n\nbutton,\ninput,\ntextarea {\n display: block;\n}\n```\n\nExample:\n```javascript\nconst logElement = document.querySelector(\"#log\");\nfunction log(text) {\n logElement.innerText = `${logElement.innerText}${text}\\n`;\n logElement.scrollTop = logElement.scrollHeight;\n}\n```\n\nExample:\n```javascript\nconst resetButton = document.querySelector(\"#reset\");\nconst userNameElement = document.querySelector(\"#username\");\nconst bioElement = document.querySelector(\"#bio\");\n\nif (!(\"autocorrect\" in HTMLElement.prototype)) {\n log(\"autocorrect not supported\");\n} else {\n log(`userNameElement.autocorrect: ${userNameElement.autocorrect}`);\n log(`bioElement.autocorrect: ${bioElement.autocorrect}`);\n}\n\nresetButton.addEventListener(\"click\", (e) => {\n userNameElement.value = \"\";\n bioElement.value = \"\";\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.614Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":68,"estimatedTokens":360}}149{"id":"doc-anchor_html_global_attribute_html_mdn-81e30415","source":"documentation","title":"anchor HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/anchor","text":"Example:\n```text\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus\n elementum sagittis vitae et.\n</p>\n\n<div class=\"anchor\" id=\"example-anchor\">โ๏ธ</div>\n\n<div class=\"infobox\" anchor=\"example-anchor\">\n <p>This is an information box.</p>\n</div>\n\n<p>\n Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu\n cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet\n aliquam.\n</p>\n\n<p>\n Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit\n scelerisque mauris pellentesque pulvinar pellentesque habitant morbi\n tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac\n habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.\n Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus\n accumsan.\n</p>\n```\n\nExample:\n```text\nbody {\n width: 50%;\n margin: 0 auto;\n}\n\n.anchor {\n font-size: 1.8rem;\n color: white;\n text-shadow: 1px 1px 1px black;\n background-color: hsl(240 100% 75%);\n width: fit-content;\n border-radius: 10px;\n border: 1px solid black;\n padding: 3px;\n}\n\n.infobox {\n color: darkblue;\n background-color: azure;\n border: 1px solid #dddddd;\n padding: 10px;\n border-radius: 10px;\n font-size: 1rem;\n}\n```\n\nExample:\n```text\n.infobox {\n position: fixed;\n left: anchor(right);\n align-self: anchor-center;\n margin-left: 10px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.614Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":69,"estimatedTokens":377}}150{"id":"doc-data_html_global_attributes_html_mdn-44f1e726","source":"documentation","title":"data-* HTML global attributes - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*","text":"Example:\n```text\n<h1>Secret agents</h1>\n\n<ul>\n <li data-id=\"10784\">Jason Walters, 003: Found dead in \"A View to a Kill\".</li>\n <li data-id=\"97865\">\n Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in\n \"Goldeneye\".\n </li>\n <li data-id=\"45732\">\n James Bond, 007: The main man; shaken but not stirred.\n </li>\n</ul>\n```\n\nExample:\n```text\nh1 {\n margin: 0;\n}\n\nul {\n margin: 10px 0 0;\n}\n\nli {\n position: relative;\n width: 200px;\n padding-bottom: 10px;\n}\n\nli::after {\n content: \"Data ID: \" attr(data-id);\n position: absolute;\n top: -22px;\n left: 10px;\n background: black;\n color: white;\n padding: 2px;\n border: 1px solid #eeeeee;\n opacity: 0;\n transition: 0.5s opacity;\n}\n\nli:hover::after {\n opacity: 1;\n}\n```\n\nExample:\n```text\n<img\n class=\"spaceship cruiserX3\"\n src=\"shipX3.png\"\n data-ship-id=\"324\"\n data-weapons=\"laserI laserII\"\n data-shields=\"72%\"\n data-x=\"414354\"\n data-y=\"85160\"\n data-z=\"31940\" />\n```\n\nExample:\n```javascript\nfunction clickSpaceship() {\n spaceships[this.dataset.shipId].blasted();\n}\n\ndocument.querySelectorAll(\"img.spaceship\").forEach((ship) => {\n ship.addEventListener(\"click\", clickSpaceship);\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.615Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":75,"estimatedTokens":298}}151{"id":"doc-dir_html_global_attribute_html_mdn-17abd870","source":"documentation","title":"dir HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir","text":"Example:\n```text\n<p dir=\"rtl\">\n This paragraph is in English but incorrectly goes right to left.\n</p>\n<p dir=\"ltr\">This paragraph is in English and correctly goes left to right.</p>\n\n<hr />\n\n<p>ูุฐู ุงูููุฑุฉ ุจุงููุบุฉ ุงูุนุฑุจูุฉ ูููู ุจุดูู ุฎุงุทุฆ ู
ู ุงููุณุงุฑ ุฅูู ุงููู
ูู.</p>\n<p dir=\"auto\">\n ูุฐู ุงูููุฑุฉ ุจุงููุบุฉ ุงูุนุฑุจูุฉ ุ ูุฐุง ูุฌุจ ุงูุงูุชูุงู ู
ู ุงููู
ูู ุฅูู ุงููุณุงุฑ.\n</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.615Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":16,"estimatedTokens":92}}152{"id":"doc-is_html_global_attribute_html_mdn-be778d73","source":"documentation","title":"is HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/is","text":"Example:\n```javascript\n// Create a class for the element\nclass WordCount extends HTMLParagraphElement {\n constructor() {\n // Always call super first in constructor\n super();\n\n // Constructor contents omitted for brevity\n // โฆ\n }\n}\n\n// Define the new element\ncustomElements.define(\"word-count\", WordCount, { extends: \"p\" });\n```\n\nExample:\n```text\n<p is=\"word-count\"></p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.616Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":23,"estimatedTokens":101}}153{"id":"doc-enterkeyhint_html_global_attribute_html_mdn-3a9bd276","source":"documentation","title":"enterkeyhint HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint","text":"Example:\n```text\n<input enterkeyhint=\"go\" />\n\n<p contenteditable enterkeyhint=\"go\">https://example.org</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.616Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":8,"estimatedTokens":31}}154{"id":"doc-statements_and_declarations_javascript_mdn-9be3a4a5","source":"documentation","title":"Statements and declarations - JavaScript | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements","text":"Example:\n```javascript\nif (condition)\n statement1;\nelse\n statement2;\n```\n\nExample:\n```javascript\nif (condition)\n let i = 0; // SyntaxError: Lexical declaration cannot appear in a single-statement context\n```\n\nExample:\n```javascript\nif (condition)\n var i = 0;\n```\n\nExample:\n```javascript\nlabel: const a = 1; // SyntaxError: Lexical declaration cannot appear in a single-statement context\n```\n\nExample:\n```javascript\nlabel: {\n const a = 1;\n}\n\nif (condition) {\n let i = 0;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.619Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":37,"estimatedTokens":124}}155{"id":"doc-loops_and_iteration_javascript_mdn-0f468a0f","source":"documentation","title":"Loops and iteration - JavaScript | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration","text":"Example:\n```javascript\nfor (let step = 0; step < 5; step++) {\n // Runs 5 times, with values of step 0 through 4.\n console.log(\"Walking east one step\");\n}\n```\n\nExample:\n```javascript\nfor (initialization; condition; afterthought)\n statement\n```\n\nExample:\n```text\n<form name=\"selectForm\">\n <label for=\"musicTypes\"\n >Choose some music types, then click the button below:</label\n >\n <select id=\"musicTypes\" name=\"musicTypes\" multiple>\n <option selected>R&B</option>\n <option>Jazz</option>\n <option>Blues</option>\n <option>New Age</option>\n <option>Classical</option>\n <option>Opera</option>\n </select>\n <button id=\"btn\" type=\"button\">How many are selected?</button>\n</form>\n```\n\nExample:\n```javascript\nfunction countSelected(selectObject) {\n let numberSelected = 0;\n for (let i = 0; i < selectObject.options.length; i++) {\n if (selectObject.options[i].selected) {\n numberSelected++;\n }\n }\n return numberSelected;\n}\n\nconst btn = document.getElementById(\"btn\");\n\nbtn.addEventListener(\"click\", () => {\n const musicTypes = document.selectForm.musicTypes;\n console.log(`You have selected ${countSelected(musicTypes)} option(s).`);\n});\n```\n\nExample:\n```javascript\ndo\n statement\nwhile (condition);\n```\n\nExample:\n```javascript\nlet i = 0;\ndo {\n i += 1;\n console.log(i);\n} while (i < 5);\n```\n\nExample:\n```javascript\nwhile (condition)\n statement\n```\n\nExample:\n```javascript\nlet n = 0;\nlet x = 0;\nwhile (n < 3) {\n n++;\n x += n;\n}\n```\n\nExample:\n```javascript\n// Infinite loops are bad!\nwhile (true) {\n console.log(\"Hello, world!\");\n}\n```\n\nExample:\n```javascript\nlabel:\n statement\n```\n\nExample:\n```javascript\nbreak;\nbreak label;\n```\n\nExample:\n```javascript\nfor (let i = 0; i < a.length; i++) {\n if (a[i] === theValue) {\n break;\n }\n}\n```\n\nExample:\n```javascript\nlet x = 0;\nlet z = 0;\nlabelCancelLoops: while (true) {\n console.log(\"Outer loops:\", x);\n x += 1;\n z = 1;\n while (true) {\n console.log(\"Inner loops:\", z);\n z += 1;\n if (z === 10 && x === 10) {\n break labelCancelLoops;\n } else if (z === 10) {\n break;\n }\n }\n}\n```\n\nExample:\n```javascript\ncontinue;\ncontinue label;\n```\n\nExample:\n```javascript\nlet i = 0;\nlet n = 0;\nwhile (i < 5) {\n i++;\n if (i === 3) {\n continue;\n }\n n += i;\n console.log(n);\n}\n// Logs:\n// 1 3 7 12\n```\n\nExample:\n```javascript\nlet i = 0;\nlet j = 10;\ncheckIandJ: while (i < 4) {\n console.log(i);\n i += 1;\n checkJ: while (j > 4) {\n console.log(j);\n j -= 1;\n if (j % 2 === 0) {\n continue;\n }\n console.log(j, \"is odd.\");\n }\n console.log(\"i =\", i);\n console.log(\"j =\", j);\n}\n```\n\nExample:\n```javascript\nfor (variable in object)\n statement\n```\n\nExample:\n```javascript\nfunction dumpProps(obj, objName) {\n let result = \"\";\n for (const i in obj) {\n result += `${objName}.${i} = ${obj[i]}<br>`;\n }\n result += \"<hr>\";\n return result;\n}\n```\n\nExample:\n```text\ncar.make = Ford\ncar.model = Mustang\n```\n\nExample:\n```javascript\nfor (variable of iterable)\n statement\n```\n\nExample:\n```javascript\nconst arr = [3, 5, 7];\narr.foo = \"hello\";\n\nfor (const i in arr) {\n console.log(i);\n}\n// \"0\" \"1\" \"2\" \"foo\"\n\nfor (const i of arr) {\n console.log(i);\n}\n// Logs: 3 5 7\n```\n\nExample:\n```javascript\nconst obj = { foo: 1, bar: 2 };\n\nfor (const [key, val] of Object.entries(obj)) {\n console.log(key, val);\n}\n// \"foo\" 1\n// \"bar\" 2\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.620Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":22,"totalLines":233,"estimatedTokens":840}}156{"id":"doc-control_flow_and_error_handling_javascript_mdn-95b7fb84","source":"documentation","title":"Control flow and error handling - JavaScript | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling","text":"Example:\n```javascript\n{\n statement1;\n statement2;\n // โฆ\n statementN;\n}\n```\n\nExample:\n```javascript\nwhile (x < 10) {\n x++;\n}\n```\n\nExample:\n```javascript\nvar x = 1;\n{\n var x = 2;\n}\nconsole.log(x); // 2\n```\n\nExample:\n```javascript\nif (condition) {\n statement1;\n} else {\n statement2;\n}\n```\n\nExample:\n```javascript\nif (condition1) {\n statement1;\n} else if (condition2) {\n statement2;\n} else if (conditionN) {\n statementN;\n} else {\n statementLast;\n}\n```\n\nExample:\n```javascript\nif (condition) {\n // Statements for when condition is true\n // โฆ\n} else {\n // Statements for when condition is false\n // โฆ\n}\n```\n\nExample:\n```javascript\nif (x = y) {\n // statements here\n}\n```\n\nExample:\n```javascript\nconst b = new Boolean(false);\nif (b) {\n // this condition evaluates to true\n}\nif (b == true) {\n // this condition evaluates to false\n}\n```\n\nExample:\n```javascript\nfunction checkData() {\n if (document.form1.threeChar.value.length === 3) {\n return true;\n }\n alert(\n `Enter exactly three characters. ${document.form1.threeChar.value} is not valid.`,\n );\n return false;\n}\n```\n\nExample:\n```javascript\nswitch (expression) {\n case label1:\n statements1;\n break;\n case label2:\n statements2;\n break;\n // โฆ\n default:\n statementsDefault;\n}\n```\n\nExample:\n```javascript\nswitch (fruitType) {\n case \"Oranges\":\n console.log(\"Oranges are $0.59 a pound.\");\n break;\n case \"Apples\":\n console.log(\"Apples are $0.32 a pound.\");\n break;\n case \"Bananas\":\n console.log(\"Bananas are $0.48 a pound.\");\n break;\n case \"Cherries\":\n console.log(\"Cherries are $3.00 a pound.\");\n break;\n case \"Mangoes\":\n console.log(\"Mangoes are $0.56 a pound.\");\n break;\n case \"Papayas\":\n console.log(\"Papayas are $2.79 a pound.\");\n break;\n default:\n console.log(`Sorry, we are out of ${fruitType}.`);\n}\nconsole.log(\"Is there anything else you'd like?\");\n```\n\nExample:\n```javascript\nthrow expression;\n```\n\nExample:\n```javascript\nthrow \"Error2\"; // String type\nthrow 42; // Number type\nthrow true; // Boolean type\nthrow {\n toString() {\n return \"I'm an object!\";\n },\n};\n```\n\nExample:\n```javascript\nfunction getMonthName(mo) {\n mo--; // Adjust month number for array index (so that 0 = Jan, 11 = Dec)\n // prettier-ignore\n const months = [\n \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n ];\n if (!months[mo]) {\n throw new Error(\"Invalid month code\"); // throw keyword is used here\n }\n return months[mo];\n}\n\ntry {\n // statements to try\n monthName = getMonthName(myMonth); // function could throw exception\n} catch (e) {\n monthName = \"unknown\";\n logMyErrors(e); // pass exception object to error handler (i.e. your own function)\n}\n```\n\nExample:\n```javascript\ncatch (exception) {\n statements\n}\n```\n\nExample:\n```javascript\ntry {\n throw \"myException\"; // generates an exception\n} catch (err) {\n // statements to handle any exceptions\n logMyErrors(err); // pass exception object to error handler\n}\n```\n\nExample:\n```javascript\nopenMyFile();\ntry {\n writeMyFile(theData); // This may throw an error\n} catch (e) {\n handleError(e); // If an error occurred, handle it\n} finally {\n closeMyFile(); // Always close the resource\n}\n```\n\nExample:\n```javascript\nfunction f() {\n try {\n console.log(0);\n throw \"bogus\";\n } catch (e) {\n console.log(1);\n // This return statement is suspended\n // until finally block has completed\n return true;\n console.log(2); // not reachable\n } finally {\n console.log(3);\n return false; // overwrites the previous \"return\"\n // `f` exits here\n console.log(4); // not reachable\n }\n console.log(5); // not reachable\n}\nconsole.log(f()); // 0, 1, 3, false\n```\n\nExample:\n```javascript\nfunction f() {\n try {\n throw \"bogus\";\n } catch (e) {\n console.log('caught inner \"bogus\"');\n // This throw statement is suspended until\n // finally block has completed\n throw e;\n } finally {\n return false; // overwrites the previous \"throw\"\n // `f` exits here\n }\n}\n\ntry {\n console.log(f());\n} catch (e) {\n // this is never reached!\n // while f() executes, the `finally` block returns false,\n // which overwrites the `throw` inside the above `catch`\n console.log('caught outer \"bogus\"');\n}\n\n// Logs:\n// caught inner \"bogus\"\n// false\n```\n\nExample:\n```javascript\nfunction doSomethingErrorProne() {\n if (ourCodeMakesAMistake()) {\n throw new Error(\"The message\");\n }\n doSomethingToGetAJavaScriptError();\n}\n\ntry {\n doSomethingErrorProne();\n} catch (e) {\n // Now, we actually use `console.error()`\n console.error(e.name); // 'Error'\n console.error(e.message); // 'The message', or a JavaScript error message\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.621Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":20,"totalLines":274,"estimatedTokens":1173}}157{"id":"doc-working_with_objects_javascript_mdn-c83e90a7","source":"documentation","title":"Working with objects - JavaScript | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects","text":"Example:\n```javascript\nconst obj = {\n property1: value1, // property name may be an identifier\n 2: value2, // or a number\n \"property n\": value3, // or a string\n};\n```\n\nExample:\n```javascript\nlet x;\nif (cond) {\n x = { greeting: \"hi there\" };\n}\n```\n\nExample:\n```javascript\nconst myHonda = {\n color: \"red\",\n wheels: 4,\n engine: { cylinders: 4, size: 2.2 },\n};\n```\n\nExample:\n```javascript\nfunction Car(make, model, year) {\n this.make = make;\n this.model = model;\n this.year = year;\n}\n```\n\nExample:\n```javascript\nconst myCar = new Car(\"Eagle\", \"Talon TSi\", 1993);\n```\n\nExample:\n```javascript\nconst randCar = new Car(\"Nissan\", \"300ZX\", 1992);\nconst kenCar = new Car(\"Mazda\", \"Miata\", 1990);\n```\n\nExample:\n```javascript\nfunction Person(name, age, sex) {\n this.name = name;\n this.age = age;\n this.sex = sex;\n}\n```\n\nExample:\n```javascript\nconst rand = new Person(\"Rand McKinnon\", 33, \"M\");\nconst ken = new Person(\"Ken Jones\", 39, \"M\");\n```\n\nExample:\n```javascript\nfunction Car(make, model, year, owner) {\n this.make = make;\n this.model = model;\n this.year = year;\n this.owner = owner;\n}\n```\n\nExample:\n```javascript\nconst car1 = new Car(\"Eagle\", \"Talon TSi\", 1993, rand);\nconst car2 = new Car(\"Nissan\", \"300ZX\", 1992, ken);\n```\n\nExample:\n```javascript\ncar2.owner.name;\n```\n\nExample:\n```javascript\ncar1.color = \"black\";\n```\n\nExample:\n```javascript\n// Animal properties and method encapsulation\nconst animalProto = {\n type: \"Invertebrates\", // Default value of properties\n displayType() {\n // Method which will display the type of animal\n console.log(this.type);\n },\n};\n\n// Create a new animal type called `animal`\nconst animal = Object.create(animalProto);\nanimal.displayType(); // Logs: Invertebrates\n\n// Create a new animal type called fish\nconst fish = Object.create(animalProto);\nfish.type = \"Fishes\";\nfish.displayType(); // Logs: Fishes\n```\n\nExample:\n```javascript\nconst myCar = {\n make: \"Ford\",\n model: \"Mustang\",\n year: 1969,\n};\n```\n\nExample:\n```javascript\n// Dot notation\nmyCar.make = \"Ford\";\nmyCar.model = \"Mustang\";\nmyCar.year = 1969;\n\n// Bracket notation\nmyCar[\"make\"] = \"Ford\";\nmyCar[\"model\"] = \"Mustang\";\nmyCar[\"year\"] = 1969;\n```\n\nExample:\n```javascript\nconst myObj = {};\nconst str = \"myString\";\nconst rand = Math.random();\nconst anotherObj = {};\n\n// Create additional properties on myObj\nmyObj.type = \"Dot syntax for a key named type\";\nmyObj[\"date created\"] = \"This key has a space\";\nmyObj[str] = \"This key is in variable str\";\nmyObj[rand] = \"A random number is the key here\";\nmyObj[anotherObj] = \"This key is object anotherObj\";\nmyObj[\"\"] = \"This key is an empty string\";\n\nconsole.log(myObj);\n// {\n// type: 'Dot syntax for a key named type',\n// 'date created': 'This key has a space',\n// myString: 'This key is in variable str',\n// '0.6398914448618778': 'A random number is the key here',\n// '[object Object]': 'This key is object anotherObj',\n// '': 'This key is an empty string'\n// }\nconsole.log(myObj.myString); // 'This key is in variable str'\n```\n\nExample:\n```javascript\nstr = \"myString\";\nmyObj[str] = \"This key is in variable str\";\n\nconsole.log(myObj.str); // undefined\n\nconsole.log(myObj[str]); // 'This key is in variable str'\nconsole.log(myObj.myString); // 'This key is in variable str'\n```\n\nExample:\n```javascript\nlet propertyName = \"make\";\nmyCar[propertyName] = \"Ford\";\n\n// access different properties by changing the contents of the variable\npropertyName = \"model\";\nmyCar[propertyName] = \"Mustang\";\n\nconsole.log(myCar); // { make: 'Ford', model: 'Mustang' }\n```\n\nExample:\n```javascript\nmyCar.nonexistentProperty; // undefined\n```\n\nExample:\n```javascript\nfunction showProps(obj, objName) {\n let result = \"\";\n for (const i in obj) {\n // Object.hasOwn() is used to exclude properties from the object's\n // prototype chain and only show \"own properties\"\n if (Object.hasOwn(obj, i)) {\n result += `${objName}.${i} = ${obj[i]}\\n`;\n }\n }\n console.log(result);\n}\n```\n\nExample:\n```text\nmyCar.make = Ford\nmyCar.model = Mustang\nmyCar.year = 1969\n```\n\nExample:\n```javascript\nfunction showProps(obj, objName) {\n let result = \"\";\n Object.keys(obj).forEach((i) => {\n result += `${objName}.${i} = ${obj[i]}\\n`;\n });\n console.log(result);\n}\n```\n\nExample:\n```javascript\nfunction listAllProperties(myObj) {\n let objectToInspect = myObj;\n let result = [];\n\n while (objectToInspect !== null) {\n result = result.concat(Object.getOwnPropertyNames(objectToInspect));\n objectToInspect = Object.getPrototypeOf(objectToInspect);\n }\n\n return result;\n}\n```\n\nExample:\n```javascript\n// Creates a new object, myObj, with two properties, a and b.\nconst myObj = { a: 5, b: 12 };\n\n// Removes the a property, leaving myObj with only the b property.\ndelete myObj.a;\nconsole.log(\"a\" in myObj); // false\n```\n\nExample:\n```javascript\nCar.prototype.color = \"red\";\nconsole.log(car1.color); // \"red\"\n```\n\nExample:\n```javascript\nobjectName.methodName = functionName;\n\nconst myObj = {\n myMethod: function (params) {\n // do something\n },\n\n // this works too!\n myOtherMethod(params) {\n // do something else\n },\n};\n```\n\nExample:\n```javascript\nobjectName.methodName(params);\n```\n\nExample:\n```javascript\nCar.prototype.displayCar = function () {\n const result = `A Beautiful ${this.year} ${this.make} ${this.model}`;\n console.log(result);\n};\n```\n\nExample:\n```javascript\ncar1.displayCar();\ncar2.displayCar();\n```\n\nExample:\n```javascript\nconst manager = {\n name: \"Karina\",\n age: 27,\n job: \"Software Engineer\",\n};\nconst intern = {\n name: \"Tyrone\",\n age: 21,\n job: \"Software Engineer Intern\",\n};\n\nfunction sayHi() {\n console.log(`Hello, my name is ${this.name}`);\n}\n\n// Add sayHi function to both objects\nmanager.sayHi = sayHi;\nintern.sayHi = sayHi;\n\nmanager.sayHi(); // Hello, my name is Karina\nintern.sayHi(); // Hello, my name is Tyrone\n```\n\nExample:\n```javascript\nconst myObj = {\n a: 7,\n get b() {\n return this.a + 1;\n },\n set c(x) {\n this.a = x / 2;\n },\n};\n\nconsole.log(myObj.a); // 7\nconsole.log(myObj.b); // 8, returned from the get b() method\nmyObj.c = 50; // Calls the set c(x) method\nconsole.log(myObj.a); // 25\n```\n\nExample:\n```javascript\nconst myObj = { a: 0 };\n\nObject.defineProperties(myObj, {\n b: {\n get() {\n return this.a + 1;\n },\n },\n c: {\n set(x) {\n this.a = x / 2;\n },\n },\n});\n\nmyObj.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property\nconsole.log(myObj.b); // Runs the getter, which yields a + 1 or 6\n```\n\nExample:\n```javascript\n// Two variables, two distinct objects with the same properties\nconst fruit = { name: \"apple\" };\nconst anotherFruit = { name: \"apple\" };\n\nfruit == anotherFruit; // return false\nfruit === anotherFruit; // return false\n```\n\nExample:\n```javascript\n// Two variables, a single object\nconst fruit = { name: \"apple\" };\nconst anotherFruit = fruit; // Assign fruit object reference to anotherFruit\n\n// Here fruit and anotherFruit are pointing to same object\nfruit == anotherFruit; // return true\nfruit === anotherFruit; // return true\n\nfruit.name = \"grape\";\nconsole.log(anotherFruit); // { name: \"grape\" }; not { name: \"apple\" }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.623Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":34,"totalLines":373,"estimatedTokens":1777}}158{"id":"doc-using_classes_javascript_mdn-93d12461","source":"documentation","title":"Using classes - JavaScript | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes","text":"Example:\n```javascript\nconst bigDay = new Date(2019, 6, 19);\nconsole.log(bigDay.toLocaleDateString());\nif (bigDay.getTime() < Date.now()) {\n console.log(\"Once upon a time...\");\n}\n```\n\nExample:\n```javascript\nclass MyClass {\n // class body...\n}\n```\n\nExample:\n```javascript\nclass MyClass {\n // Constructor\n constructor() {\n // Constructor body\n }\n // Instance field\n myField = \"foo\";\n // Instance method\n myMethod() {\n // myMethod body\n }\n // Static field\n static myStaticField = \"bar\";\n // Static method\n static myStaticMethod() {\n // myStaticMethod body\n }\n // Static block\n static {\n // Static initialization code\n }\n // Fields, methods, static fields, and static methods all have\n // \"private\" forms\n #myPrivateField = \"bar\";\n}\n```\n\nExample:\n```javascript\nfunction MyClass() {\n this.myField = \"foo\";\n // Constructor body\n}\nMyClass.myStaticField = \"bar\";\nMyClass.myStaticMethod = function () {\n // myStaticMethod body\n};\nMyClass.prototype.myMethod = function () {\n // myMethod body\n};\n\n(function () {\n // Static initialization code\n})();\n```\n\nExample:\n```javascript\nconst myInstance = new MyClass();\nconsole.log(myInstance.myField); // 'foo'\nmyInstance.myMethod();\n```\n\nExample:\n```javascript\nconst myInstance = MyClass(); // TypeError: Class constructor MyClass cannot be invoked without 'new'\n```\n\nExample:\n```javascript\nnew MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization\n\nclass MyClass {}\n```\n\nExample:\n```javascript\nconst MyClass = class {\n // Class body...\n};\n```\n\nExample:\n```javascript\nconst MyClass = class MyClassLongerName {\n // Class body. Here MyClass and MyClassLongerName point to the same class.\n};\nnew MyClassLongerName(); // ReferenceError: MyClassLongerName is not defined\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n // Assign the RGB values as a property of `this`.\n this.values = [r, g, b];\n }\n}\n```\n\nExample:\n```javascript\nconst red = new Color(255, 0, 0);\nconsole.log(red);\n```\n\nExample:\n```text\nObject { values: (3) [โฆ] }\n values: Array(3) [ 255, 0, 0 ]\n```\n\nExample:\n```javascript\nfunction createColor(r, g, b) {\n return {\n values: [r, g, b],\n };\n}\n```\n\nExample:\n```javascript\nclass Color {\n constructor(...values) {\n this.values = values;\n }\n}\n\nconst red = new Color(255, 0, 0);\n// Creates an instance with the same shape as above.\n```\n\nExample:\n```javascript\nconst red = new Color(255, 0, 0);\nconst anotherRed = new Color(255, 0, 0);\nconsole.log(red === anotherRed); // false\n```\n\nExample:\n```javascript\nclass MyClass {\n constructor() {\n this.myField = \"foo\";\n return {};\n }\n}\n\nconsole.log(new MyClass().myField); // undefined\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n this.values = [r, g, b];\n }\n getRed() {\n return this.values[0];\n }\n}\n\nconst red = new Color(255, 0, 0);\nconsole.log(red.getRed()); // 255\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n this.values = [r, g, b];\n this.getRed = function () {\n return this.values[0];\n };\n }\n}\n```\n\nExample:\n```javascript\nconsole.log(new Color().getRed === new Color().getRed); // false\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n this.values = [r, g, b];\n }\n getRed() {\n return this.values[0];\n }\n setRed(value) {\n this.values[0] = value;\n }\n}\n\nconst red = new Color(255, 0, 0);\nred.setRed(0);\nconsole.log(red.getRed()); // 0; of course, it should be called \"black\" at this stage!\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n this.values = [r, g, b];\n }\n}\n\nconst red = new Color(255, 0, 0);\nred.values[0] = 0;\nconsole.log(red.values[0]); // 0\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n // values is now an HSL array!\n this.values = rgbToHSL([r, g, b]);\n }\n getRed() {\n return hslToRGB(this.values)[0];\n }\n setRed(value) {\n const rgb = hslToRGB(this.values);\n rgb[0] = value;\n this.values = rgbToHSL(rgb);\n }\n}\n\nconst red = new Color(255, 0, 0);\nconsole.log(red.values[0]); // 0; It's not 255 anymore, because the H value for pure red is 0\n```\n\nExample:\n```javascript\nclass Color {\n // Declare: every Color instance has a private field called #values.\n #values;\n constructor(r, g, b) {\n this.#values = [r, g, b];\n }\n getRed() {\n return this.#values[0];\n }\n setRed(value) {\n this.#values[0] = value;\n }\n}\n\nconst red = new Color(255, 0, 0);\nconsole.log(red.getRed()); // 255\n```\n\nExample:\n```javascript\nconsole.log(red.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class\n```\n\nExample:\n```javascript\nclass Color {\n #values;\n constructor(r, g, b) {\n this.#values = [r, g, b];\n }\n getRed() {\n return this.#values[0];\n }\n setRed(value) {\n if (value < 0 || value > 255) {\n throw new RangeError(\"Invalid R value\");\n }\n this.#values[0] = value;\n }\n}\n\nconst red = new Color(255, 0, 0);\nred.setRed(1000); // RangeError: Invalid R value\n```\n\nExample:\n```javascript\nclass Color {\n #values;\n constructor(r, g, b) {\n this.#values = [r, g, b];\n }\n redDifference(anotherColor) {\n // #values doesn't necessarily need to be accessed from this:\n // you can access private fields of other instances belonging\n // to the same class.\n return this.#values[0] - anotherColor.#values[0];\n }\n}\n\nconst red = new Color(255, 0, 0);\nconst crimson = new Color(220, 20, 60);\nred.redDifference(crimson); // 35\n```\n\nExample:\n```javascript\nclass Color {\n #values;\n constructor(r, g, b) {\n this.#values = [r, g, b];\n }\n redDifference(anotherColor) {\n if (!(#values in anotherColor)) {\n throw new TypeError(\"Color instance expected\");\n }\n return this.#values[0] - anotherColor.#values[0];\n }\n}\n```\n\nExample:\n```javascript\nclass BadIdeas {\n #firstName;\n #firstName; // syntax error occurs here\n #lastName;\n constructor() {\n delete this.#lastName; // also a syntax error\n }\n}\n```\n\nExample:\n```javascript\nclass Counter extends HTMLElement {\n #xValue = 0;\n constructor() {\n super();\n this.onclick = this.#clicked.bind(this);\n }\n get #x() {\n return this.#xValue;\n }\n set #x(value) {\n this.#xValue = value;\n window.requestAnimationFrame(this.#render.bind(this));\n }\n #clicked() {\n this.#x++;\n }\n #render() {\n this.textContent = this.#x.toString();\n }\n connectedCallback() {\n this.#render();\n }\n}\n\ncustomElements.define(\"num-counter\", Counter);\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n this.values = [r, g, b];\n }\n get red() {\n return this.values[0];\n }\n set red(value) {\n this.values[0] = value;\n }\n}\n\nconst red = new Color(255, 0, 0);\nred.red = 0;\nconsole.log(red.red); // 0\n```\n\nExample:\n```javascript\nclass Color {\n constructor(r, g, b) {\n this.values = [r, g, b];\n }\n get red() {\n return this.values[0];\n }\n}\n\nconst red = new Color(255, 0, 0);\nred.red = 0;\nconsole.log(red.red); // 255\n```\n\nExample:\n```javascript\nclass MyClass {\n luckyNumber = Math.random();\n}\nconsole.log(new MyClass().luckyNumber); // 0.5\nconsole.log(new MyClass().luckyNumber); // 0.3\n```\n\nExample:\n```javascript\nclass MyClass {\n constructor() {\n this.luckyNumber = Math.random();\n }\n}\n```\n\nExample:\n```javascript\nclass Color {\n static isValid(r, g, b) {\n return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;\n }\n}\n\nColor.isValid(255, 0, 0); // true\nColor.isValid(1000, 0, 0); // false\n```\n\nExample:\n```javascript\nconsole.log(new Color(0, 0, 0).isValid); // undefined\n```\n\nExample:\n```javascript\nclass MyClass {\n static {\n MyClass.myStaticProperty = \"foo\";\n }\n}\n\nconsole.log(MyClass.myStaticProperty); // 'foo'\n```\n\nExample:\n```javascript\nclass Color {\n #values;\n constructor(r, g, b, a = 1) {\n this.#values = [r, g, b, a];\n }\n get alpha() {\n return this.#values[3];\n }\n set alpha(value) {\n if (value < 0 || value > 1) {\n throw new RangeError(\"Alpha value must be between 0 and 1\");\n }\n this.#values[3] = value;\n }\n}\n```\n\nExample:\n```javascript\nclass ColorWithAlpha extends Color {\n #alpha;\n constructor(r, g, b, a) {\n super(r, g, b);\n this.#alpha = a;\n }\n get alpha() {\n return this.#alpha;\n }\n set alpha(value) {\n if (value < 0 || value > 1) {\n throw new RangeError(\"Alpha value must be between 0 and 1\");\n }\n this.#alpha = value;\n }\n}\n```\n\nExample:\n```javascript\nconst color = new ColorWithAlpha(255, 0, 0, 0.5);\nconsole.log(color.red); // 255\n```\n\nExample:\n```javascript\nconsole.log(red.toString()); // [object Object]\n```\n\nExample:\n```javascript\nclass Color {\n #values;\n // โฆ\n toString() {\n return this.#values.join(\", \");\n }\n}\n\nconsole.log(new Color(255, 0, 0).toString()); // '255, 0, 0'\n```\n\nExample:\n```javascript\nclass ColorWithAlpha extends Color {\n #alpha;\n // โฆ\n toString() {\n // Call the parent class's toString() and build on the return value\n return `${super.toString()}, ${this.#alpha}`;\n }\n}\n\nconsole.log(new ColorWithAlpha(255, 0, 0, 0.5).toString()); // '255, 0, 0, 0.5'\n```\n\nExample:\n```javascript\nclass ColorWithAlpha extends Color {\n // โฆ\n static isValid(r, g, b, a) {\n // Call the parent class's isValid() and build on the return value\n return super.isValid(r, g, b) && a >= 0 && a <= 1;\n }\n}\n\nconsole.log(ColorWithAlpha.isValid(255, 0, 0, -1)); // false\n```\n\nExample:\n```javascript\nclass ColorWithAlpha extends Color {\n log() {\n console.log(this.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class\n }\n}\n```\n\nExample:\n```javascript\nconst color = new ColorWithAlpha(255, 0, 0, 0.5);\nconsole.log(color instanceof Color); // true\nconsole.log(color instanceof ColorWithAlpha); // true\n```\n\nExample:\n```javascript\nfunction incrementDay(date) {\n return new Date(date.setDate(date.getDate() + 1));\n}\nconst date = new Date(); // 2019-06-19\nconst newDay = incrementDay(date);\nconsole.log(newDay); // 2019-06-20\n// The old date is modified as well!?\nconsole.log(date); // 2019-06-20\n```\n\nExample:\n```javascript\nfunction isRed(color) {\n return color.red === 255;\n}\nfunction isValidColor(color) {\n return (\n color.red >= 0 &&\n color.red <= 255 &&\n color.green >= 0 &&\n color.green <= 255 &&\n color.blue >= 0 &&\n color.blue <= 255\n );\n}\n// โฆ\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.625Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":47,"totalLines":587,"estimatedTokens":2569}}159{"id":"doc-working_with_the_history_api_web_apis_mdn-6d350706","source":"documentation","title":"Working with the History API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API","text":"Example:\n```javascript\ndocument.addEventListener(\"click\", async (event) => {\n const creature = event.target.getAttribute(\"data-creature\");\n if (creature) {\n // Prevent a new page from loading\n event.preventDefault();\n try {\n // Fetch new content\n const response = await fetch(`creatures/${creature}.json`);\n const result = await response.json();\n // Update the page with the new content\n displayContent(result);\n } catch (err) {\n console.error(err);\n }\n }\n});\n```\n\nExample:\n```json\n{\n \"description\": \"Bald eagles are not actually bald.\",\n \"image\": {\n \"src\": \"images/eagle.jpg\",\n \"alt\": \"A bald eagle\"\n },\n \"name\": \"Eagle\"\n}\n```\n\nExample:\n```javascript\n// Update the page with the new content\nfunction displayContent(content) {\n document.title = `Creatures: ${content.name}`;\n\n const description = document.querySelector(\"#description\");\n description.textContent = content.description;\n\n const photo = document.querySelector(\"#photo\");\n photo.setAttribute(\"src\", content.image.src);\n photo.setAttribute(\"alt\", content.image.alt);\n}\n```\n\nExample:\n```javascript\ndocument.addEventListener(\"click\", async (event) => {\n const creature = event.target.getAttribute(\"data-creature\");\n if (creature) {\n event.preventDefault();\n try {\n const response = await fetch(`creatures/${creature}.json`);\n const result = await response.json();\n displayContent(result);\n // Add a new entry to the history.\n // This simulates loading a new page.\n history.pushState(result, \"\", creature);\n } catch (err) {\n console.error(err);\n }\n }\n});\n```\n\nExample:\n```javascript\n// Handle forward/back buttons\nwindow.addEventListener(\"popstate\", (event) => {\n // If a state has been provided, we have a \"simulated\" page\n // and we update the current page.\n if (event.state) {\n // Simulate the loading of the previous page\n displayContent(event.state);\n }\n});\n```\n\nExample:\n```javascript\n// Create state on page load and replace the current history with it\nconst image = document.querySelector(\"#photo\");\nconst initialState = {\n description: document.querySelector(\"#description\").textContent,\n image: {\n src: image.getAttribute(\"src\"),\n alt: image.getAttribute(\"alt\"),\n },\n name: \"Home\",\n};\nhistory.replaceState(initialState, \"\", document.location.href);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.627Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":96,"estimatedTokens":593}}160{"id":"doc-geolocation_api_web_apis_mdn-7879e3d2","source":"documentation","title":"Geolocation API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API","text":"Example:\n```text\nPermissions-Policy: geolocation=(self b.example.com)\n```\n\nExample:\n```text\n<iframe src=\"https://b.example.com\" allow=\"geolocation\"></iframe>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.629Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":44}}161{"id":"doc-using_the_fetch_api_web_apis_mdn-f10cc26a","source":"documentation","title":"Using the Fetch API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch","text":"Example:\n```javascript\nasync function getData() {\n const url = \"https://example.org/products.json\";\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Response status: ${response.status}`);\n }\n\n const result = await response.json();\n console.log(result);\n } catch (error) {\n console.error(error.message);\n }\n}\n```\n\nExample:\n```javascript\nconst response = await fetch(\"https://example.org/post\", {\n method: \"POST\",\n // โฆ\n});\n```\n\nExample:\n```javascript\nconst response = await fetch(\"https://example.org/post\", {\n method: \"POST\",\n body: JSON.stringify({ username: \"example\" }),\n // โฆ\n});\n```\n\nExample:\n```javascript\nconst response = await fetch(\"https://example.org/post\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n },\n // Automatically converted to \"username=example&password=password\"\n body: new URLSearchParams({ username: \"example\", password: \"password\" }),\n // โฆ\n});\n```\n\nExample:\n```javascript\nconst request = new Request(\"https://example.org/post\", {\n method: \"POST\",\n body: JSON.stringify({ username: \"example\" }),\n});\n\nconst response1 = await fetch(request);\nconsole.log(response1.status);\n\n// Will throw: \"Body has already been consumed.\"\nconst response2 = await fetch(request);\nconsole.log(response2.status);\n```\n\nExample:\n```javascript\nconst request1 = new Request(\"https://example.org/post\", {\n method: \"POST\",\n body: JSON.stringify({ username: \"example\" }),\n});\n\nconst request2 = request1.clone();\n\nconst response1 = await fetch(request1);\nconsole.log(response1.status);\n\nconst response2 = await fetch(request2);\nconsole.log(response2.status);\n```\n\nExample:\n```javascript\nconst response = await fetch(\"https://example.org/post\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ username: \"example\" }),\n // โฆ\n});\n```\n\nExample:\n```javascript\nconst myHeaders = new Headers();\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nconst response = await fetch(\"https://example.org/post\", {\n method: \"POST\",\n headers: myHeaders,\n body: JSON.stringify({ username: \"example\" }),\n // โฆ\n});\n```\n\nExample:\n```javascript\nconst params = new URLSearchParams();\nparams.append(\"username\", \"example\");\n\n// GET request sent to https://example.org/login?username=example\nconst response = await fetch(`https://example.org/login?${params}`);\n```\n\nExample:\n```javascript\nconst myHeaders = new Headers();\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nconst response = await fetch(\"https://example.org/post\", {\n method: \"POST\",\n body: JSON.stringify({ username: \"example\" }),\n headers: myHeaders,\n});\n```\n\nExample:\n```javascript\nconst myHeaders = new Headers();\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nconst myRequest = new Request(\"https://example.org/post\", {\n method: \"POST\",\n body: JSON.stringify({ username: \"example\" }),\n headers: myHeaders,\n});\n\nconst response = await fetch(myRequest);\n```\n\nExample:\n```javascript\nasync function post(request) {\n try {\n const response = await fetch(request);\n const result = await response.json();\n console.log(\"Success:\", result);\n } catch (error) {\n console.error(\"Error:\", error);\n }\n}\n\nconst request1 = new Request(\"https://example.org/post\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ username: \"example1\" }),\n});\n\nconst request2 = new Request(request1, {\n body: JSON.stringify({ username: \"example2\" }),\n});\n\npost(request1);\npost(request2);\n```\n\nExample:\n```javascript\nconst controller = new AbortController();\n\nconst fetchButton = document.querySelector(\"#fetch\");\nfetchButton.addEventListener(\"click\", async () => {\n try {\n console.log(\"Starting fetch\");\n const response = await fetch(\"https://example.org/get\", {\n signal: controller.signal,\n });\n console.log(`Response: ${response.status}`);\n } catch (e) {\n console.error(`Error: ${e}`);\n }\n});\n\nconst cancelButton = document.querySelector(\"#cancel\");\ncancelButton.addEventListener(\"click\", () => {\n controller.abort();\n console.log(\"Canceled fetch\");\n});\n```\n\nExample:\n```javascript\nasync function get() {\n const controller = new AbortController();\n const request = new Request(\"https://example.org/get\", {\n signal: controller.signal,\n });\n\n const response = await fetch(request);\n controller.abort();\n // The next line will throw `AbortError`\n const text = await response.text();\n console.log(text);\n}\n```\n\nExample:\n```javascript\nasync function getData() {\n const url = \"https://example.org/products.json\";\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Response status: ${response.status}`);\n }\n // โฆ\n } catch (error) {\n console.error(error.message);\n }\n}\n```\n\nExample:\n```javascript\nasync function fetchJSON(request) {\n try {\n const response = await fetch(request);\n const contentType = response.headers.get(\"content-type\");\n if (!contentType || !contentType.includes(\"application/json\")) {\n throw new TypeError(\"Oops, we haven't got JSON!\");\n }\n // Otherwise, we can read the body as JSON\n } catch (error) {\n console.error(\"Error:\", error);\n }\n}\n```\n\nExample:\n```javascript\nconst image = document.querySelector(\"img\");\n\nconst url = \"flowers.jpg\";\n\nasync function setImage() {\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Response status: ${response.status}`);\n }\n const blob = await response.blob();\n const objectURL = URL.createObjectURL(blob);\n image.src = objectURL;\n } catch (e) {\n console.error(e);\n }\n}\n```\n\nExample:\n```javascript\nconst url = \"https://www.example.org/a-large-file.txt\";\n\nasync function fetchText(url) {\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Response status: ${response.status}`);\n }\n\n const text = await response.text();\n console.log(text);\n } catch (e) {\n console.error(e);\n }\n}\n```\n\nExample:\n```javascript\nconst url = \"https://www.example.org/a-large-file.txt\";\n\nasync function fetchTextAsStream(url) {\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Response status: ${response.status}`);\n }\n\n const stream = response.body.pipeThrough(new TextDecoderStream());\n for await (const value of stream) {\n console.log(value);\n }\n } catch (e) {\n console.error(e);\n }\n}\n```\n\nExample:\n```javascript\nasync function* makeTextFileLineIterator(fileURL) {\n const response = await fetch(fileURL);\n const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();\n\n let { value: chunk = \"\", done: readerDone } = await reader.read();\n\n const newline = /\\r?\\n/g;\n let startIndex = 0;\n\n while (true) {\n const result = newline.exec(chunk);\n if (!result) {\n if (readerDone) break;\n const remainder = chunk.slice(startIndex);\n ({ value: chunk, done: readerDone } = await reader.read());\n chunk = remainder + (chunk || \"\");\n startIndex = newline.lastIndex = 0;\n continue;\n }\n yield chunk.substring(startIndex, result.index);\n startIndex = newline.lastIndex;\n }\n\n if (startIndex < chunk.length) {\n // Last line didn't end in a newline char\n yield chunk.substring(startIndex);\n }\n}\n\nasync function run(urlOfFile) {\n for await (const line of makeTextFileLineIterator(urlOfFile)) {\n processLine(line);\n }\n}\n\nfunction processLine(line) {\n console.log(line);\n}\n\nrun(\"https://www.example.org/a-large-file.txt\");\n```\n\nExample:\n```javascript\nasync function getData() {\n const url = \"https://example.org/products.json\";\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Response status: ${response.status}`);\n }\n\n const result1 = await response.json();\n const result2 = await response.json(); // will throw\n } catch (error) {\n console.error(error.message);\n }\n}\n```\n\nExample:\n```javascript\nasync function getData() {\n const url = \"https://example.org/products.json\";\n try {\n const response1 = await fetch(url);\n if (!response1.ok) {\n throw new Error(`Response status: ${response1.status}`);\n }\n\n const response2 = response1.clone();\n\n const result1 = await response1.json();\n const result2 = await response2.json();\n } catch (error) {\n console.error(error.message);\n }\n}\n```\n\nExample:\n```javascript\nasync function cacheFirst(request) {\n const cachedResponse = await caches.match(request);\n if (cachedResponse) {\n return cachedResponse;\n }\n try {\n const networkResponse = await fetch(request);\n if (networkResponse.ok) {\n const cache = await caches.open(\"MyCache_1\");\n cache.put(request, networkResponse.clone());\n }\n return networkResponse;\n } catch (error) {\n return Response.error();\n }\n}\n\nself.addEventListener(\"fetch\", (event) => {\n if (precachedResources.includes(url.pathname)) {\n event.respondWith(cacheFirst(event.request));\n }\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.630Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":23,"totalLines":409,"estimatedTokens":2266}}162{"id":"doc-using_web_workers_web_apis_mdn-b3c3320c","source":"documentation","title":"Using Web Workers - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers","text":"Example:\n```javascript\nif (window.Worker) {\n // โฆ\n}\n```\n\nExample:\n```javascript\nconst myWorker = new Worker(\"worker.js\");\n```\n\nExample:\n```javascript\nconst myWorker = new Worker(new URL(\"worker.js\", import.meta.url));\n```\n\nExample:\n```javascript\n[first, second].forEach((input) => {\n input.onchange = () => {\n myWorker.postMessage([first.value, second.value]);\n console.log(\"Message posted to worker\");\n };\n});\n```\n\nExample:\n```javascript\nonmessage = (e) => {\n console.log(\"Message received from main script\");\n const workerResult = `Result: ${e.data[0] * e.data[1]}`;\n console.log(\"Posting message back to main script\");\n postMessage(workerResult);\n};\n```\n\nExample:\n```javascript\nmyWorker.onmessage = (e) => {\n result.textContent = e.data;\n console.log(\"Message received from worker\");\n};\n```\n\nExample:\n```javascript\nmyWorker.terminate();\n```\n\nExample:\n```javascript\nimportScripts(); /* imports nothing */\nimportScripts(\"foo.js\"); /* imports just \"foo.js\" */\nimportScripts(\"foo.js\", \"bar.js\"); /* imports two scripts */\nimportScripts(\n \"//example.com/hello.js\",\n); /* You can import scripts from other origins */\n```\n\nExample:\n```javascript\nconst myWorker = new SharedWorker(\"worker.js\");\n```\n\nExample:\n```javascript\nconst worker = new SharedWorker(\"worker.js\", { extendedLifetime: true });\n```\n\nExample:\n```javascript\nsquareNumber.onchange = () => {\n myWorker.port.postMessage([squareNumber.value, squareNumber.value]);\n console.log(\"Message posted to worker\");\n};\n```\n\nExample:\n```javascript\nonconnect = (e) => {\n const port = e.ports[0];\n\n port.onmessage = (e) => {\n const workerResult = `Result: ${e.data[0] * e.data[1]}`;\n port.postMessage(workerResult);\n };\n};\n```\n\nExample:\n```javascript\nmyWorker.port.onmessage = (e) => {\n result2.textContent = e.data;\n console.log(\"Message received from worker\");\n};\n```\n\nExample:\n```text\nContent-Security-Policy: script-src 'self'\n```\n\nExample:\n```javascript\nconst myWorker = new Worker(\"my_task.js\");\n\nmyWorker.onmessage = (event) => {\n console.log(`Worker said : \"${event.data}\"`);\n};\n\nmyWorker.postMessage({ lastUpdate: new Date() });\n```\n\nExample:\n```javascript\nself.onmessage = (event) => {\n postMessage(`Last updated: ${event.data.lastUpdate.toDateString()}`);\n};\n```\n\nExample:\n```javascript\nfunction QueryableWorker(url, defaultListener, onError) {\n const worker = new Worker(url);\n const listeners = {};\n\n this.defaultListener = defaultListener ?? (() => {});\n\n if (onError) {\n worker.onerror = onError;\n }\n\n this.postMessage = (message) => {\n worker.postMessage(message);\n };\n\n this.terminate = () => {\n worker.terminate();\n };\n}\n```\n\nExample:\n```javascript\nthis.addListeners = (name, listener) => {\n listeners[name] = listener;\n};\n\nthis.removeListeners = (name) => {\n delete listeners[name];\n};\n```\n\nExample:\n```javascript\n// This functions takes at least one argument, the method name we want to query.\n// Then we can pass in the arguments that the method needs.\nthis.sendQuery = (queryMethod, ...queryMethodArguments) => {\n if (!queryMethod) {\n throw new TypeError(\n \"QueryableWorker.sendQuery takes at least one argument\",\n );\n }\n worker.postMessage({\n queryMethod,\n queryMethodArguments,\n });\n};\n```\n\nExample:\n```javascript\nworker.onmessage = (event) => {\n if (\n event.data instanceof Object &&\n Object.hasOwn(event.data, \"queryMethodListener\") &&\n Object.hasOwn(event.data, \"queryMethodArguments\")\n ) {\n listeners[event.data.queryMethodListener].apply(\n this,\n event.data.queryMethodArguments,\n );\n } else {\n this.defaultListener(event.data);\n }\n};\n```\n\nExample:\n```javascript\nconst queryableFunctions = {\n getDifference(a, b) {\n reply(\"printStuff\", a - b);\n },\n waitSomeTime() {\n setTimeout(() => {\n reply(\"doAlert\", 3, \"seconds\");\n }, 3000);\n },\n};\n\nfunction reply(queryMethodListener, ...queryMethodArguments) {\n if (!queryMethodListener) {\n throw new TypeError(\"reply - takes at least one argument\");\n }\n postMessage({\n queryMethodListener,\n queryMethodArguments,\n });\n}\n\n// This method is called when main page calls QueryWorker's postMessage\n// method directly\nfunction defaultReply(message) {\n // do something\n}\n```\n\nExample:\n```javascript\nonmessage = (event) => {\n if (\n event.data instanceof Object &&\n Object.hasOwn(event.data, \"queryMethod\") &&\n Object.hasOwn(event.data, \"queryMethodArguments\")\n ) {\n queryableFunctions[event.data.queryMethod].apply(\n self,\n event.data.queryMethodArguments,\n );\n } else {\n defaultReply(event.data);\n }\n};\n```\n\nExample:\n```javascript\n// QueryableWorker instances methods:\n// * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc.): calls a Worker's queryable function\n// * postMessage(string or JSON Data): see Worker.prototype.postMessage()\n// * terminate(): terminates the Worker\n// * addListener(name, function): adds a listener\n// * removeListener(name): removes a listener\n// QueryableWorker instances properties:\n// * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly\nfunction QueryableWorker(url, defaultListener, onError) {\n const worker = new Worker(url);\n const listeners = {};\n\n this.defaultListener = defaultListener ?? (() => {});\n\n if (onError) {\n worker.onerror = onError;\n }\n\n this.postMessage = (message) => {\n worker.postMessage(message);\n };\n\n this.terminate = () => {\n worker.terminate();\n };\n\n this.addListener = (name, listener) => {\n listeners[name] = listener;\n };\n\n this.removeListener = (name) => {\n delete listeners[name];\n };\n\n // This functions takes at least one argument, the method name we want to query.\n // Then we can pass in the arguments that the method needs.\n this.sendQuery = (queryMethod, ...queryMethodArguments) => {\n if (!queryMethod) {\n throw new TypeError(\n \"QueryableWorker.sendQuery takes at least one argument\",\n );\n }\n worker.postMessage({\n queryMethod,\n queryMethodArguments,\n });\n };\n\n worker.onmessage = (event) => {\n if (\n event.data instanceof Object &&\n Object.hasOwn(event.data, \"queryMethodListener\") &&\n Object.hasOwn(event.data, \"queryMethodArguments\")\n ) {\n listeners[event.data.queryMethodListener].apply(\n this,\n event.data.queryMethodArguments,\n );\n } else {\n this.defaultListener(event.data);\n }\n };\n}\n\n// your custom \"queryable\" worker\nconst myTask = new QueryableWorker(\"my_task.js\");\n\n// your custom \"listeners\"\nmyTask.addListener(\"printStuff\", (result) => {\n document\n .getElementById(\"firstLink\")\n .parentNode.appendChild(\n document.createTextNode(`The difference is ${result}!`),\n );\n});\n\nmyTask.addListener(\"doAlert\", (time, unit) => {\n alert(`Worker waited for ${time} ${unit} :-)`);\n});\n\ndocument.getElementById(\"first-action\").addEventListener(\"click\", () => {\n myTask.sendQuery(\"getDifference\", 5, 3);\n});\ndocument.getElementById(\"second-action\").addEventListener(\"click\", () => {\n myTask.sendQuery(\"waitSomeTime\");\n});\ndocument.getElementById(\"terminate\").addEventListener(\"click\", () => {\n myTask.terminate();\n});\n```\n\nExample:\n```javascript\nconst queryableFunctions = {\n // example #1: get the difference between two numbers:\n getDifference(minuend, subtrahend) {\n reply(\"printStuff\", minuend - subtrahend);\n },\n\n // example #2: wait three seconds\n waitSomeTime() {\n setTimeout(() => {\n reply(\"doAlert\", 3, \"seconds\");\n }, 3000);\n },\n};\n\n// system functions\n\nfunction defaultReply(message) {\n // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly\n // do something\n}\n\nfunction reply(queryMethodListener, ...queryMethodArguments) {\n if (!queryMethodListener) {\n throw new TypeError(\"reply - not enough arguments\");\n }\n postMessage({\n queryMethodListener,\n queryMethodArguments,\n });\n}\n\nonmessage = (event) => {\n if (\n event.data instanceof Object &&\n Object.hasOwn(event.data, \"queryMethod\") &&\n Object.hasOwn(event.data, \"queryMethodArguments\")\n ) {\n queryableFunctions[event.data.queryMethod].apply(\n self,\n event.data.queryMethodArguments,\n );\n } else {\n defaultReply(event.data);\n }\n};\n```\n\nExample:\n```javascript\n// Create a 32MB \"file\" and fill it with consecutive values from 0 to 255 โ 32MB = 1024 * 1024 * 32\nconst uInt8Array = new Uint8Array(1024 * 1024 * 32).map((v, i) => i);\nworker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n <title>MDN Example - Embedded worker</title>\n <script type=\"text/js-worker\">\n // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.\n const myVar = \"Hello World!\";\n // Rest of your worker code goes here.\n </script>\n <script>\n // This script WILL be parsed by JS engines because its MIME type is text/javascript.\n function pageLog(sMsg) {\n // Use a fragment: browser will only render/reflow once.\n const frag = document.createDocumentFragment();\n frag.appendChild(document.createTextNode(sMsg));\n frag.appendChild(document.createElement(\"br\"));\n document.querySelector(\"#logDisplay\").appendChild(frag);\n }\n </script>\n <script type=\"text/js-worker\">\n // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.\n onmessage = (event) => {\n postMessage(myVar);\n };\n // Rest of your worker code goes here.\n </script>\n <script>\n // This script WILL be parsed by JS engines because its MIME type is text/javascript.\n\n // In the past blob builder existed, but now we use Blob\n const blob = new Blob(\n Array.prototype.map.call(\n document.querySelectorAll(\"script[type='text/js-worker']\"),\n (script) => script.textContent,\n ),\n { type: \"text/javascript\" },\n );\n\n // Creating a new global \"worker\" variable from all our \"text/js-worker\" scripts.\n const worker = new Worker(window.URL.createObjectURL(blob));\n\n worker.onmessage = (event) => {\n pageLog(`Received: ${event.data}`);\n };\n </script>\n </head>\n <body>\n <div id=\"logDisplay\"></div>\n <script>\n // Start the worker.\n worker.postMessage(\"\");\n </script>\n </body>\n</html>\n```\n\nExample:\n```javascript\nfunction fn2workerURL(fn) {\n const blob = new Blob([`(${fn.toString()})()`], { type: \"text/javascript\" });\n return URL.createObjectURL(blob);\n}\n```\n\nExample:\n```javascript\nself.onmessage = (event) => {\n const userNum = Number(event.data);\n self.postMessage(fibonacci(userNum));\n};\n\nfunction fibonacci(num) {\n let a = 1;\n let b = 0;\n while (num > 0) {\n [a, b] = [a + b, a];\n num--;\n }\n\n return b;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"number\">\n Enter a number that is a zero-based index position in the fibonacci\n sequence to see what number is in that position. For example, enter 6 and\n you'll get a result of 8 โ the fibonacci number at index position 6 is 8.\n </label>\n <input type=\"number\" id=\"number\" />\n </div>\n <div>\n <input type=\"submit\" />\n </div>\n</form>\n\n<p id=\"result\"></p>\n```\n\nExample:\n```javascript\nconst form = document.querySelector(\"form\");\nconst input = document.querySelector('input[type=\"number\"]');\nconst result = document.querySelector(\"p#result\");\nconst worker = new Worker(\"fibonacci.js\");\n\nworker.onmessage = (event) => {\n result.textContent = event.data;\n console.log(`Got: ${event.data}`);\n};\n\nworker.onerror = (error) => {\n console.log(`Worker error: ${error.message}`);\n throw error;\n};\n\nform.onsubmit = (e) => {\n e.preventDefault();\n worker.postMessage(input.value);\n input.value = \"\";\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.633Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":30,"totalLines":517,"estimatedTokens":2991}}163{"id":"doc-using_the_web_animations_api_web_apis_mdn-6cfa793f","source":"documentation","title":"Using the Web Animations API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API","text":"Example:\n```text\n<div class=\"wrapper\">\n <div id=\"tunnel\"></div>\n <div id=\"alice\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 400\">\n <path\n d=\"M110.1 2.7h8.9c3.4.4 6.7.8 10.1 1.3 9.8 1.5 17.8 6.4 24.5 13.7.4.5 1.9.6 2.5.3 6.8-4.4 13.9-8.2 21.9-9.9 1.3-.3 3.4-1.2 3.7 1.5.6 4.9 1.4 9.9 1.7 14.8.3 4.4.1 8.7.1 12.2 2.1 1.5 4.6 2.3 5.5 4 4.2 8.4 3.2 17.6 3.1 26.6 0 1.2-.4 3.3.1 3.6 10.3 4.9 20.7 9.6 31.1 14.4 2.5-4.9-2.3-16-15.8-14.4.6-.5 1.4-1.1 2.2-1.1 2.5.1 4.9.4 7.4.7 6 .8 10.9 3.7 14.6 8.4 1.2 1.5 1.6 4.2 1.1 6.1-.7 3.2-3.7 4-7.1 4.1 4.5 3.5 6.5 8.1 6.8 13.3.6 9.4-1.1 18.6-4.8 27.1-3.9 8.8-5.2 17.5-3.3 26.8.6 3.2 1.2 7 .2 9.9-2 6.2-7.8 8.6-13.4 10.9-3 1.2-7.4 1.2-6.3 6.3.8 3.7-.4 4 .2 4.5 5.8 5.8 11.8 11.5 17.6 17.3 1.7 1.7 3 3.8 4.3 5.5-1.1.4-1.8.7-2.4 1 7.5 5.8 14.9 11.6 22.4 17.4 4.3-4.3 8.6-9 13.3-13.2 8.1-7.3 16.7-14 24.5-21.7 3.3-3.3 4.9-8.2 7.4-12.3.3-.4 1.3-.9 1.6-.7 4.6 2.7 6.8 7.2 7.9 12.1 1.3 5.7 1.6 11.6 2.3 17.1 4.2-.2 8.8-.8 13.4-.4 2 .1 4.6 1.8 5.5 3.5 2.2 4.3 3.8 8.9 5.3 13.5 3.7 11.5 6.9 23.2 10.7 34.7 1.7 5.1 3.4 10.4 8.6 13.4.5.3.5 2.7 0 3.1-3.3 2.5-6.9 4.6-10.5 7 2 5.8 4.3 12.6 6.7 19.6.7-.8 1.4-1.6 2.1-2.3 1.9-1.9 3.5-1.6 4.2 1.2.7 3 1.3 6.2 1.5 9.3.3 7.3.4 14.6.6 21.9 0 .4.2.8.5 1.2 3.6 4.7 7.1 9.3 10.7 14 1.7 2.3 3 5.4 5.3 6.6 5.5 2.7 11.5 4.4 17.3 6.6v.7c-.4.3-.7.8-1.2 1-5.8 2.1-11.6 4.3-17.5 6.2-4.2 1.3-8.4 2-12.4-1.2-1.8-1.5-3.9-2.6-5.8-3.8 0 2.3.1 4.4-.1 6.4-.1.8-.7 2.2-1.2 2.2-2.6.2-5.3.1-7.9.1-1.1 0-2.7.3-3.2-.3-1-1.2-2.1-2.9-2.1-4.4-.1-5.2.1-10.4.3-15.6.1-1.8 1.5-3.9.9-5.4-1.7-4.3-4-8.4-6.1-12.5-2.4-4.6-6.4-9.1-1.2-14.3.3-.3.3-1.3 0-1.7-4.7-6.5-9.5-13.1-14.4-19.5-1.2-1.5-2.9-3.7-4.4-3.7-6.7.1-13.4.8-20.1 1.3-.7.1-1.6.2-1.9.6-7.1 9.1-14 18.3-21.1 27.4-1.3 1.7-2.9 3.4-4.3 5 1.7.6 3.3 1.1 4.8 1.7.6.2 1.3.5 1.6 1 .2.3-.1 1.1-.4 1.5-2 2.6-4.1 5.2-6.1 7.8-4.3 5.3-8.7 10.5-13 15.9-.8 1-1.5 2.4-1.6 3.6-.2 5.4-.1 10.7-.1 16.1 0 1.5-.7 3.6.1 4.5 2.4 3 5.3 5.5 7.9 8.2 1.6 1.7 3 3.5 4.6 5.5-2.6.2-4.5.3-6.4.4h-3.7c-4.8-1.4-9.8-2.5-14.5-4.3-3.5-1.4-7.8-2.5-8-7.7-.1-2.1-.2-4.3-.4-6.7-1 1.1-1.7 2.1-2.6 2.9-.3.3-1 .4-1.3.2-1.9-1.1-3.7-2.2-5.5-3.4-1.7-1.1-4.5-1.6-3.5-4.5 2.3-6.5 6.4-11.6 12.7-14.9.6-.3 1.3-.9 1.6-1.5 3.9-8.2 7.8-16.4 11.8-24.6.7-1.5.4-4.5 3.8-3.8.2.1 1.2-3.1 1.8-4.9-2.8 1.5-5 2.9-7.4 3.9-7.4 3-14.7 6.4-23.1 5.6-8.5-.7-16.2-3.4-23.2-8-9.9-6.7-14.2-17-17.5-27.9-.5-1.7-.5-5.1-3.5-1.6-.1.2-.4.2-.6.3-2.5 1.7-5.4 3-6 6.5-.4 2.3-1 4.6-1.5 7-2.9 13.2-4.2 26.4-2.5 39.9 1.7 13.1 9.2 21.3 21 26.3 2.4 1 4.9 1.9 7.5 2.9-2.1.9-3.9 1.9-5.8 2.3-10.2 2.5-20.5 4.9-30.8 7.1-1.9.4-4.9.7-5.9-.3-6.4-6.5-8.9-14.8-8.3-23.7.7-9.6 2.1-19.2 3.9-28.6 2.2-11.5 6.1-22.5 11.7-32.9.7-1.3 2-3.1 1.6-4.1-1.8-4.6-4.5-8.9-6.2-13.6-2-5.7-4.2-11.6-1.2-17.8.1-.1-.3-.5-.5-.8 7.6.7 12.8 5.3 17.7 10.2-1.3-8.5-2.6-17.2-3.9-25.8 0-.3-.2-.7-.4-.9-6.7-5.5-13.3-11.2-17-19.2-2.6-5.7-4.3-11.8-6.3-17.7-.6-1.6.2-3.4-2.2-4.8-5.9-3.5-10.3-8.6-10.3-16 0-1.8 1.2-5 2.2-5.1 8.3-1.2 16.4-.1 23.8 4.2 2.4 1.4 4.9 2.7 8.1 4.4-.4-8.8-.8-16.2-1.2-23.6-4.2.9-8.6.9-11.5-2-3.3-3.3-5.4-7.8-7.9-11.8-1.1-1.7-2-3.6-3.5-6.4-3.8 10.3-7.4 19.9-10.8 29.1-.3-.6-1.1-1.7-1.5-2.9-3.5-10-2.8-20.2-1.1-30.3 1.2-7.4 4.3-14.6 3.1-22.4-.2-1.1.2-2.3.3-3.4-22.1 17.6-38.8 38.4-42.9 67.4-4 28-2.8 54.8 13.5 79.1-36.3-13.8-53-48.6-58.3-84.1-3 8-15 16.3-22.4 16.6v-.2c2.1-2.9 11.1-10.6 7-30.2-1.3-10.7-4.1-21.2-5.1-31.9-1-10.9-1-21.9-.5-32.9.3-11.6 3.8-22.7 8.6-33.2 5.7-12.5 13.5-23.8 23-33.6 5.6-5.8 11.9-11 18.2-16.1 8.6-6.8 17.7-12.9 28.2-16.5 5.1-1.9 10.4-3 15.7-4.5zm96.4 221.9c-.4.9-1.2 2-1.1 3 .5 7.6 1.2 15.2 2 22.7.2 2.1 0 4.8 3.3 5.5 3.3.7 6.6 1.8 9.9 2.6.3.1.9-.1 1.1-.4 3.8-4.8 7.5-9.6 10.9-14-8.4-6.1-17.1-12.6-26.1-19.4zm-23.1-42.5v6.3c1.9-2 3.6-3.9 5.3-5.7-1.7-.2-3.5-.4-5.3-.6z\" />\n </svg>\n </div>\n</div>\n```\n\nExample:\n```text\n#alice {\n animation: alice-tumbling infinite 3s linear;\n}\n\n@keyframes alice-tumbling {\n 0% {\n color: black;\n transform: rotate(0) translate3d(-50%, -50%, 0);\n }\n 30% {\n color: #431236;\n }\n 100% {\n color: black;\n transform: rotate(360deg) translate3d(-50%, -50%, 0);\n }\n}\n```\n\nExample:\n```text\n#tunnel {\n animation: tunnel-fly 1s linear infinite;\n}\n\n@keyframes tunnel-fly {\n 100% {\n transform: translate3d(0, -300px, 0);\n }\n}\n```\n\nExample:\n```text\n#alice {\n color: #431236;\n width: 25%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform-origin: 0 0;\n transform: rotate(0) translate3d(-50%, -50%, 0);\n backface-visibility: hidden;\n will-change: transform, color;\n}\n\npath {\n fill: currentColor;\n}\n\n#tunnel {\n background:\n url(\"/shared-assets/images/examples/web-animations/bg-tunnel-border-left.svg\")\n repeat-y,\n url(\"/shared-assets/images/examples/web-animations/bg-tunnel-border-right.svg\")\n repeat-y 100% 100%,\n url(\"/shared-assets/images/examples/web-animations/bg-tunnel-specks.png\"),\n #6c373f;\n margin: 0 auto;\n height: calc(100% + 300px);\n width: 60%;\n min-width: 400px;\n backface-visibility: hidden;\n will-change: transform;\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\nbody {\n background: black;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n```\n\nExample:\n```javascript\nconst aliceTumbling = [\n { transform: \"rotate(0) translate3d(-50%, -50%, 0)\", color: \"black\" },\n { color: \"#431236\", offset: 0.3 },\n { transform: \"rotate(360deg) translate3d(-50%, -50%, 0)\", color: \"black\" },\n];\n```\n\nExample:\n```javascript\nconst aliceTiming = {\n duration: 3000,\n iterations: Infinity,\n};\n```\n\nExample:\n```javascript\ndocument.getElementById(\"alice\").animate(aliceTumbling, aliceTiming);\n```\n\nExample:\n```javascript\ndocument\n .getElementById(\"tunnel\")\n .animate(\n [\n { transform: \"translate3d(0, 0, 0)\" },\n { transform: \"translate3d(0, -300px, 0)\" },\n ],\n {\n duration: 1000,\n iterations: Infinity,\n },\n );\n```\n\nExample:\n```javascript\ndocument.getElementById(\"alice\").animate(\n [\n { transform: \"rotate(0) translate3d(-50%, -50%, 0)\", color: \"black\" },\n { color: \"#431236\", offset: 0.3 },\n { transform: \"rotate(360deg) translate3d(-50%, -50%, 0)\", color: \"black\" },\n ],\n {\n duration: 3000,\n iterations: Infinity,\n },\n);\n```\n\nExample:\n```javascript\ndocument.getElementById(\"alice\").animate(\n [\n { transform: \"rotate(0) translate3d(-50%, -50%, 0)\", color: \"black\" },\n { color: \"#431236\", offset: 0.3 },\n { transform: \"rotate(360deg) translate3d(-50%, -50%, 0)\", color: \"black\" },\n ],\n 3000,\n);\n```\n\nExample:\n```text\n<div class=\"wrapper\">\n <div class=\"page\">\n <div class=\"background\"></div>\n <div id=\"rabbit\">Click the rabbit's ears!</div>\n <div class=\"foreground\"></div>\n <p>\n She was just in time to see him pop down a hole between a great tree's\n roots.\n </p>\n </div>\n</div>\n```\n\nExample:\n```text\n#rabbit {\n background: url(\"/shared-assets/images/examples/web-animations/park5_rabbit.png\")\n 0 0 / 100% 100%;\n cursor: pointer;\n position: absolute;\n top: 15%;\n left: 60%;\n width: 14.64844%;\n padding-top: 31.00586%;\n}\n\nbody {\n background: black;\n}\n.wrapper {\n max-width: 133.33vh;\n margin: 0 auto;\n}\n.page {\n background: #431236;\n height: 0;\n overflow: hidden;\n padding-top: 75%;\n position: relative;\n text-indent: 100%;\n white-space: nowrap;\n}\n\n.foreground {\n height: 100%;\n background: url(\"/shared-assets/images/examples/web-animations/bg_park5_2.png\")\n no-repeat 100% 100% / 100% auto;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n pointer-events: none;\n}\n\n.background {\n background: url(\"/shared-assets/images/examples/web-animations/bg_park5_1.png\")\n no-repeat 0 0 / 100% auto;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n```\n\nExample:\n```javascript\nconst whiteRabbit = document.getElementById(\"rabbit\");\n\nconst rabbitDownAnimation = whiteRabbit.animate(\n [{ transform: \"translateY(0%)\" }, { transform: \"translateY(100%)\" }],\n { duration: 3000, fill: \"forwards\" },\n);\n```\n\nExample:\n```javascript\nrabbitDownAnimation.pause();\n```\n\nExample:\n```javascript\nwhiteRabbit.addEventListener(\"click\", downHeGoes);\nwhiteRabbit.addEventListener(\"touchstart\", downHeGoes);\n\nfunction downHeGoes(event) {\n whiteRabbit.removeEventListener(\"click\", downHeGoes);\n whiteRabbit.removeEventListener(\"touchstart\", downHeGoes);\n\n rabbitDownAnimation.play();\n}\n```\n\nExample:\n```text\n<div class=\"wrapper\">\n <div class=\"sky\"></div>\n <div class=\"earth\">\n <div id=\"red-queen-and-alice\">\n <img\n id=\"red-queen-and-alice-sprite\"\n src=\"/shared-assets/images/examples/web-animations/sprite_running-alice-queen_small.png\"\n srcset=\"\n /shared-assets/images/examples/web-animations/sprite_running-alice-queen.png 2x\n \"\n alt=\"Alice and the Red Queen running to stay in place.\" />\n </div>\n </div>\n <div class=\"scenery\" id=\"foreground1\">\n <img\n id=\"palm3\"\n src=\"/shared-assets/images/examples/web-animations/palm3_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/palm3.png 2x\"\n alt=\"\" />\n </div>\n <div class=\"scenery\" id=\"foreground2\">\n <img\n id=\"bush\"\n src=\"/shared-assets/images/examples/web-animations/bush_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/bush.png 2x\"\n alt=\"\" />\n <img\n id=\"w_rook_upright\"\n src=\"/shared-assets/images/examples/web-animations/w_rook_upright_small.png\"\n srcset=\"\n /shared-assets/images/examples/web-animations/w_rook_upright.png 2x\n \"\n alt=\"\" />\n </div>\n <div class=\"scenery\" id=\"background1\">\n <img\n id=\"r_pawn_upright\"\n src=\"/shared-assets/images/examples/web-animations/r_pawn_upright_small.png\"\n srcset=\"\n /shared-assets/images/examples/web-animations/r_pawn_upright.png 2x\n \"\n alt=\"\" />\n <img\n id=\"w_rook\"\n src=\"/shared-assets/images/examples/web-animations/w_rook_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/w_rook.png 2x\"\n alt=\"\" />\n <img\n id=\"palm1\"\n src=\"/shared-assets/images/examples/web-animations/palm1_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/palm1.png 2x\"\n alt=\"\" />\n </div>\n <div class=\"scenery\" id=\"background2\">\n <img\n id=\"r_pawn\"\n src=\"/shared-assets/images/examples/web-animations/r_pawn_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/r_pawn.png 2x\"\n alt=\"\" />\n\n <img\n id=\"r_knight\"\n src=\"/shared-assets/images/examples/web-animations/r_knight_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/r_knight.png 2x\"\n alt=\"\" />\n <img\n id=\"palm2\"\n src=\"/shared-assets/images/examples/web-animations/palm2_small.png\"\n srcset=\"/shared-assets/images/examples/web-animations/palm2.png 2x\"\n alt=\"\" />\n </div>\n</div>\n```\n\nExample:\n```text\n* {\n user-select: none;\n}\n\nimg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.scenery {\n width: 100%;\n height: 50%;\n position: absolute;\n bottom: 0;\n left: 0;\n}\n\n#foreground1,\n#foreground2 {\n z-index: 1;\n}\n\n#foreground2,\n#background2 {\n transform: translateX(100%);\n}\n\n#palm3 {\n top: 0;\n left: 10%;\n}\n\n#w_rook_upright {\n top: 30%;\n left: 75%;\n}\n\n#r_pawn {\n top: 10%;\n left: 15%;\n}\n\n#w_rook {\n top: 10%;\n left: 80%;\n}\n\n#r_pawn_upright {\n top: 5%;\n left: 30%;\n}\n\n#r_knight {\n top: 0;\n left: 70%;\n}\n\n#palm2 {\n top: -15%;\n left: 90%;\n}\n\n#palm1 {\n top: -15%;\n left: 40%;\n}\n\n#bush {\n top: 55%;\n left: 20%;\n}\n\n#red-queen-and-alice {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n overflow: hidden;\n width: 80%;\n max-width: 450px;\n z-index: 1;\n}\n\n#red-queen-and-alice::before {\n content: \" \";\n display: block;\n padding-top: 87%;\n}\n\n#red-queen-and-alice img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n}\n\n.sky,\n.earth {\n position: absolute;\n left: 0;\n height: 50vh;\n width: 100%;\n}\n\n.earth {\n background: #eb125d\n url(\"/shared-assets/images/examples/web-animations/bg_earth.jpg\") repeat-x 0\n 0 / 100% auto;\n bottom: 0;\n}\n\n.sky {\n background: #246e89\n url(\"/shared-assets/images/examples/web-animations/bg_sky.jpg\") repeat-x\n 100% 100% / auto 100%;\n top: 0;\n}\n\nhtml,\nbody {\n width: 100%;\n height: 100%;\n}\n\n.wrapper {\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n}\n```\n\nExample:\n```javascript\nconst background1 = document.getElementById(\"background1\");\nconst background2 = document.getElementById(\"background2\");\n\nconst foreground1 = document.getElementById(\"foreground1\");\nconst foreground2 = document.getElementById(\"foreground2\");\n\nconst redQueenAliceSprite = document.getElementById(\n \"red-queen-and-alice-sprite\",\n);\n\n/* Background animations */\nconst sceneryFrames = [\n { transform: \"translateX(100%)\" },\n { transform: \"translateX(-100%)\" },\n];\n\nconst sceneryTimingBackground = {\n duration: 36000,\n iterations: Infinity,\n};\n\nconst sceneryTimingForeground = {\n duration: 12000,\n iterations: Infinity,\n};\n\nconst background1Movement = background1.animate(\n sceneryFrames,\n sceneryTimingBackground,\n);\nbackground1Movement.currentTime =\n background1Movement.effect.getComputedTiming().duration / 2;\n\nconst background2Movement = background2.animate(\n sceneryFrames,\n sceneryTimingBackground,\n);\n\nconst foreground1Movement = foreground1.animate(\n sceneryFrames,\n sceneryTimingForeground,\n);\nforeground1Movement.currentTime =\n foreground1Movement.effect.getComputedTiming().duration / 2;\n\nconst foreground2Movement = foreground2.animate(\n sceneryFrames,\n sceneryTimingForeground,\n);\n\nconst spriteFrames = [\n { transform: \"translateY(0)\" },\n { transform: \"translateY(-100%)\" },\n];\n\nconst redQueenAlice = redQueenAliceSprite.animate(spriteFrames, {\n easing: \"steps(7, end)\",\n direction: \"reverse\",\n duration: 600,\n playbackRate: 1,\n iterations: Infinity,\n});\n```\n\nExample:\n```javascript\nsetInterval(() => {\n // Make sure the playback rate never falls below .4\n if (redQueenAlice.playbackRate > 0.4) {\n redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 0.9);\n }\n adjustBackgroundPlayback();\n}, 1000);\n```\n\nExample:\n```javascript\nfunction goFaster() {\n // But you can speed them up by giving the screen a click or a tap.\n redQueenAlice.updatePlaybackRate(redQueenAlice.playbackRate * 1.1);\n adjustBackgroundPlayback();\n}\n\ndocument.addEventListener(\"click\", goFaster);\ndocument.addEventListener(\"touchstart\", goFaster);\n```\n\nExample:\n```javascript\n/* Alice tires so easily! \n Every so many seconds, reduce their playback rate so they slow a little. \n*/\nconst sceneries = [\n foreground1Movement,\n foreground2Movement,\n background1Movement,\n background2Movement,\n];\n\nfunction adjustBackgroundPlayback() {\n // If Alice and the Red Queen are running at a speed of 0.8โ1.2,\n // the background doesn't move.\n // But if they fall under 0.8, the background slides backwards\n if (redQueenAlice.playbackRate < 0.8) {\n sceneries.forEach((anim) => {\n anim.updatePlaybackRate(-redQueenAlice.playbackRate / 2);\n });\n } else if (redQueenAlice.playbackRate > 1.2) {\n sceneries.forEach((anim) => {\n anim.updatePlaybackRate(redQueenAlice.playbackRate / 2);\n });\n } else {\n sceneries.forEach((anim) => {\n anim.updatePlaybackRate(0);\n });\n }\n}\nadjustBackgroundPlayback();\n```\n\nExample:\n```javascript\ndocument.getAnimations().forEach((animation) => {\n animation.updatePlaybackRate(animation.playbackRate * 0.5);\n});\n```\n\nExample:\n```javascript\ndocument.getElementById(\"eat-me-sprite\").animate([], {\n duration: aliceChange.effect.getComputedTiming().duration / 2,\n});\n```\n\nExample:\n```javascript\nconst aliceChange = document\n .getElementById(\"alice\")\n .animate(\n [\n { transform: \"translate(-50%, -50%) scale(.5)\" },\n { transform: \"translate(-50%, -50%) scale(2)\" },\n ],\n {\n duration: 8000,\n easing: \"ease-in-out\",\n fill: \"both\",\n },\n );\n```\n\nExample:\n```javascript\naliceChange.pause();\n```\n\nExample:\n```javascript\naliceChange.currentTime = 4000;\n```\n\nExample:\n```javascript\naliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;\n```\n\nExample:\n```javascript\nconst drinking = document\n .getElementById(\"liquid\")\n .animate([{ height: \"100%\" }, { height: \"0\" }], {\n fill: \"forwards\",\n duration: aliceChange.effect.getComputedTiming().duration / 2,\n });\ndrinking.pause();\n```\n\nExample:\n```javascript\nconst endGame = () => {\n // get Alice's timeline's playhead location\n const alicePlayhead = aliceChange.currentTime;\n const aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;\n\n // stops Alice's and other animations\n stopPlayingAlice();\n\n // depending on which third it falls into\n const aliceHeight = alicePlayhead / aliceTimeline;\n\n if (aliceHeight <= 0.333) {\n // Alice got smaller!\n // โฆ\n } else if (aliceHeight >= 0.666) {\n // Alice got bigger!\n // โฆ\n } else {\n // Alice didn't change significantly\n // โฆ\n }\n};\n```\n\nExample:\n```javascript\n// When the cake or bottle runs out\nnommingCake.onfinish = endGame;\ndrinking.onfinish = endGame;\n\n// Alice reaches the end of her animation\naliceChange.onfinish = endGame;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.635Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":30,"totalLines":687,"estimatedTokens":4303}}164{"id":"doc-using_the_web_speech_api_web_apis_mdn-355e7b89","source":"documentation","title":"Using the Web Speech API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API","text":"Example:\n```text\n<h1>Speech color changer</h1>\n\n<p class=\"hints\"></p>\n\n<button>Start recognition</button>\n\n<p class=\"output\"><em>...diagnostic messages</em></p>\n```\n\nExample:\n```javascript\nconst SpeechRecognition =\n window.SpeechRecognition || window.webkitSpeechRecognition;\nconst SpeechRecognitionEvent =\n window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;\n```\n\nExample:\n```javascript\nconst colors = [\n \"aqua\",\n \"azure\",\n \"beige\",\n \"bisque\",\n \"black\",\n \"blue\",\n \"brown\",\n \"chocolate\",\n \"coral\",\n // โฆ\n];\n```\n\nExample:\n```javascript\nconst recognition = new SpeechRecognition();\n```\n\nExample:\n```javascript\nrecognition.continuous = false;\nrecognition.lang = \"en-US\";\nrecognition.interimResults = false;\nrecognition.maxAlternatives = 1;\n```\n\nExample:\n```javascript\nconst diagnostic = document.querySelector(\".output\");\nconst bg = document.querySelector(\"html\");\nconst hints = document.querySelector(\".hints\");\nconst startBtn = document.querySelector(\"button\");\n\nconst colorHTML = colors\n .map((v) => `<span style=\"background-color:${v};\">${v}</span>`)\n .join(\"\");\nhints.innerHTML = `Press the button then say a color to change the background color of the app. Try ${colorHTML}.`;\n\nstartBtn.onclick = () => {\n recognition.start();\n console.log(\"Ready to receive a color command.\");\n};\n```\n\nExample:\n```javascript\nrecognition.onresult = (event) => {\n const color = event.results[0][0].transcript;\n diagnostic.textContent = `Result received: ${color}.`;\n bg.style.backgroundColor = color;\n console.log(`Confidence: ${event.results[0][0].confidence}`);\n};\n```\n\nExample:\n```javascript\nrecognition.onspeechend = () => {\n recognition.stop();\n};\n```\n\nExample:\n```javascript\nrecognition.onnomatch = (event) => {\n diagnostic.textContent = \"I didn't recognize that color.\";\n};\n```\n\nExample:\n```javascript\nrecognition.onerror = (event) => {\n diagnostic.textContent = `Error occurred in recognition: ${event.error}`;\n};\n```\n\nExample:\n```javascript\nrecognition.processLocally = true;\n```\n\nExample:\n```javascript\nstartBtn.addEventListener(\"click\", () => {\n // check availability of target language\n SpeechRecognition.available({ langs: [\"en-US\"], processLocally: true }).then(\n (result) => {\n if (result === \"unavailable\") {\n diagnostic.textContent = `en-US is not available to download at this time. Sorry!`;\n } else if (result === \"available\") {\n recognition.start();\n console.log(\"Ready to receive a color command.\");\n } else {\n diagnostic.textContent = `en-US language pack is downloading...`;\n SpeechRecognition.install({\n langs: [\"en-US\"],\n processLocally: true,\n }).then((result) => {\n if (result) {\n diagnostic.textContent = `en-US language pack downloaded. Start recognition again.`;\n } else {\n diagnostic.textContent = `en-US language pack failed to download. Try again later.`;\n }\n });\n }\n },\n );\n});\n```\n\nExample:\n```javascript\nstartBtn.addEventListener(\"click\", () => {\n // Check availability of on-device target language dictation quality\n SpeechRecognition.available({\n langs: [\"en-US\"],\n processLocally: true,\n quality: \"dictation\",\n }).then((result) => {\n if (result === \"unavailable\") {\n diagnostic.textContent = `On-device recognition for dictation not available, running with cloud recognition`;\n recognition.processLocally = false;\n recognition.start();\n } else if (result === \"available\") {\n recognition.start();\n console.log(\"Ready to receive a color command.\");\n } else {\n diagnostic.textContent = `en-US language pack downloading`;\n SpeechRecognition.install({\n langs: [\"en-US\"],\n processLocally: true,\n quality: \"dictation\",\n }).then((result) => {\n if (result) {\n diagnostic.textContent = `en-US language pack downloaded. Try again.`;\n } else {\n diagnostic.textContent = `en-US language pack failed to download. Try again later.`;\n }\n });\n }\n });\n});\n```\n\nExample:\n```javascript\nconst phraseData = [\n { phrase: \"azure\", boost: 5.0 },\n { phrase: \"khaki\", boost: 3.0 },\n { phrase: \"tan\", boost: 2.0 },\n];\n```\n\nExample:\n```javascript\nconst phraseObjects = phraseData.map(\n (p) => new SpeechRecognitionPhrase(p.phrase, p.boost),\n);\n```\n\nExample:\n```javascript\nrecognition.phrases = phraseObjects;\n```\n\nExample:\n```javascript\nrecognition.phrases.push(new SpeechRecognitionPhrase(\"thistle\", 5.0));\n```\n\nExample:\n```text\n<h1>Speech synthesizer</h1>\n\n<p>\n Enter some text in the input below and press return to hear it. Change voices\n using the dropdown menu.\n</p>\n\n<form>\n <input type=\"text\" class=\"txt\" />\n <div>\n <label for=\"rate\">Rate</label\n ><input type=\"range\" min=\"0.5\" max=\"2\" value=\"1\" step=\"0.1\" id=\"rate\" />\n <div class=\"rate-value\">1</div>\n <div class=\"clearfix\"></div>\n </div>\n <div>\n <label for=\"pitch\">Pitch</label\n ><input type=\"range\" min=\"0\" max=\"2\" value=\"1\" step=\"0.1\" id=\"pitch\" />\n <div class=\"pitch-value\">1</div>\n <div class=\"clearfix\"></div>\n </div>\n <select></select>\n</form>\n```\n\nExample:\n```javascript\nconst synth = window.speechSynthesis;\n\nconst inputForm = document.querySelector(\"form\");\nconst inputTxt = document.querySelector(\".txt\");\nconst voiceSelect = document.querySelector(\"select\");\n\nconst pitch = document.querySelector(\"#pitch\");\nconst pitchValue = document.querySelector(\".pitch-value\");\nconst rate = document.querySelector(\"#rate\");\nconst rateValue = document.querySelector(\".rate-value\");\n\nconst voices = [];\n```\n\nExample:\n```javascript\nfunction populateVoiceList() {\n voices = synth.getVoices();\n\n for (const voice of voices) {\n const option = document.createElement(\"option\");\n option.textContent = `${voice.name} (${voice.lang})`;\n\n if (voice.default) {\n option.textContent += \" โ DEFAULT\";\n }\n\n option.setAttribute(\"data-lang\", voice.lang);\n option.setAttribute(\"data-name\", voice.name);\n voiceSelect.appendChild(option);\n }\n}\n```\n\nExample:\n```javascript\npopulateVoiceList();\nif (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = populateVoiceList;\n}\n```\n\nExample:\n```javascript\ninputForm.onsubmit = (event) => {\n event.preventDefault();\n\n const utterThis = new SpeechSynthesisUtterance(inputTxt.value);\n const selectedOption =\n voiceSelect.selectedOptions[0].getAttribute(\"data-name\");\n for (const voice of voices) {\n if (voice.name === selectedOption) {\n utterThis.voice = voice;\n }\n }\n utterThis.pitch = pitch.value;\n utterThis.rate = rate.value;\n synth.speak(utterThis);\n utterThis.onpause = (event) => {\n const char = event.utterance.text.charAt(event.charIndex);\n console.log(\n `Speech paused at character ${event.charIndex} of \"${event.utterance.text}\", which is \"${char}\".`,\n );\n };\n inputTxt.blur();\n};\n```\n\nExample:\n```javascript\npitch.onchange = () => {\n pitchValue.textContent = pitch.value;\n};\n\nrate.onchange = () => {\n rateValue.textContent = rate.value;\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.638Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":23,"totalLines":300,"estimatedTokens":1775}}165{"id":"doc-html_dom_api_web_apis_mdn-f167f230","source":"documentation","title":"HTML DOM API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API","text":"Example:\n```javascript\nconst nameField = document.getElementById(\"userName\");\nconst sendButton = document.getElementById(\"sendButton\");\n\nsendButton.disabled = true;\n// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]\n// nameField.focus();\n\nnameField.addEventListener(\"input\", (event) => {\n const elem = event.target;\n const valid = elem.value.length !== 0;\n\n if (valid && sendButton.disabled) {\n sendButton.disabled = false;\n } else if (!valid && !sendButton.disabled) {\n sendButton.disabled = true;\n }\n});\n```\n\nExample:\n```text\n<p>Please provide the information below. Items marked with \"*\" are required.</p>\n<form action=\"\" method=\"get\">\n <p>\n <label for=\"userName\" required>Your name:</label>\n <input type=\"text\" id=\"userName\" /> (*)\n </p>\n <p>\n <label for=\"userEmail\">Email:</label>\n <input type=\"email\" id=\"userEmail\" />\n </p>\n <input type=\"submit\" value=\"Send\" id=\"sendButton\" />\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.639Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":38,"estimatedTokens":252}}166{"id":"doc-details_html_details_disclosure_element_html_mdn-339d5ca8","source":"documentation","title":"<details> HTML details disclosure element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details","text":"Example:\n```text\n<details>\n <summary>Details</summary>\n Something small enough to escape casual notice.\n</details>\n```\n\nExample:\n```text\ndetails {\n border: 1px solid #aaaaaa;\n border-radius: 4px;\n padding: 0.5em 0.5em 0;\n}\n\nsummary {\n font-weight: bold;\n margin: -0.5em -0.5em 0;\n padding: 0.5em;\n}\n\ndetails[open] {\n padding: 0.5em;\n}\n\ndetails[open] summary {\n border-bottom: 1px solid #aaaaaa;\n margin-bottom: 0.5em;\n}\n```\n\nExample:\n```javascript\ndetails.addEventListener(\"toggle\", (event) => {\n if (details.open) {\n /* the element was toggled open */\n } else {\n /* the element was toggled closed */\n }\n});\n```\n\nExample:\n```text\n<details>\n <summary>System Requirements</summary>\n <p>\n Requires a computer running an operating system. The computer must have some\n memory and ideally some kind of long-term storage. An input device as well\n as some form of output device is recommended.\n </p>\n</details>\n```\n\nExample:\n```text\n<details open>\n <summary>System Requirements</summary>\n <p>\n Requires a computer running an operating system. The computer must have some\n memory and ideally some kind of long-term storage. An input device as well\n as some form of output device is recommended.\n </p>\n</details>\n```\n\nExample:\n```text\n<details name=\"requirements\">\n <summary>Graduation Requirements</summary>\n <p>\n Requires 40 credits, including a passing grade in health, geography,\n history, economics, and wood shop.\n </p>\n</details>\n<details name=\"requirements\">\n <summary>System Requirements</summary>\n <p>\n Requires a computer running an operating system. The computer must have some\n memory and ideally some kind of long-term storage. An input device as well\n as some form of output device is recommended.\n </p>\n</details>\n<details name=\"requirements\">\n <summary>Job Requirements</summary>\n <p>\n Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,\n privacy, security, and internationalization, as well as a dislike of\n broccoli.\n </p>\n</details>\n```\n\nExample:\n```text\ndetails {\n font:\n 16px \"Open Sans\",\n \"Calibri\",\n sans-serif;\n width: 620px;\n}\n\ndetails > summary {\n padding: 2px 6px;\n width: 15em;\n background-color: #dddddd;\n border: none;\n box-shadow: 3px 3px 4px black;\n cursor: pointer;\n}\n\ndetails > p {\n border-radius: 0 0 10px 10px;\n background-color: #dddddd;\n padding: 2px 6px;\n margin: 0;\n box-shadow: 3px 3px 4px black;\n}\n\ndetails:open > summary {\n background-color: #ccccff;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.643Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":127,"estimatedTokens":633}}167{"id":"doc-section_html_generic_section_element_html_mdn-c32b2218","source":"documentation","title":"<section> HTML generic section element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section","text":"Example:\n```text\n<h1>Choosing an Apple</h1>\n<section>\n <h2>Introduction</h2>\n <p>\n This document provides a guide to help with the important task of choosing\n the correct Apple.\n </p>\n</section>\n\n<section>\n <h2>Criteria</h2>\n <p>\n There are many different criteria to be considered when choosing an Apple โ\n size, color, firmness, sweetness, tartness...\n </p>\n</section>\n```\n\nExample:\n```text\nh1,\nh2 {\n margin: 0;\n}\n```\n\nExample:\n```text\n<section>\n <h2>Heading</h2>\n <p>Bunch of awesome content</p>\n</section>\n```\n\nExample:\n```text\n<section>\n <a href=\"#\">Previous article</a>\n <a href=\"#\">Next article</a>\n</section>\n```\n\nExample:\n```text\n<section>\n <button class=\"reply\">Reply</button>\n <button class=\"reply-all\">Reply to all</button>\n <button class=\"fwd\">Forward</button>\n <button class=\"del\">Delete</button>\n</section>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.644Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":55,"estimatedTokens":217}}168{"id":"doc-document_object_model_dom_web_apis_mdn-9f78f036","source":"documentation","title":"Document Object Model (DOM) - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model","text":"Example:\n```javascript\nconst paragraphs = document.querySelectorAll(\"p\");\n// paragraphs[0] is the first <p> element\n// paragraphs[1] is the second <p> element, etc.\nalert(paragraphs[0].nodeName);\n```\n\nExample:\n```text\n<html lang=\"en\">\n <head>\n <title>My Document</title>\n </head>\n <body>\n <h1>Header</h1>\n <p>Paragraph</p>\n </body>\n</html>\n```\n\nExample:\n```text\n# Python DOM example\nimport xml.dom.minidom as m\ndoc = m.parse(r\"C:\\Projects\\Py\\chap1.xml\")\ndoc.nodeName # DOM property of document object\np_list = doc.getElementsByTagName(\"para\")\n```\n\nExample:\n```text\n<body onload=\"console.log('Welcome to my home page!');\">\n โฆ\n</body>\n```\n\nExample:\n```text\n<html lang=\"en\">\n <head> </head>\n <body>\n <script>\n // create a couple of elements in an otherwise empty HTML page\n const heading = document.createElement(\"h1\");\n const headingText = document.createTextNode(\"Big Head!\");\n heading.appendChild(headingText);\n document.body.appendChild(heading);\n </script>\n </body>\n</html>\n```\n\nExample:\n```javascript\nconst table = document.getElementById(\"table\");\nconst tableAttrs = table.attributes; // Node/Element interface\nfor (const attr of tableAttrs) {\n // HTMLTableElement interface: border attribute\n if (attr.nodeName.toLowerCase() === \"border\") {\n table.border = \"1\";\n }\n}\n// HTMLTableElement interface: summary attribute\ntable.summary = \"note: increased border\";\n```\n\nExample:\n```text\n<div class=\"container\">\n <textarea class=\"story\"></textarea>\n <button id=\"set-text\" type=\"button\">Set text content</button>\n <button id=\"clear-text\" type=\"button\">Clear text content</button>\n</div>\n```\n\nExample:\n```text\n.container {\n display: flex;\n gap: 0.5rem;\n flex-direction: column;\n}\n\nbutton {\n width: 200px;\n}\n```\n\nExample:\n```javascript\nconst story = document.querySelector(\".story\");\n\nconst setText = document.querySelector(\"#set-text\");\nsetText.addEventListener(\"click\", () => {\n story.textContent = \"It was a dark and stormy night...\";\n});\n\nconst clearText = document.querySelector(\"#clear-text\");\nclearText.addEventListener(\"click\", () => {\n story.textContent = \"\";\n});\n```\n\nExample:\n```text\n<div class=\"container\">\n <div class=\"parent\">parent</div>\n <button id=\"add-child\" type=\"button\">Add a child</button>\n <button id=\"remove-child\" type=\"button\">Remove child</button>\n</div>\n```\n\nExample:\n```text\n.container {\n display: flex;\n gap: 0.5rem;\n flex-direction: column;\n}\n\nbutton {\n width: 100px;\n}\n\ndiv.parent {\n border: 1px solid black;\n padding: 5px;\n width: 100px;\n height: 100px;\n}\n\ndiv.child {\n border: 1px solid red;\n margin: 10px;\n padding: 5px;\n width: 80px;\n height: 60px;\n box-sizing: border-box;\n}\n```\n\nExample:\n```javascript\nconst parent = document.querySelector(\".parent\");\n\nconst addChild = document.querySelector(\"#add-child\");\naddChild.addEventListener(\"click\", () => {\n // Only add a child if we don't already have one\n // in addition to the text node \"parent\"\n if (parent.childNodes.length > 1) {\n return;\n }\n const child = document.createElement(\"div\");\n child.classList.add(\"child\");\n child.textContent = \"child\";\n parent.appendChild(child);\n});\n\nconst removeChild = document.querySelector(\"#remove-child\");\nremoveChild.addEventListener(\"click\", () => {\n const child = document.querySelector(\".child\");\n parent.removeChild(child);\n});\n```\n\nExample:\n```text\n<html lang=\"en\">\n <head>\n <title>My Document</title>\n </head>\n <body>\n <input type=\"button\" value=\"Change this document.\" />\n <h2>Header</h2>\n <p>Paragraph</p>\n </body>\n</html>\n```\n\nExample:\n```javascript\ndocument.querySelector(\"input\").addEventListener(\"click\", () => {\n // document.getElementsByTagName(\"h2\") returns a NodeList of the <h2>\n // elements in the document, and the first is number 0:\n const header = document.getElementsByTagName(\"h2\").item(0);\n\n // The firstChild of the header is a Text node:\n header.firstChild.data = \"A dynamic document\";\n\n // Now header is \"A dynamic document\".\n\n // Access the first paragraph\n const para = document.getElementsByTagName(\"p\").item(0);\n para.firstChild.data = \"This is the first paragraph.\";\n\n // Create a new Text node for the second paragraph\n const newText = document.createTextNode(\"This is the second paragraph.\");\n\n // Create a new Element to be the second paragraph\n const newElement = document.createElement(\"p\");\n\n // Put the text in the paragraph\n newElement.appendChild(newText);\n\n // Put the paragraph on the end of the document by appending it to\n // the body (which is the parent of para)\n para.parentNode.appendChild(newElement);\n});\n```\n\nExample:\n```javascript\nconst root = document.createElement(\"html\");\nroot.lang = \"en\";\n\nconst head = document.createElement(\"head\");\nconst title = document.createElement(\"title\");\ntitle.appendChild(document.createTextNode(\"My Document\"));\nhead.appendChild(title);\n\nconst body = document.createElement(\"body\");\nconst header = document.createElement(\"h1\");\nheader.appendChild(document.createTextNode(\"Header\"));\nconst paragraph = document.createElement(\"p\");\nparagraph.appendChild(document.createTextNode(\"Paragraph\"));\nbody.appendChild(header);\nbody.appendChild(paragraph);\n\nroot.appendChild(head);\nroot.appendChild(body);\n```\n\nExample:\n```text\n<table id=\"t-daddy\">\n <tbody>\n <tr id=\"tbl1\">\n <td id=\"c1\">one</td>\n </tr>\n <tr>\n <td id=\"c2\">two</td>\n </tr>\n </tbody>\n</table>\n```\n\nExample:\n```text\n#t-daddy {\n border: 1px solid red;\n}\n\n#c1 {\n background-color: pink;\n}\n```\n\nExample:\n```javascript\nfunction stopEvent(event) {\n const c2 = document.getElementById(\"c2\");\n c2.textContent = \"hello\";\n\n // this ought to keep t-daddy from getting the click.\n event.stopPropagation();\n console.log(\"event propagation halted.\");\n}\n\nconst elem = document.getElementById(\"tbl1\");\nelem.addEventListener(\"click\", stopEvent);\n\ndocument.getElementById(\"t-daddy\").addEventListener(\"click\", () => {\n console.log(\"t-daddy clicked\");\n});\n```\n\nExample:\n```text\n<h1>Properties of the DOM <span id=\"eventType\"></span> Event Object</h1>\n```\n\nExample:\n```text\ntable {\n border-collapse: collapse;\n margin-top: 2em;\n}\nthead {\n font-weight: bold;\n}\ntd {\n padding: 2px 10px;\n}\n\n.odd {\n background-color: #efdfef;\n}\n.even {\n background-color: white;\n}\n```\n\nExample:\n```javascript\nfunction showEventProperties(event) {\n function addCell(row, text) {\n const cell = row.insertCell(-1);\n cell.appendChild(document.createTextNode(text));\n }\n\n document.getElementById(\"eventType\").textContent = event.type;\n\n const table = document.createElement(\"table\");\n const thead = table.createTHead();\n let row = thead.insertRow(-1);\n const labelList = [\"#\", \"Property\", \"Value\"];\n const len = labelList.length;\n\n for (let i = 0; i < len; i++) {\n addCell(row, labelList[i]);\n }\n\n const tbody = document.createElement(\"tbody\");\n table.appendChild(tbody);\n\n for (const p in event) {\n row = tbody.insertRow(-1);\n row.className = row.rowIndex % 2 ? \"odd\" : \"even\";\n addCell(row, row.rowIndex);\n addCell(row, p);\n addCell(row, event[p]);\n }\n\n document.body.appendChild(table);\n}\n\nwindow.addEventListener(\"click\", showEventProperties);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.645Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":341,"estimatedTokens":1796}}169{"id":"doc-p_html_paragraph_element_html_mdn-3987811e","source":"documentation","title":"<p> HTML paragraph element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p","text":"Example:\n```text\n<p>\n Geckos are a group of usually small, usually nocturnal lizards. They are found\n on every continent except Antarctica.\n</p>\n\n<p>\n Some species live in houses where they hunt insects attracted by artificial\n light.\n</p>\n```\n\nExample:\n```text\np {\n margin: 10px 0;\n padding: 5px;\n border: 1px solid #999999;\n}\n```\n\nExample:\n```text\np {\n margin-bottom: 2em; /* increase white space after a paragraph */\n}\n```\n\nExample:\n```text\n<p>\n This is the first paragraph of text. This is the first paragraph of text. This\n is the first paragraph of text. This is the first paragraph of text.\n</p>\n<p>\n This is the second paragraph. This is the second paragraph. This is the second\n paragraph. This is the second paragraph.\n</p>\n```\n\nExample:\n```text\n<p>\n Separating paragraphs with blank lines is easiest for readers to scan, but\n they can also be separated by indenting their first lines. This is often used\n to take up less space, such as to save paper in print.\n</p>\n\n<p>\n Writing that is intended to be edited, such as school papers and rough drafts,\n uses both blank lines and indentation for separation. In finished works,\n combining both is considered redundant and amateurish.\n</p>\n\n<p>\n In very old writing, paragraphs were separated with a special character: ยถ,\n the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to\n read.\n</p>\n\n<p>\n How hard to read? See for yourself:\n <button data-toggle-text=\"Oh no! Switch back!\">\n Use pilcrow for paragraphs\n </button>\n</p>\n```\n\nExample:\n```text\np {\n margin: 0;\n text-indent: 3ch;\n}\n\np.pilcrow {\n text-indent: 0;\n display: inline;\n}\np.pilcrow + p.pilcrow::before {\n content: \" ยถ \";\n}\n```\n\nExample:\n```javascript\ndocument.querySelector(\"button\").addEventListener(\"click\", (event) => {\n document.querySelectorAll(\"p\").forEach((paragraph) => {\n paragraph.classList.toggle(\"pilcrow\");\n });\n\n [event.target.innerText, event.target.dataset.toggleText] = [\n event.target.dataset.toggleText,\n event.target.innerText,\n ];\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.646Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":100,"estimatedTokens":515}}170{"id":"doc-div_html_content_division_element_html_mdn-6f8daddb","source":"documentation","title":"<div> HTML content division element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div","text":"Example:\n```text\n<div class=\"warning\">\n <img\n src=\"/shared-assets/images/examples/leopard.jpg\"\n alt=\"An intimidating leopard.\" />\n <p>Beware of the leopard</p>\n</div>\n```\n\nExample:\n```text\n.warning {\n border: 10px ridge red;\n background-color: yellow;\n padding: 0.5rem;\n display: flex;\n flex-direction: column;\n}\n\n.warning img {\n width: 100%;\n}\n\n.warning p {\n font: small-caps bold 1.2rem sans-serif;\n text-align: center;\n}\n```\n\nExample:\n```text\n<div class=\"shadowbox\">\n <p>Here's a very interesting note displayed in a lovely shadowed box.</p>\n</div>\n```\n\nExample:\n```text\n.shadowbox {\n width: 15em;\n border: 1px solid #333333;\n box-shadow: 8px 8px 5px #444444;\n padding: 8px 12px;\n background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.646Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":49,"estimatedTokens":200}}171{"id":"doc-span_html_content_span_element_html_mdn-9bd45337","source":"documentation","title":"<span> HTML content span element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span","text":"Example:\n```text\n<p>\n Add the <span class=\"ingredient\">basil</span>,\n <span class=\"ingredient\">pine nuts</span> and\n <span class=\"ingredient\">garlic</span> to a blender and blend into a paste.\n</p>\n\n<p>\n Gradually add the <span class=\"ingredient\">olive oil</span> while running the\n blender slowly.\n</p>\n```\n\nExample:\n```text\nspan.ingredient {\n color: red;\n}\n```\n\nExample:\n```text\n<p><span>Some text</span></p>\n```\n\nExample:\n```text\nli span {\n background: gold;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.646Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":34,"estimatedTokens":122}}172{"id":"doc-progress_html_progress_indicator_element_html_md-c147b69b","source":"documentation","title":"<progress> HTML progress indicator element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress","text":"Example:\n```text\n<label for=\"file\">File progress:</label>\n\n<progress id=\"file\" max=\"100\" value=\"70\">70%</progress>\n```\n\nExample:\n```text\nlabel {\n padding-right: 10px;\n font-size: 1rem;\n}\n```\n\nExample:\n```text\n<label>\n Uploading Document: <progress value=\"70\" max=\"100\">70 %</progress>\n</label>\n\n<!-- OR -->\n<br />\n\n<label for=\"progress-bar\">Uploading Document</label>\n<progress id=\"progress-bar\" value=\"70\" max=\"100\">70 %</progress>\n```\n\nExample:\n```text\n<div aria-busy=\"true\" aria-describedby=\"progress-bar\">\n <!-- content is for this region is loading -->\n</div>\n\n<!-- ... -->\n\n<progress id=\"progress-bar\" aria-label=\"Content loadingโฆ\"></progress>\n```\n\nExample:\n```text\n<progress value=\"70\" max=\"100\">70 %</progress>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.647Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":45,"estimatedTokens":185}}173{"id":"doc-img_html_image_embed_element_html_mdn-cc6612a2","source":"documentation","title":"<img> HTML image embed element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img","text":"Example:\n```text\n<img\n class=\"fit-picture\"\n src=\"/shared-assets/images/examples/grapefruit-slice.jpg\"\n alt=\"Grapefruit slice atop a pile of other slices\" />\n```\n\nExample:\n```text\n.fit-picture {\n width: 250px;\n}\n```\n\nExample:\n```text\n<img\n src=\"image-file.png\"\n alt=\"My image file description\"\n attributionsrc=\"https://a.example/register-source\n https://b.example/register-source\" />\n```\n\nExample:\n```text\n(width <= 500px) 1000px\n```\n\nExample:\n```text\n<img\n loading=\"lazy\"\n width=\"200\"\n height=\"200\"\n sizes=\"auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)\"\n srcset=\"\n swing-200.jpg 200w,\n swing-400.jpg 400w,\n swing-800.jpg 800w,\n swing-1600.jpg 1600w\n \"\n src=\"swing-400.jpg\"\n alt=\"Kettlebell Swing\" />\n```\n\nExample:\n```text\n<img alt=\"image\" src=\"penguin.jpg\" />\n```\n\nExample:\n```text\n<img alt=\"A Penguin on a beach.\" src=\"penguin.jpg\" />\n```\n\nExample:\n```text\n<img src=\"mdn.svg\" alt=\"MDN\" role=\"img\" />\n```\n\nExample:\n```text\n<img src=\"/shared-assets/images/examples/favicon144.png\" alt=\"MDN\" />\n```\n\nExample:\n```text\n<img\n src=\"/shared-assets/images/examples/favicon72.png\"\n alt=\"MDN\"\n srcset=\"/shared-assets/images/examples/favicon144.png 2x\" />\n```\n\nExample:\n```text\n<img\n src=\"clock-demo-200px.png\"\n alt=\"The time is 12:45.\"\n srcset=\"clock-demo-200px.png 200w, clock-demo-400px.png 400w\"\n sizes=\"(width <= 600px) 200px, 50vw\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.649Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":84,"estimatedTokens":359}}174{"id":"doc-li_html_list_item_element_html_mdn-b78c32c0","source":"documentation","title":"<li> HTML list item element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li","text":"Example:\n```text\n<p>Apollo astronauts:</p>\n\n<ul>\n <li>Neil Armstrong</li>\n <li>Alan Bean</li>\n <li>Peter Conrad</li>\n <li>Edgar Mitchell</li>\n <li>Alan Shepard</li>\n</ul>\n```\n\nExample:\n```text\np,\nli {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\np {\n font-weight: bold;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.649Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":75}}175{"id":"doc-using_html_comments_html_mdn-7de401f2","source":"documentation","title":"Using HTML comments <!-- โฆ --> - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Comments","text":"Example:\n```text\n<!-- Comment -->\n```\n\nExample:\n```text\n<!-- A one-line comment -->\n\n<!--\nA comment\nthat stretches\nover several\nlines\n-->\n\n<!-- The comment below disables\n the HTML contained within -->\n<!--\n<p>\n This content will not be rendered.\n</p>\n-->\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.649Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":26,"estimatedTokens":70}}176{"id":"doc-output_html_output_element_html_mdn-269f6115","source":"documentation","title":"<output> HTML output element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output","text":"Example:\n```text\n<form id=\"example-form\">\n <input type=\"range\" id=\"b\" name=\"b\" value=\"50\" /> +\n <input type=\"number\" id=\"a\" name=\"a\" value=\"10\" /> =\n <output name=\"result\" for=\"a b\">60</output>\n</form>\n```\n\nExample:\n```javascript\nconst form = document.getElementById(\"example-form\");\nconst a = form.elements[\"a\"];\nconst b = form.elements[\"b\"];\nconst result = form.elements[\"result\"];\n\nfunction updateResult() {\n const aValue = a.valueAsNumber;\n const bValue = b.valueAsNumber;\n result.value = aValue + bValue;\n}\n\nform.addEventListener(\"input\", updateResult);\n\nupdateResult();\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.650Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":150}}177{"id":"doc-nav_html_navigation_section_element_html_mdn-29391f6c","source":"documentation","title":"<nav> HTML navigation section element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav","text":"Example:\n```text\n<nav class=\"crumbs\">\n <ol>\n <li class=\"crumb\"><a href=\"#\">Bikes</a></li>\n <li class=\"crumb\"><a href=\"#\">BMX</a></li>\n <li class=\"crumb\">Jump Bike 3000</li>\n </ol>\n</nav>\n\n<h1>Jump Bike 3000</h1>\n<p>\n This BMX bike is a solid step into the pro world. It looks as legit as it\n rides and is built to polish your skills.\n</p>\n```\n\nExample:\n```text\nnav {\n border-bottom: 1px solid black;\n}\n\n.crumbs ol {\n list-style-type: none;\n padding-left: 0;\n}\n\n.crumb {\n display: inline-block;\n}\n\n.crumb a::after {\n display: inline-block;\n color: black;\n content: \">\";\n font-size: 80%;\n font-weight: bold;\n padding: 0 3px;\n}\n```\n\nExample:\n```text\n<nav class=\"menu\">\n <ul>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">About</a></li>\n <li><a href=\"#\">Contact</a></li>\n </ul>\n</nav>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.650Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":54,"estimatedTokens":209}}178{"id":"doc-ul_html_unordered_list_element_html_mdn-58354af8","source":"documentation","title":"<ul> HTML unordered list element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul","text":"Example:\n```text\nli {\n list-style-type: circle;\n}\n\nli li {\n list-style-type: square;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.651Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":12,"estimatedTokens":27}}179{"id":"doc-embed_html_embed_external_content_element_html_m-e459c165","source":"documentation","title":"<embed> HTML embed external content element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed","text":"Example:\n```text\n<embed\n type=\"image/jpeg\"\n src=\"/shared-assets/images/examples/flowers.jpg\"\n width=\"250\"\n height=\"200\" />\n```\n\nExample:\n```text\n<embed\n type=\"video/quicktime\"\n src=\"movie.mov\"\n width=\"640\"\n height=\"480\"\n title=\"Title of my video\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.651Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":20,"estimatedTokens":69}}180{"id":"doc-using_html_form_validation_and_the_constraint_va-8dc19488","source":"documentation","title":"Using HTML form validation and the Constraint Validation API - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation","text":"Example:\n```text\n<form>\n <label for=\"postal-code\">Postal Code: </label>\n <input type=\"text\" id=\"postal-code\" />\n <label for=\"country\">Country: </label>\n <select id=\"country\">\n <option value=\"ch\">Switzerland</option>\n <option value=\"fr\">France</option>\n <option value=\"de\">Germany</option>\n <option value=\"nl\">The Netherlands</option>\n </select>\n <input type=\"submit\" value=\"Validate\" />\n</form>\n```\n\nExample:\n```javascript\nconst countrySelect = document.getElementById(\"country\");\nconst postalCodeField = document.getElementById(\"postal-code\");\n\nfunction checkPostalCode() {\n // For each country, defines the pattern that the postal code has to follow\n const constraints = {\n ch: [\n \"^(CH-)?\\\\d{4}$\",\n \"Swiss postal codes must have exactly 4 digits: e.g. CH-1950 or 1950\",\n ],\n fr: [\n \"^(F-)?\\\\d{5}$\",\n \"French postal codes must have exactly 5 digits: e.g. F-75012 or 75012\",\n ],\n de: [\n \"^(D-)?\\\\d{5}$\",\n \"German postal codes must have exactly 5 digits: e.g. D-12345 or 12345\",\n ],\n nl: [\n \"^(NL-)?\\\\d{4}\\\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$\",\n \"Dutch postal codes must have exactly 4 digits, followed by 2 letters except SA, SD and SS\",\n ],\n };\n\n // Read the country id\n const country = countrySelect.value;\n\n // Build the constraint checker\n const constraint = new RegExp(constraints[country][0], \"\");\n console.log(constraint);\n\n // Check it!\n if (constraint.test(postalCodeField.value)) {\n // The postal code follows the constraint, we use the ConstraintAPI to tell it\n postalCodeField.setCustomValidity(\"\");\n } else {\n // The postal code doesn't follow the constraint, we use the ConstraintAPI to\n // give a message about the format required for this country\n postalCodeField.setCustomValidity(constraints[country][1]);\n }\n}\n```\n\nExample:\n```javascript\ncountrySelect.addEventListener(\"change\", checkPostalCode);\npostalCodeField.addEventListener(\"input\", checkPostalCode);\n```\n\nExample:\n```typescript\n<label for=\"fs\">Select a file smaller than 75 kB: </label>\n<input type=\"file\" id=\"fs\" />\n```\n\nExample:\n```typescript\nconst fs = document.getElementById(\"fs\");\n\nfunction checkFileSize() {\n const files = fs.files;\n\n // If there is (at least) one file selected\n if (files.length > 0) {\n if (files[0].size > 75 * 1000) {\n // Check the constraint\n fs.setCustomValidity(\"The selected file must not be larger than 75 kB\");\n fs.reportValidity();\n return;\n }\n }\n // No custom constraint violation\n fs.setCustomValidity(\"\");\n}\n```\n\nExample:\n```typescript\nfs.addEventListener(\"change\", checkFileSize);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.652Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":100,"estimatedTokens":663}}181{"id":"doc-video_html_video_embed_element_html_mdn-2ca1878b","source":"documentation","title":"<video> HTML video embed element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video","text":"Example:\n```text\n<video controls width=\"250\">\n <source src=\"/shared-assets/videos/flower.webm\" type=\"video/webm\" />\n\n <source src=\"/shared-assets/videos/flower.mp4\" type=\"video/mp4\" />\n\n Download the\n <a href=\"/shared-assets/videos/flower.webm\">WEBM</a>\n or\n <a href=\"/shared-assets/videos/flower.mp4\">MP4</a>\n video.\n</video>\n```\n\nExample:\n```text\n<video controls>\n <source src=\"myVideo.webm\" type=\"video/webm\" />\n <source src=\"myVideo.mp4\" type=\"video/mp4\" />\n <p>\n Your browser doesn't support HTML video. Here is a\n <a href=\"myVideo.mp4\" download=\"myVideo.mp4\">link to the video</a> instead.\n </p>\n</video>\n```\n\nExample:\n```text\n<video controls src=\"video.webm\">\n <track default kind=\"captions\" src=\"captions.vtt\" />\n</video>\n```\n\nExample:\n```javascript\nconst elem = document.querySelector(\"video\");\n\nelem.audioTracks.onaddtrack = (event) => {\n trackEditor.addTrack(event.track);\n};\n\nelem.audioTracks.onremovetrack = (event) => {\n trackEditor.removeTrack(event.track);\n};\n```\n\nExample:\n```text\nAddType video/webm .webm\n```\n\nExample:\n```text\n14\n00:03:14 --> 00:03:18\n[Dramatic rock music]\n\n15\n00:03:19 --> 00:03:21\n[whispering] What's that off in the distance?\n\n16\n00:03:22 --> 00:03:24\nIt'sโฆ it's aโฆ\n\n16 00:03:25 --> 00:03:32\n[Loud thumping]\n[Dishes clattering]\n```\n\nExample:\n```text\n<!-- Basic video example -->\n<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->\n<!-- Poster from peach.blender.org -->\n<video\n controls\n src=\"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4\"\n poster=\"https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217\"\n width=\"620\">\n Sorry, your browser doesn't support embedded videos, but don't worry, you can\n <a href=\"https://archive.org/details/BigBuckBunny_124\">download it</a>\n and watch it with your favorite video player!\n</video>\n```\n\nExample:\n```text\n<!-- Using multiple sources as fallbacks for a video tag -->\n<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->\n<!-- Poster hosted by Wikimedia -->\n<video\n width=\"620\"\n controls\n poster=\"https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg\">\n <source\n src=\"https://archive.org/download/ElephantsDream/ed_hd.avi\"\n type=\"video/avi\" />\n <source\n src=\"https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4\"\n type=\"video/mp4\" />\n\n Sorry, your browser doesn't support embedded videos, but don't worry, you can\n <a\n href=\"https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4\"\n download=\"ed_1024_512kb.mp4\">\n download the MP4\n </a>\n and watch it with your favorite video player!\n</video>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.653Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":114,"estimatedTokens":687}}182{"id":"doc-use_cross_origin_images_in_a_canvas_html_mdn-b1d300cd","source":"documentation","title":"Use cross-origin images in a canvas - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/CORS_enabled_image","text":"Example:\n```text\n<IfModule mod_setenvif.c>\n <IfModule mod_headers.c>\n <FilesMatch \"\\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$\">\n SetEnvIf Origin \":\" IS_CORS\n Header set Access-Control-Allow-Origin \"*\" env=IS_CORS\n </FilesMatch>\n </IfModule>\n</IfModule>\n```\n\nExample:\n```javascript\nfunction startDownload() {\n let imageURL = \"https://mdn.github.io/shared-assets/images/examples/mdn.svg\";\n let imageDescription = \"Logo of a dinosaur in front of a map\";\n\n downloadedImg = new Image();\n downloadedImg.crossOrigin = \"anonymous\";\n downloadedImg.addEventListener(\"load\", imageReceived);\n downloadedImg.alt = imageDescription;\n downloadedImg.src = imageURL;\n}\n```\n\nExample:\n```javascript\nfunction imageReceived() {\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n\n canvas.width = downloadedImg.width;\n canvas.height = downloadedImg.height;\n canvas.innerText = downloadedImg.alt;\n\n context.drawImage(downloadedImg, 0, 0);\n imageBox.appendChild(canvas);\n\n try {\n localStorage.setItem(\"saved-image-example\", canvas.toDataURL(\"image/png\"));\n } catch (err) {\n console.error(`Error: ${err}`);\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.654Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":48,"estimatedTokens":300}}183{"id":"doc-ol_html_ordered_list_element_html_mdn-d85aa171","source":"documentation","title":"<ol> HTML ordered list element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol","text":"Example:\n```text\nli {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n margin-bottom: 0.5rem;\n}\n```\n\nExample:\n```text\n<p>Finishing places of contestants not in the winners' circle:</p>\n\n<ol start=\"4\">\n <li>Speedwalk Stu</li>\n <li>Saunterin' Sam</li>\n <li>Slowpoke Rodriguez</li>\n</ol>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.654Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":22,"estimatedTokens":76}}184{"id":"doc-understanding_quirks_and_standards_modes_html_md-4b3d68eb","source":"documentation","title":"Understanding quirks and standards modes - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>Hello World!</title>\n </head>\n <body></body>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.655Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":13,"estimatedTokens":43}}185{"id":"doc-add_javascript_to_your_web_page_html_mdn-c027ccc4","source":"documentation","title":"Add JavaScript to your web page - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page","text":"Example:\n```text\n<script src=\"path/to/my/script.js\"></script>\n```\n\nExample:\n```text\n<script>\n console.log(\"Some code\");\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.655Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":37}}186{"id":"doc-using_microformats_in_html_html_mdn-1785a12d","source":"documentation","title":"Using microformats in HTML - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats","text":"Example:\n```text\n<a class=\"h-card\" href=\"https://alice.example.com\">Alice Blogger</a>\n```\n\nExample:\n```text\n<p class=\"h-card\">\n <img class=\"u-photo\" src=\"https://example.org/photo.png\" alt=\"\" />\n <a class=\"p-name u-url\" href=\"https://example.org\">Joe Bloggs</a>\n <a class=\"u-email\" href=\"mailto:jbloggs@example.com\">jbloggs@example.com</a>,\n <span class=\"p-street-address\">17 Austerstrรฆti</span>\n <span class=\"p-locality\">Reykjavรญk</span>\n <span class=\"p-country-name\">Iceland</span>\n</p>\n```\n\nExample:\n```text\n<div class=\"h-card\">\n <a class=\"p-name u-url\" href=\"https://blog.lizardwrangler.com/\">\n Mitchell Baker\n </a>\n (<a class=\"p-org h-card\" href=\"https://mozilla.org/\">Mozilla Foundation</a>)\n</div>\n```\n\nExample:\n```json\n{\n \"items\": [\n {\n \"type\": [\"h-card\"],\n \"properties\": {\n \"name\": [\"Mitchell Baker\"],\n \"url\": [\"https://blog.lizardwrangler.com/\"],\n \"org\": [\n {\n \"value\": \"Mozilla Foundation\",\n \"type\": [\"h-card\"],\n \"properties\": {\n \"name\": [\"Mozilla Foundation\"],\n \"url\": [\"https://mozilla.org/\"]\n }\n }\n ]\n }\n }\n ]\n}\n```\n\nExample:\n```text\n<article class=\"h-entry\">\n <h1 class=\"p-name\">Microformats are amazing</h1>\n <p>\n Published by\n <a class=\"p-author h-card\" href=\"https://example.com\">W. Developer</a> on\n <time class=\"dt-published\" datetime=\"2013-06-13 12:00:00\">\n 13<sup>th</sup> June 2013\n </time>\n </p>\n\n <p class=\"p-summary\">In which I extoll the virtues of using microformats.</p>\n\n <div class=\"e-content\">\n <p>Blah blah blah</p>\n </div>\n</article>\n```\n\nExample:\n```text\n<div class=\"h-entry\">\n <p>\n <span class=\"p-author h-card\">\n <a href=\"https://quickthoughts.jgregorymcverry.com/profile/jgmac1106\">\n <img\n class=\"u-photo\"\n alt=\"Greg McVerry\"\n src=\"https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg\" />\n </a>\n <a\n class=\"p-name u-url\"\n href=\"https://quickthoughts.jgregorymcverry.com/profile/jgmac1106\">\n Greg McVerry\n </a>\n </span>\n Replied to\n <a\n class=\"u-in-reply-to\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats\">\n a post on <strong>developer.mozilla.org</strong>\n </a>\n :\n </p>\n <p class=\"p-name e-content\">\n Hey thanks for making this microformats resource\n </p>\n <p>\n <a href=\"https://quickthoughts.jgregorymcverry.com/profile/jgmac1106\">\n Greg McVerry\n </a>\n published this\n <a\n class=\"u-url url\"\n href=\"https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource\">\n <time class=\"dt-published\" datetime=\"2019-05-31T14:19:09+0000\">\n 31 May 2019\n </time>\n </a>\n </p>\n</div>\n```\n\nExample:\n```json\n{\n \"items\": [\n {\n \"type\": [\"h-entry\"],\n \"properties\": {\n \"in-reply-to\": [\n \"https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats\"\n ],\n \"name\": [\"Hey thanks for making this microformats resource\"],\n \"url\": [\n \"https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource\"\n ],\n \"published\": [\"2019-05-31T14:19:09+0000\"],\n \"content\": [\n {\n \"html\": \"Hey thanks for making this microformats resource\",\n \"value\": \"Hey thanks for making this microformats resource\",\n \"lang\": \"en\"\n }\n ],\n \"author\": [\n {\n \"type\": [\"h-card\"],\n \"properties\": {\n \"name\": [\"Greg McVerry\"],\n \"photo\": [\n \"https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg\"\n ],\n \"url\": [\n \"https://quickthoughts.jgregorymcverry.com/profile/jgmac1106\"\n ]\n },\n \"lang\": \"en\",\n \"value\": \"Greg McVerry\"\n }\n ]\n },\n \"lang\": \"en\"\n }\n ]\n}\n```\n\nExample:\n```text\n<div class=\"h-feed\">\n <h1 class=\"p-name\">Microformats Blogs</h1>\n <article class=\"h-entry\">\n <h2 class=\"p-name\">Microformats are amazing</h2>\n <p>\n Published by\n <a class=\"p-author h-card\" href=\"https://example.com\">W. Developer</a> on\n <time class=\"dt-published\" datetime=\"2013-06-13 12:00:00\">\n 13<sup>th</sup> June 2013\n </time>\n </p>\n <p class=\"p-summary\">\n In which I extoll the virtues of using microformats.\n </p>\n <div class=\"e-content\"><p>Blah blah blah</p></div>\n </article>\n</div>\n```\n\nExample:\n```text\n<div class=\"h-event\">\n <h1 class=\"p-name\">Microformats Meetup</h1>\n <p>\n From\n <time class=\"dt-start\" datetime=\"2013-06-30 12:00\">\n 30<sup>th</sup> June 2013, 12:00\n </time>\n to <time class=\"dt-end\" datetime=\"2013-06-30 18:00\">18:00</time> at\n <span class=\"p-location\">Some bar in SF</span>\n </p>\n <p class=\"p-summary\">\n Get together and discuss all things microformats-related.\n </p>\n</div>\n```\n\nExample:\n```text\n<div class=\"h-event\">\n <h2 class=\"p-name\">IndieWeb Summit</h2>\n <time class=\"dt-start\" datetime=\"2019-06-29T09:00:00-07:00\">\n June 29, 2019 at 9:00am (-0700)\n </time>\n <br />through\n <time class=\"dt-end\" datetime=\"2019-06-30T18:00:00-07:00\">\n June 30, 2019 at 6:00pm (-0700)\n </time>\n <br />\n <div class=\"p-location h-card\">\n <div>\n <span class=\"p-name\">Mozilla</span>\n </div>\n <div>\n <span class=\"p-street-address\">1120 NW Couch St</span>,\n <span class=\"p-locality\">Portland</span>,\n <span class=\"p-region\">Oregon</span>,\n <span class=\"p-country\">US</span>\n </div>\n <data class=\"p-latitude\" value=\"45.52345\"></data>\n <data class=\"p-longitude\" value=\"-122.682677\"></data>\n </div>\n <div class=\"e-content\">Come join us</div>\n <div>\n <span class=\"p-author h-card\">\n <a class=\"u-url p-name\" href=\"https://aaronparecki.com\">Aaron Parecki</a>\n </span>\n Published this\n <a href=\"https://aaronparecki.com/2019/06/29/1/\" class=\"u-url\">event </a>on\n <time class=\"dt published\" datetime=\"2019-05-25T18:00:00-07:00\">\n May 5th, 2019\n </time>\n </div>\n</div>\n```\n\nExample:\n```json\n{\n \"items\": [\n {\n \"type\": [\"h-event\"],\n \"properties\": {\n \"name\": [\"IndieWeb Summit\"],\n \"url\": [\"https://aaronparecki.com/2019/06/29/1/\"],\n \"author\": [\n {\n \"type\": [\"h-card\"],\n \"properties\": {\n \"name\": [\"Aaron Parecki\"],\n \"url\": [\"https://aaronparecki.com\"]\n },\n \"lang\": \"en\",\n \"value\": \"Aaron Parecki\"\n }\n ],\n \"start\": [\"2019-06-29T09:00:00-07:00\"],\n \"end\": [\"2019-06-30T18:00:00-07:00\"],\n \"published\": [\"2019-05-25T18:00:00-07:00\"],\n \"content\": [\n {\n \"html\": \"Come join us\",\n \"value\": \"Come join us\",\n \"lang\": \"en\"\n }\n ],\n \"location\": [\n {\n \"type\": [\"h-card\"],\n \"properties\": {\n \"name\": [\"Mozilla\"],\n \"p-street-address\": [\"1120 NW Couch St\"],\n \"locality\": [\"Portland\"],\n \"region\": [\"Oregon\"],\n \"country\": [\"US\"],\n \"latitude\": [\"45.52345\"],\n \"longitude\": [\"-122.682677\"]\n },\n \"lang\": \"en\",\n \"value\": \"Mozilla\"\n }\n ]\n },\n \"lang\": \"en\"\n }\n ]\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.657Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":293,"estimatedTokens":1890}}187{"id":"doc-add_a_hitmap_on_top_of_an_image_html_mdn-031c89ba","source":"documentation","title":"Add a hitmap on top of an image - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Add_a_hit_map_on_top_of_an_image","text":"Example:\n```text\n<img src=\"image-map.png\" alt=\"\" usemap=\"#example-map-1\" />\n```\n\nExample:\n```text\n<map name=\"example-map-1\"> </map>\n```\n\nExample:\n```text\n<map name=\"example-map-1\">\n <area\n shape=\"circle\"\n coords=\"200,250,25\"\n href=\"page-2.html\"\n alt=\"circle example\" />\n\n <area\n shape=\"rect\"\n coords=\"10, 5, 20, 15\"\n href=\"page-3.html\"\n alt=\"rectangle example\" />\n</map>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.658Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":28,"estimatedTokens":104}}188{"id":"doc-input_html_input_element_html_mdn-acbab30c","source":"documentation","title":"<input> HTML input element - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input","text":"Example:\n```text\n<label for=\"name\">Name (4 to 8 characters):</label>\n\n<input\n type=\"text\"\n id=\"name\"\n name=\"name\"\n required\n minlength=\"4\"\n maxlength=\"8\"\n size=\"10\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<input type=\"button\" name=\"button\" value=\"Button\" />\n```\n\nExample:\n```text\n<input type=\"checkbox\" name=\"checkbox\"/>\n```\n\nExample:\n```text\n<input type=\"color\" name=\"color\"/>\n```\n\nExample:\n```text\n<input type=\"date\" name=\"date\"/>\n```\n\nExample:\n```text\n<input type=\"datetime-local\" name=\"datetime-local\"/>\n```\n\nExample:\n```text\n<input type=\"email\" name=\"email\"/>\n```\n\nExample:\n```text\n<input type=\"file\" accept=\"image/*, text/*\" name=\"file\"/>\n```\n\nExample:\n```text\n<input id=\"userId\" name=\"userId\" type=\"hidden\" value=\"abc123\" />\n```\n\nExample:\n```text\n<input type=\"image\" name=\"image\" src=\"\" alt=\"image input\"/>\n```\n\nExample:\n```text\n<input type=\"month\" name=\"month\"/>\n```\n\nExample:\n```text\n<input type=\"number\" name=\"number\"/>\n```\n\nExample:\n```text\n<input type=\"password\" name=\"password\"/>\n```\n\nExample:\n```text\n<input type=\"radio\" name=\"radio\"/>\n```\n\nExample:\n```text\n<input type=\"range\" name=\"range\" min=\"0\" max=\"25\"/>\n```\n\nExample:\n```text\n<input type=\"reset\" name=\"reset\"/>\n```\n\nExample:\n```text\n<input type=\"search\" name=\"search\"/>\n```\n\nExample:\n```text\n<input type=\"submit\" name=\"submit\"/>\n```\n\nExample:\n```text\n<input type=\"tel\" name=\"tel\"/>\n```\n\nExample:\n```text\n<input type=\"text\" name=\"text\"/>\n```\n\nExample:\n```text\n<input type=\"time\" name=\"time\"/>\n```\n\nExample:\n```text\n<input type=\"url\" name=\"url\"/>\n```\n\nExample:\n```text\n<input type=\"week\" name=\"week\"/>\n```\n\nExample:\n```text\n<input type=\"datetime\" name=\"datetime\"/>\n```\n\nExample:\n```text\n<form action=\"page.html\" method=\"post\">\n <label>\n Fruit:\n <input type=\"text\" name=\"fruit\" dirname=\"fruit-dir\" value=\"cherry\" />\n </label>\n <input type=\"submit\" />\n</form>\n<!-- page.html?fruit=cherry&fruit-dir=ltr -->\n```\n\nExample:\n```javascript\nlet form = document.querySelector(\"form\");\n\nlet guestName = form.elements.guest;\nlet hatSize = form.elements[\"hat-size\"];\n```\n\nExample:\n```text\n<input id=\"checkboxInput\" type=\"checkbox\" />\n<label for=\"checkboxInput\">Toggle the checkbox on and off</label>\n```\n\nExample:\n```text\ninput:checked + label {\n color: red;\n font-weight: bold;\n}\n```\n\nExample:\n```text\n/* matches a password input */\ninput[type=\"password\"] {\n}\n\n/* matches a form control whose valid values are limited to a range of values */\ninput[min][max] {\n}\n\n/* matches a form control with a pattern attribute */\ninput[pattern] {\n}\n```\n\nExample:\n```text\n::placeholder {\n color: blue;\n}\n```\n\nExample:\n```text\n<label for=\"textInput\">Note the red caret:</label>\n<input id=\"textInput\" class=\"custom\" size=\"32\" />\n```\n\nExample:\n```text\ninput.custom {\n caret-color: red;\n font:\n 16px \"Helvetica\",\n \"Arial\",\n sans-serif;\n}\n```\n\nExample:\n```text\n<!-- inaccessible -->\n<p>Enter your name: <input id=\"name\" type=\"text\" size=\"30\" /></p>\n\n<!-- implicit label -->\n<p>\n <label>Enter your name: <input id=\"name\" type=\"text\" size=\"30\" /></label>\n</p>\n\n<!-- explicit label -->\n<p>\n <label for=\"name\">Enter your name: </label>\n <input id=\"name\" type=\"text\" size=\"30\" />\n</p>\n```\n\nExample:\n```text\n<input type=\"time\" min=\"20:00\" max=\"08:00\" name=\"overnight\" />\n```\n\nExample:\n```javascript\nfunction validate(input) {\n let validityState = input.validity;\n if (validityState.valueMissing) {\n input.setCustomValidity(\"A value is required\");\n } else if (validityState.rangeUnderflow) {\n input.setCustomValidity(\"Your value is too low\");\n } else if (validityState.rangeOverflow) {\n input.setCustomValidity(\"Your value is too high\");\n } else {\n input.setCustomValidity(\"\");\n }\n}\n```\n\nExample:\n```text\n<form>\n <label for=\"name\">Enter username (upper and lowercase letters): </label>\n <input type=\"text\" name=\"name\" id=\"name\" required pattern=\"[A-Za-z]+\" />\n <button>Submit</button>\n</form>\n```\n\nExample:\n```javascript\nconst nameInput = document.querySelector(\"input\");\n\nnameInput.addEventListener(\"input\", () => {\n nameInput.setCustomValidity(\"\");\n nameInput.checkValidity();\n});\n\nnameInput.addEventListener(\"invalid\", () => {\n if (nameInput.value === \"\") {\n nameInput.setCustomValidity(\"Enter your username!\");\n } else {\n nameInput.setCustomValidity(\n \"Usernames can only contain upper and lowercase letters. Try again!\",\n );\n }\n});\n```\n\nExample:\n```text\n<label for=\"peas\">Do you like peas?</label>\n<input type=\"checkbox\" name=\"peas\" id=\"peas\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.661Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":39,"totalLines":291,"estimatedTokens":1148}}189{"id":"doc-html_attribute_reference_html_mdn-224ae207","source":"documentation","title":"HTML attribute reference - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes","text":"Example:\n```javascript\nfunction onclick(event) {\n with (this.ownerDocument) {\n with (this) {\n console.log(new URL(location)); // 'URL' now resolves to document.URL instead of window.URL\n // TypeError: URL is not a constructor\n }\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.663Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":13,"estimatedTokens":68}}190{"id":"doc-file_system_api_web_apis_mdn-4e8d2729","source":"documentation","title":"File System API - Web APIs | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API","text":"Example:\n```javascript\nasync function getFile() {\n // Open file picker and destructure the result the first handle\n const [fileHandle] = await window.showOpenFilePicker();\n const file = await fileHandle.getFile();\n return file;\n}\n```\n\nExample:\n```javascript\nconst pickerOpts = {\n types: [\n {\n description: \"Images\",\n accept: {\n \"image/*\": [\".png\", \".gif\", \".jpeg\", \".jpg\"],\n },\n },\n ],\n excludeAcceptAllOption: true,\n multiple: false,\n};\n\nasync function getTheFile() {\n // Open file picker and destructure the result the first handle\n const [fileHandle] = await window.showOpenFilePicker(pickerOpts);\n\n // get file contents\n const fileData = await fileHandle.getFile();\n}\n```\n\nExample:\n```javascript\nconst dirName = \"directoryToGetName\";\n\n// assuming we have a directory handle: 'currentDirHandle'\nconst subDir = await currentDirHandle.getDirectoryHandle(dirName, {\n create: true,\n});\n```\n\nExample:\n```javascript\nasync function returnPathDirectories(directoryHandle) {\n // Get a file handle by showing a file picker:\n const [handle] = await self.showOpenFilePicker();\n if (!handle) {\n // User cancelled, or otherwise failed to open a file.\n return;\n }\n\n // Check if handle exists inside our directory handle\n const relativePaths = await directoryHandle.resolve(handle);\n\n if (relativePaths === null) {\n // Not inside directory handle\n } else {\n // relativePaths is an array of names, giving the relative path\n\n for (const name of relativePaths) {\n // log each entry\n console.log(name);\n }\n }\n}\n```\n\nExample:\n```javascript\nasync function saveFile() {\n // create a new handle\n const newHandle = await window.showSaveFilePicker();\n\n // create a FileSystemWritableFileStream to write to\n const writableStream = await newHandle.createWritable();\n\n // write our file\n await writableStream.write(imgBlob);\n\n // close the file and write the contents to disk.\n await writableStream.close();\n}\n```\n\nExample:\n```javascript\n// just pass in the data (no options)\nwritableStream.write(data);\n\n// writes the data to the stream from the determined position\nwritableStream.write({ type: \"write\", position, data });\n\n// updates the current file cursor offset to the position specified\nwritableStream.write({ type: \"seek\", position });\n\n// resizes the file to be size bytes long\nwritableStream.write({ type: \"truncate\", size });\n```\n\nExample:\n```javascript\nonmessage = async (e) => {\n // retrieve message sent to work from main script\n const message = e.data;\n\n // Get handle to draft file in OPFS\n const root = await navigator.storage.getDirectory();\n const draftHandle = await root.getFileHandle(\"draft.txt\", { create: true });\n // Get sync access handle\n const accessHandle = await draftHandle.createSyncAccessHandle();\n\n // Get size of the file.\n const fileSize = accessHandle.getSize();\n // Read file content to a buffer.\n const buffer = new DataView(new ArrayBuffer(fileSize));\n const readBuffer = accessHandle.read(buffer, { at: 0 });\n\n // Write the message to the end of the file.\n const encoder = new TextEncoder();\n const encodedMessage = encoder.encode(message);\n const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });\n\n // Persist changes to disk.\n accessHandle.flush();\n\n // Always close FileSystemSyncAccessHandle if done.\n accessHandle.close();\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.664Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":134,"estimatedTokens":847}}191{"id":"doc-functions_javascript_mdn-0e855e22","source":"documentation","title":"Functions - JavaScript | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions","text":"Example:\n```javascript\nfunction formatNumber(num) {\n return num.toFixed(2);\n}\n\nformatNumber(2);\n```\n\nExample:\n```javascript\nfunction updateBrand(obj) {\n // Mutating the object is visible outside the function\n obj.brand = \"Toyota\";\n // Try to reassign the parameter, but this won't affect\n // the variable's value outside the function\n obj = null;\n}\n\nconst car = {\n brand: \"Honda\",\n model: \"Accord\",\n year: 1998,\n};\n\nconsole.log(car.brand); // Honda\n\n// Pass object reference to the function\nupdateBrand(car);\n\n// updateBrand mutates car\nconsole.log(car.brand); // Toyota\n```\n\nExample:\n```javascript\n// Constructor\nconst multiply = new Function(\"x\", \"y\", \"return x * y\");\n\n// Declaration\nfunction multiply(x, y) {\n return x * y;\n} // No need for semicolon here\n\n// Expression; the function is anonymous but assigned to a variable\nconst multiply = function (x, y) {\n return x * y;\n};\n// Expression; the function has its own name\nconst multiply = function funcName(x, y) {\n return x * y;\n};\n\n// Arrow function\nconst multiply = (x, y) => x * y;\n\n// Method\nconst obj = {\n multiply(x, y) {\n return x * y;\n },\n};\n```\n\nExample:\n```javascript\nconst y = function x() {};\nconsole.log(x); // ReferenceError: x is not defined\n```\n\nExample:\n```javascript\nfunction anonymous(\n) {\n\n}\n```\n\nExample:\n```javascript\nnew Function(\"alert(anonymous);\")();\n```\n\nExample:\n```javascript\n// p is a global variable\nglobalThis.p = 5;\nfunction myFunc() {\n // p is a local variable\n const p = 9;\n\n function decl() {\n console.log(p);\n }\n const expr = function () {\n console.log(p);\n };\n const cons = new Function(\"\\tconsole.log(p);\");\n\n decl();\n expr();\n cons();\n}\nmyFunc();\n\n// Logs:\n// 9 (for 'decl' by function declaration (current scope))\n// 9 (for 'expr' by function expression (current scope))\n// 5 (for 'cons' by Function constructor (global scope))\n```\n\nExample:\n```javascript\n// A function declaration\nfunction foo() {\n console.log(\"FOO!\");\n}\n\ndoSomething(\n // A function expression passed as an argument\n function foo() {\n console.log(\"FOO!\");\n },\n);\n```\n\nExample:\n```javascript\nfunction () { // SyntaxError: Function statements require a function name\n console.log(\"FOO!\");\n}();\n\nfunction foo() {\n console.log(\"FOO!\");\n}(); // SyntaxError: Unexpected token ')'\n```\n\nExample:\n```javascript\n(function () {\n console.log(\"FOO!\");\n})();\n\nvoid function () {\n console.log(\"FOO!\");\n}();\n```\n\nExample:\n```javascript\nfunction myFunc(a, b, c) {\n // You can access the values of a, b, and c here\n}\n```\n\nExample:\n```javascript\nfunction myFunc({ a, b }, c = 1, ...rest) {\n // You can access the values of a, b, c, and rest here\n}\n```\n\nExample:\n```javascript\n\"use strict\";\n\nfunction f() {\n return 1;\n}\n\n{\n function f() {\n return 2;\n }\n}\n\nf() === 1; // true\n\n// f() === 2 in non-strict mode\n```\n\nExample:\n```javascript\nif (shouldDefineZero) {\n function zero() {\n // DANGER: compatibility risk\n console.log(\"This is zero.\");\n }\n}\n```\n\nExample:\n```javascript\n// Using a var makes it available as a global variable,\n// with closer behavior to a top-level function declaration\nvar zero;\nif (shouldDefineZero) {\n zero = function () {\n console.log(\"This is zero.\");\n };\n}\n```\n\nExample:\n```javascript\n// This function returns a string padded with leading zeros\nfunction padZeros(num, totalLen) {\n let numStr = num.toString(); // Initialize return value as string\n const numZeros = totalLen - numStr.length; // Calculate no. of zeros\n for (let i = 1; i <= numZeros; i++) {\n numStr = `0${numStr}`;\n }\n return numStr;\n}\n```\n\nExample:\n```javascript\nlet result;\nresult = padZeros(42, 4); // returns \"0042\"\nresult = padZeros(42, 2); // returns \"42\"\nresult = padZeros(5, 4); // returns \"0005\"\n```\n\nExample:\n```javascript\nif (typeof window.noFunc === \"function\") {\n // use noFunc()\n} else {\n // do something else\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.666Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":18,"totalLines":234,"estimatedTokens":964}}192{"id":"doc-filter_svg_mdn-8b7e305a","source":"documentation","title":"<filter> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter","text":"Example:\n```text\n<svg width=\"230\" height=\"120\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"blurMe\">\n <feGaussianBlur stdDeviation=\"5\" />\n </filter>\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"green\" />\n\n <circle cx=\"170\" cy=\"60\" r=\"50\" fill=\"green\" filter=\"url(#blurMe)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.668Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":14,"estimatedTokens":77}}193{"id":"doc-mpath_svg_mdn-0c3b8b35","source":"documentation","title":"<mpath> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/mpath","text":"Example:\n```text\n<svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 500 300\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect\n x=\"1\"\n y=\"1\"\n width=\"498\"\n height=\"298\"\n fill=\"none\"\n stroke=\"blue\"\n stroke-width=\"2\" />\n\n <!-- Draw the outline of the motion path in blue, along\n with three small circles at the start, middle and end. -->\n <path\n id=\"path1\"\n d=\"M100,250 C 100,50 400,50 400,250\"\n fill=\"none\"\n stroke=\"blue\"\n stroke-width=\"7.06\" />\n <circle cx=\"100\" cy=\"250\" r=\"17.64\" fill=\"blue\" />\n <circle cx=\"250\" cy=\"100\" r=\"17.64\" fill=\"blue\" />\n <circle cx=\"400\" cy=\"250\" r=\"17.64\" fill=\"blue\" />\n\n <!-- Here is a triangle which will be moved about the motion path.\n It is defined with an upright orientation with the base of\n the triangle centered horizontally just above the origin. -->\n <path\n d=\"M-25,-12.5 L25,-12.5 L 0,-87.5 z\"\n fill=\"yellow\"\n stroke=\"red\"\n stroke-width=\"7.06\">\n <!-- Define the motion path animation -->\n <animateMotion dur=\"6s\" repeatCount=\"indefinite\" rotate=\"auto\">\n <mpath href=\"#path1\" />\n </animateMotion>\n </path>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.668Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":46,"estimatedTokens":301}}194{"id":"doc-pattern_svg_mdn-4a1d032a","source":"documentation","title":"<pattern> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/pattern","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 230 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <pattern id=\"star\" viewBox=\"0,0,10,10\" width=\"10%\" height=\"10%\">\n <polygon points=\"0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2\" />\n </pattern>\n </defs>\n\n <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"url(#star)\" />\n <circle\n cx=\"180\"\n cy=\"50\"\n r=\"40\"\n fill=\"none\"\n stroke-width=\"20\"\n stroke=\"url(#star)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.668Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":30,"estimatedTokens":124}}195{"id":"doc-mask_svg_mdn-e5ba8381","source":"documentation","title":"<mask> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/mask","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"-10 -10 120 120\">\n <rect x=\"-10\" y=\"-10\" width=\"120\" height=\"120\" fill=\"blue\" />\n <mask id=\"myMask\" mask-type=\"luminance\">\n <!-- Everything under a white pixel will be visible -->\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"white\" />\n\n <!-- Everything under a black pixel will be invisible -->\n <path\n d=\"M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z\"\n fill=\"black\" />\n </mask>\n\n <polygon points=\"-10,110 110,110 110,-10\" fill=\"orange\" />\n\n <!-- with this mask applied, we \"punch\" a heart shape hole into the circle -->\n <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"purple\" mask=\"url(#myMask)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.669Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":31,"estimatedTokens":191}}196{"id":"doc-style_svg_mdn-a18d75c0","source":"documentation","title":"<style> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/style","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n circle {\n fill: gold;\n stroke: maroon;\n stroke-width: 2px;\n }\n </style>\n\n <circle cx=\"5\" cy=\"5\" r=\"4\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.669Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":75}}197{"id":"doc-radialgradient_svg_mdn-18609101","source":"documentation","title":"<radialGradient> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <radialGradient id=\"myGradient\">\n <stop offset=\"10%\" stop-color=\"gold\" />\n <stop offset=\"95%\" stop-color=\"red\" />\n </radialGradient>\n </defs>\n\n <!-- using my radial gradient -->\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"url('#myGradient')\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.670Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":119}}198{"id":"doc-stop_svg_mdn-58a8376b","source":"documentation","title":"<stop> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/stop","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <linearGradient id=\"myGradient\" gradientTransform=\"rotate(90)\">\n <stop offset=\"5%\" stop-color=\"gold\" />\n <stop offset=\"95%\" stop-color=\"red\" />\n </linearGradient>\n </defs>\n\n <!-- using my linear gradient -->\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"url('#myGradient')\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.670Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":126}}199{"id":"doc-polygon_svg_mdn-14c7c99c","source":"documentation","title":"<polygon> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/polygon","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Example of a polygon with the default fill -->\n <polygon points=\"0,100 50,25 50,75 100,0\" />\n\n <!-- Example of the same polygon shape with stroke and no fill -->\n <polygon points=\"100,100 150,25 150,75 200,0\" fill=\"none\" stroke=\"black\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.670Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":21,"estimatedTokens":103}}200{"id":"doc-script_svg_mdn-3ee0542a","source":"documentation","title":"<script> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/script","text":"Example:\n```text\nClick the circle to change colors.\n<svg\n viewBox=\"0 0 10 10\"\n height=\"120px\"\n width=\"120px\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"5\" cy=\"5\" r=\"4\" />\n\n <script>\n // <![CDATA[\n function getColor() {\n const R = Math.round(Math.random() * 255)\n .toString(16)\n .padStart(2, \"0\");\n\n const G = Math.round(Math.random() * 255)\n .toString(16)\n .padStart(2, \"0\");\n\n const B = Math.round(Math.random() * 255)\n .toString(16)\n .padStart(2, \"0\");\n\n return `#${R}${G}${B}`;\n }\n\n document.querySelector(\"circle\").addEventListener(\"click\", (e) => {\n e.target.style.fill = getColor();\n });\n // ]]>\n </script>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.671Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":37,"estimatedTokens":184}}201{"id":"doc-polyline_svg_mdn-8ccbb3c8","source":"documentation","title":"<polyline> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/polyline","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Example of a polyline with the default fill -->\n <polyline points=\"0,100 50,25 50,75 100,0\" />\n\n <!-- Example of the same polyline shape with stroke and no fill -->\n <polyline points=\"100,100 150,25 150,75 200,0\" fill=\"none\" stroke=\"black\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.671Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":21,"estimatedTokens":104}}202{"id":"doc-view_svg_mdn-a75263f8","source":"documentation","title":"<view> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/view","text":"Example:\n```text\n<svg viewBox=\"0 0 300 100\" width=\"300\" height=\"100\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <view id=\"one\" viewBox=\"0 0 100 100\" />\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\n <view id=\"two\" viewBox=\"100 0 100 100\" />\n <circle cx=\"150\" cy=\"50\" r=\"40\" fill=\"green\" />\n\n <view id=\"three\" viewBox=\"200 0 100 100\" />\n <circle cx=\"250\" cy=\"50\" r=\"40\" fill=\"blue\" />\n</svg>\n```\n\nExample:\n```text\n<img src=\"example.svg\" alt=\"three circles\" width=\"300\" height=\"100\" />\n<br />\n<img src=\"example.svg#three\" alt=\"blue circle\" width=\"100\" height=\"100\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.672Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":24,"estimatedTokens":148}}203{"id":"doc-rect_svg_mdn-628dcb12","source":"documentation","title":"<rect> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 220 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Regular rectangle -->\n <rect width=\"100\" height=\"100\" />\n\n <!-- Rounded corner rectangle -->\n <rect x=\"120\" width=\"100\" height=\"100\" rx=\"15\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.673Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":21,"estimatedTokens":79}}204{"id":"doc-set_svg_mdn-8e68df31","source":"documentation","title":"<set> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/set","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n rect {\n cursor: pointer;\n }\n .round {\n rx: 5px;\n fill: green;\n }\n </style>\n\n <rect id=\"me\" width=\"10\" height=\"10\">\n <set attributeName=\"class\" to=\"round\" begin=\"me.click\" dur=\"2s\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.673Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":29,"estimatedTokens":99}}205{"id":"doc-path_svg_mdn-5d9e6c5a","source":"documentation","title":"<path> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M 10,30\n A 20,20 0,0,1 50,30\n A 20,20 0,0,1 90,30\n Q 90,60 50,90\n Q 10,60 10,30 z\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.673Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":22,"estimatedTokens":76}}206{"id":"doc-text_svg_mdn-b4960aca","source":"documentation","title":"<text> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/text","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 240 80\" xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n .small {\n font: italic 13px sans-serif;\n }\n .heavy {\n font: bold 30px sans-serif;\n }\n\n /* Note that the color of the text is set with the *\n * fill property, the color property is for HTML only */\n .Rrrrr {\n font: italic 40px serif;\n fill: red;\n }\n </style>\n\n <text x=\"20\" y=\"35\" class=\"small\">My</text>\n <text x=\"40\" y=\"35\" class=\"heavy\">cat</text>\n <text x=\"55\" y=\"55\" class=\"small\">is</text>\n <text x=\"65\" y=\"55\" class=\"Rrrrr\">Grumpy!</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.674Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":36,"estimatedTokens":168}}207{"id":"doc-textpath_svg_mdn-c89a9a0f","source":"documentation","title":"<textPath> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/textPath","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- to hide the path, it is usually wrapped in a <defs> element -->\n <!-- <defs> -->\n <path\n id=\"MyPath\"\n fill=\"none\"\n stroke=\"red\"\n d=\"M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50\" />\n <!-- </defs> -->\n\n <text>\n <textPath href=\"#MyPath\">Quick brown fox jumps over the lazy dog.</textPath>\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.674Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":128}}208{"id":"doc-symbol_svg_mdn-0384ccb4","source":"documentation","title":"<symbol> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/symbol","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 80 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Our symbol in its own coordinate system -->\n <symbol id=\"myDot\" width=\"10\" height=\"10\" viewBox=\"0 0 2 2\">\n <circle cx=\"1\" cy=\"1\" r=\"1\" />\n </symbol>\n\n <!-- A grid to materialize our symbol positioning -->\n <path\n d=\"M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20\"\n fill=\"none\"\n stroke=\"pink\" />\n\n <!-- All instances of our symbol -->\n <use href=\"#myDot\" x=\"5\" y=\"5\" opacity=\"1.0\" />\n <use href=\"#myDot\" x=\"20\" y=\"5\" opacity=\"0.8\" />\n <use href=\"#myDot\" x=\"35\" y=\"5\" opacity=\"0.6\" />\n <use href=\"#myDot\" x=\"50\" y=\"5\" opacity=\"0.4\" />\n <use href=\"#myDot\" x=\"65\" y=\"5\" opacity=\"0.2\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.675Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":197}}209{"id":"doc-use_svg_mdn-af6dbe9f","source":"documentation","title":"<use> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 30 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle id=\"myCircle\" cx=\"5\" cy=\"5\" r=\"4\" />\n <use href=\"#myCircle\" x=\"10\" fill=\"blue\" />\n <use href=\"#myCircle\" x=\"20\" fill=\"white\" stroke=\"red\" />\n</svg>\n```\n\nExample:\n```text\n<svg>\n <use href=\"../assets/my-svg.svg#my-fragment\"></use>\n</svg>\n```\n\nExample:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"my-fragment\">\n <circle cx=\"150\" cy=\"100\" r=\"80\" fill=\"green\" />\n</svg>\n```\n\nExample:\n```text\n<svg>\n <use href=\"../assets/my-svg.svg\"></use>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.675Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":40,"estimatedTokens":155}}210{"id":"doc-switch_svg_mdn-08114ace","source":"documentation","title":"<switch> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/switch","text":"Example:\n```text\n<svg viewBox=\"0 -20 100 50\">\n <switch>\n <text systemLanguage=\"ar\">ู
ุฑุญุจุง</text>\n <text systemLanguage=\"de,nl\">Hallo!</text>\n <text systemLanguage=\"en-us\">Howdy!</text>\n <text systemLanguage=\"en-gb\">Wotcha!</text>\n <text systemLanguage=\"en-au\">G'day!</text>\n <text systemLanguage=\"en\">Hello!</text>\n <text systemLanguage=\"es\">Hola!</text>\n <text systemLanguage=\"fr\">Bonjour!</text>\n <text systemLanguage=\"ja\">ใใใซใกใฏ</text>\n <text systemLanguage=\"ru\">ะัะธะฒะตั!</text>\n <text requiredExtensions=\"http://example.org/lang/ext/emoji\">โบ</text>\n </switch>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.675Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":20,"estimatedTokens":155}}211{"id":"doc-svg_svg_mdn-57053a62","source":"documentation","title":"<svg> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg","text":"Example:\n```typescript\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```typescript\n<svg\n viewBox=\"0 0 300 100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"red\"\n fill=\"grey\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" />\n <circle cx=\"150\" cy=\"50\" r=\"4\" />\n\n <svg viewBox=\"0 0 10 10\" x=\"200\" width=\"100\">\n <circle cx=\"5\" cy=\"5\" r=\"4\" />\n </svg>\n</svg>\n```\n\nExample:\n```text\n<div class=\"resizer\">\n <iframe\n class=\"resized\"\n srcdoc='\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 400 400\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"60vmin\"\n width=\"60vmin\">\n <rect x=\"0\" y=\"0\" width=\"50%\" height=\"50%\" fill=\"tomato\" opacity=\"0.75\" />\n <rect\n x=\"25%\"\n y=\"25%\"\n width=\"50%\"\n height=\"50%\"\n fill=\"slategrey\"\n opacity=\"0.75\" />\n <rect x=\"50%\" y=\"50%\" width=\"50%\" height=\"50%\" fill=\"olive\" opacity=\"0.75\" />\n <rect\n x=\"0\"\n y=\"0\"\n width=\"100%\"\n height=\"100%\"\n stroke=\"cadetblue\"\n stroke-width=\"0.5%\"\n fill=\"none\" />\n</svg>\n```\n\nExample:\n```text\n'></iframe>\n</div>\n```\n\nExample:\n```text\n.resizer {\n display: flex;\n margin: 1rem;\n padding: 0;\n resize: both;\n overflow: hidden;\n border: 5px dotted red;\n height: 400px;\n}\n.resizer > .resized {\n flex-grow: 1;\n margin: 0;\n padding: 0;\n border: 0;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.676Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":86,"estimatedTokens":317}}212{"id":"doc-title_the_svg_accessible_name_element_svg_mdn-c7fbc139","source":"documentation","title":"<title> โ the SVG accessible name element - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 20 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"5\" cy=\"5\" r=\"4\">\n <title>I'm a circle</title>\n </circle>\n\n <rect x=\"11\" y=\"1\" width=\"8\" height=\"8\">\n <title>I'm a square</title>\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.677Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":23,"estimatedTokens":81}}213{"id":"doc-attributename_svg_mdn-de4a3b8f","source":"documentation","title":"attributeName - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/attributeName","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 250 250\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"50\" y=\"50\" width=\"100\" height=\"100\">\n <animate\n attributeType=\"XML\"\n attributeName=\"y\"\n from=\"0\"\n to=\"50\"\n dur=\"5s\"\n repeatCount=\"indefinite\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.677Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":91}}214{"id":"doc-attributetype_svg_mdn-9fc4bb0b","source":"documentation","title":"attributeType - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/attributeType","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 250 250\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"50\" y=\"50\" width=\"100\" height=\"100\">\n <animate\n attributeType=\"XML\"\n attributeName=\"y\"\n from=\"0\"\n to=\"50\"\n dur=\"5s\"\n repeatCount=\"indefinite\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.677Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":91}}215{"id":"doc-azimuth_svg_mdn-10982c07","source":"documentation","title":"azimuth - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/azimuth","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 440 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"distantLight1\">\n <feDiffuseLighting>\n <feDistantLight azimuth=\"0\" />\n </feDiffuseLighting>\n </filter>\n <filter id=\"distantLight2\">\n <feDiffuseLighting>\n <feDistantLight azimuth=\"240\" />\n </feDiffuseLighting>\n </filter>\n\n <circle cx=\"100\" cy=\"100\" r=\"80\" filter=\"url(#distantLight1)\" />\n <circle cx=\"340\" cy=\"100\" r=\"80\" filter=\"url(#distantLight2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.678Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":29,"estimatedTokens":139}}216{"id":"doc-tspan_svg_mdn-6d5a43a8","source":"documentation","title":"<tspan> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/tspan","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 240 40\" xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n text {\n font: italic 12px serif;\n }\n tspan {\n font: bold 10px sans-serif;\n fill: red;\n }\n </style>\n\n <text x=\"10\" y=\"30\" class=\"small\">\n You are\n <tspan>not</tspan>\n a banana!\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.678Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":31,"estimatedTokens":99}}217{"id":"doc-basefrequency_svg_mdn-297a801e","source":"documentation","title":"baseFrequency - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"noise1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence baseFrequency=\"0.025\" />\n </filter>\n <filter id=\"noise2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence baseFrequency=\"0.05\" />\n </filter>\n\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#noise1)\" />\n <rect x=\"220\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#noise2)\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n viewBox=\"0 0 220 220\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"displacementFilter\">\n <feTurbulence\n type=\"turbulence\"\n baseFrequency=\"0.05\"\n numOctaves=\"2\"\n result=\"turbulence\" />\n <feDisplacementMap\n in2=\"turbulence\"\n in=\"SourceGraphic\"\n scale=\"50\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\" />\n </filter>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" filter=\"url(#displacementFilter)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.680Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":50,"estimatedTokens":262}}218{"id":"doc-baseprofile_svg_mdn-e208f692","source":"documentation","title":"baseProfile - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseProfile","text":"Example:\n```text\n<svg width=\"120\" height=\"120\" version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\" baseProfile=\"full\">\n\n ...\n\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.680Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":11,"estimatedTokens":38}}219{"id":"doc-alignment_baseline_svg_mdn-26063b19","source":"documentation","title":"alignment-baseline - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/alignment-baseline","text":"Example:\n```text\n<svg\n width=\"300\"\n height=\"120\"\n viewBox=\"0 0 300 120\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Materialization of anchors -->\n <path\n d=\"M60,10 L60,110\n M30,10 L300,10\n M30,65 L300,65\n M30,110 L300,110\n \"\n stroke=\"grey\" />\n\n <!-- Anchors in action -->\n <text alignment-baseline=\"hanging\" x=\"60\" y=\"10\">A hanging</text>\n\n <text alignment-baseline=\"middle\" x=\"60\" y=\"65\">A middle</text>\n\n <text alignment-baseline=\"baseline\" x=\"60\" y=\"110\">A baseline</text>\n\n <!-- Materialization of anchors -->\n <circle cx=\"60\" cy=\"10\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"65\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"110\" r=\"3\" fill=\"red\" />\n\n <style>\n <![CDATA[\n text {\n font: bold 36px Verdana, Helvetica, Arial, sans-serif;\n }\n ]]>\n </style>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.682Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":39,"estimatedTokens":219}}220{"id":"doc-class_svg_mdn-e2725598","source":"documentation","title":"class - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/class","text":"Example:\n```text\n<html lang=\"en\">\n <body>\n <svg\n width=\"120\"\n height=\"220\"\n viewPort=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n <![CDATA[\n rect.rectClass {\n stroke: #000066;\n fill: #00cc00;\n }\n circle.circleClass {\n stroke: #006600;\n fill: #cc0000;\n }\n ]]>\n </style>\n\n <rect class=\"rectClass\" x=\"10\" y=\"10\" width=\"100\" height=\"100\" />\n <circle class=\"circleClass\" cx=\"40\" cy=\"50\" r=\"26\" />\n </svg>\n </body>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.682Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":30,"estimatedTokens":148}}221{"id":"doc-clip_svg_mdn-3b5bab37","source":"documentation","title":"clip - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/clip","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 20 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Auto clipping -->\n <svg x=\"0\" width=\"10\" height=\"10\" clip=\"auto\">\n <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"green\" />\n </svg>\n\n <!-- Rect(top, right, bottom, left) clipping -->\n <svg x=\"10\" width=\"10\" height=\"10\" clip=\"rect(1, 9, 8, 2)\">\n <circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"green\" />\n </svg>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.683Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":117}}222{"id":"doc-clip_path_svg_mdn-7ca1df5e","source":"documentation","title":"clip-path - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/clip-path","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <clipPath id=\"myClip\" clipPathUnits=\"objectBoundingBox\">\n <circle cx=\".5\" cy=\".5\" r=\".5\" />\n </clipPath>\n\n <!-- Top-left: Apply a custom defined clipping path -->\n <rect\n x=\"1\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n stroke=\"green\"\n clip-path=\"url(#myClip)\" />\n\n <!-- Top-right: Apply a CSS basic shape on a fill-box\n geometry. This is the same as having a custom clipping\n path with a clipPathUnits set to objectBoundingBox -->\n <rect\n x=\"11\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n stroke=\"green\"\n clip-path=\"circle() fill-box\" />\n\n <!-- Bottom-left -->\n <rect\n x=\"1\"\n y=\"11\"\n width=\"8\"\n height=\"8\"\n stroke=\"green\"\n clip-path=\"circle() stroke-box\" />\n\n <!-- Bottom-right: Apply a CSS basic shape on a view-box\n geometry. This is the same as having a custom clipping\n path with a clipPathUnits set to userSpaceOnUse -->\n <rect\n x=\"11\"\n y=\"11\"\n width=\"8\"\n height=\"8\"\n stroke=\"green\"\n clip-path=\"circle() view-box\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.683Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":59,"estimatedTokens":293}}223{"id":"doc-begin_svg_mdn-23be4040","source":"documentation","title":"begin - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/begin","text":"Example:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <!-- animated rectangles -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"100\"\n begin=\"0s\"\n dur=\"8s\"\n fill=\"freeze\" />\n </rect>\n\n <rect x=\"35\" y=\"60\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"75\"\n begin=\"2s\"\n dur=\"6s\"\n fill=\"freeze\" />\n </rect>\n\n <rect x=\"60\" y=\"85\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"50\"\n begin=\"4s\"\n dur=\"4s\"\n fill=\"freeze\" />\n </rect>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"105\" x2=\"110\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- animated rectangles -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"50\"\n id=\"first\"\n begin=\"0s;third.end\"\n dur=\"4s\" />\n </rect>\n\n <rect x=\"60\" y=\"60\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"25\"\n id=\"second\"\n begin=\"first.end\"\n dur=\"2s\" />\n </rect>\n\n <rect x=\"85\" y=\"85\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"25\"\n id=\"third\"\n begin=\"second.end\"\n dur=\"2s\" />\n </rect>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"105\" x2=\"110\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- animated rectangle -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n from=\"0\"\n to=\"100\"\n begin=\"startButton.click\"\n dur=\"8s\"\n fill=\"freeze\" />\n </rect>\n\n <!-- trigger -->\n <rect\n id=\"startButton\"\n cursor=\"pointer\"\n x=\"19.5\"\n y=\"62.5\"\n rx=\"5\"\n height=\"25\"\n width=\"80\"\n fill=\"#EFEFEF\"\n stroke=\"black\"\n stroke-width=\"1\" />\n\n <text x=\"60\" y=\"80\" text-anchor=\"middle\" pointer-events=\"none\">\n Click me.\n </text>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- animated rectangle -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n from=\"0\"\n to=\"100\"\n id=\"myLoop\"\n begin=\"0s;myLoop.end\"\n dur=\"4s\"\n repeatCount=\"3\" />\n\n <set\n attributeType=\"CSS\"\n attributeName=\"fill\"\n to=\"green\"\n begin=\"myLoop.begin\" />\n\n <set\n attributeType=\"CSS\"\n attributeName=\"fill\"\n to=\"gold\"\n begin=\"myLoop.repeat(1)\" />\n\n <set\n attributeType=\"CSS\"\n attributeName=\"fill\"\n to=\"red\"\n begin=\"myLoop.repeat(2)\" />\n </rect>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">1s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">3s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- animated rectangles -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n from=\"0\"\n to=\"100\"\n begin=\"accessKey(s)\"\n dur=\"8s\"\n fill=\"freeze\" />\n </rect>\n\n <!-- trigger -->\n <text x=\"60\" y=\"80\" text-anchor=\"middle\" pointer-events=\"none\">\n Hit the \"s\" key\n </text>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.684Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":264,"estimatedTokens":1909}}224{"id":"doc-by_svg_mdn-8297ff3a","source":"documentation","title":"by - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/by","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"10\" y=\"10\" width=\"100\" height=\"100\">\n <animate attributeName=\"width\" fill=\"freeze\" by=\"50\" dur=\"3s\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.684Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":19,"estimatedTokens":73}}225{"id":"doc-clip_rule_svg_mdn-ce08df5e","source":"documentation","title":"clip-rule - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/clip-rule","text":"Example:\n```text\n<g>\n <clipPath id=\"MyClip\">\n <path d=\"...\" clip-rule=\"evenodd\" />\n </clipPath>\n <rect clip-path=\"url(#MyClip)\" ... />\n</g>\n```\n\nExample:\n```text\n<g>\n <clipPath id=\"MyClip\">\n <path d=\"...\" />\n </clipPath>\n <rect clip-path=\"url(#MyClip)\" clip-rule=\"evenodd\" ... />\n</g>\n```\n\nExample:\n```text\n<svg width=\"100\" viewBox=\"0 0 100 90\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Define star path -->\n <defs>\n <path d=\"M50,0 21,90 98,35 2,35 79,90z\" id=\"star\" />\n </defs>\n\n <!-- Left: evenodd -->\n <clipPath id=\"emptyStar\">\n <use href=\"#star\" clip-rule=\"evenodd\" />\n </clipPath>\n <rect clip-path=\"url(#emptyStar)\" width=\"50\" height=\"90\" fill=\"blue\" />\n\n <!-- Right: nonzero -->\n <clipPath id=\"filledStar\">\n <use href=\"#star\" clip-rule=\"nonzero\" />\n </clipPath>\n <rect clip-path=\"url(#filledStar)\" width=\"50\" height=\"90\" x=\"50\" fill=\"red\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.685Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":43,"estimatedTokens":226}}226{"id":"doc-color_svg_mdn-17440ac4","source":"documentation","title":"color - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <g color=\"green\">\n <rect width=\"50\" height=\"50\" fill=\"currentColor\" />\n <circle\n r=\"25\"\n cx=\"70\"\n cy=\"70\"\n stroke=\"currentColor\"\n fill=\"none\"\n stroke-width=\"5\" />\n </g>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.685Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":26,"estimatedTokens":93}}227{"id":"doc-clippathunits_svg_mdn-c856f830","source":"documentation","title":"clipPathUnits - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/clipPathUnits","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\">\n <clipPath id=\"myClip1\" clipPathUnits=\"userSpaceOnUse\">\n <circle cx=\"50\" cy=\"50\" r=\"35\" />\n </clipPath>\n\n <clipPath id=\"myClip2\" clipPathUnits=\"objectBoundingBox\">\n <circle cx=\".5\" cy=\".5\" r=\".35\" />\n </clipPath>\n\n <!-- Some reference rect to materialized to clip path -->\n <rect id=\"r1\" x=\"0\" y=\"0\" width=\"45\" height=\"45\" />\n <rect id=\"r2\" x=\"0\" y=\"55\" width=\"45\" height=\"45\" />\n <rect id=\"r3\" x=\"55\" y=\"55\" width=\"45\" height=\"45\" />\n <rect id=\"r4\" x=\"55\" y=\"0\" width=\"45\" height=\"45\" />\n\n <!-- The first 3 rect are clipped with userSpaceOnUse units -->\n <use clip-path=\"url(#myClip1)\" href=\"#r1\" fill=\"red\" />\n <use clip-path=\"url(#myClip1)\" href=\"#r2\" fill=\"red\" />\n <use clip-path=\"url(#myClip1)\" href=\"#r3\" fill=\"red\" />\n\n <!-- The last rect is clipped with objectBoundingBox units -->\n <use clip-path=\"url(#myClip2)\" href=\"#r4\" fill=\"red\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.686Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":37,"estimatedTokens":249}}228{"id":"doc-cy_svg_mdn-d1923250","source":"documentation","title":"cy - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/cy","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 300\" xmlns=\"http://www.w3.org/2000/svg\">\n <radialGradient cy=\"25%\" id=\"myGradient\">\n <stop offset=\"0\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"black\" />\n </radialGradient>\n\n <circle cy=\"50\" cx=\"50\" r=\"45\" />\n <ellipse cy=\"150\" cx=\"50\" rx=\"45\" ry=\"25\" />\n <rect x=\"5\" y=\"205\" width=\"90\" height=\"90\" fill=\"url(#myGradient)\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 34 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient cy=\"0\" id=\"myGradient000\">\n <stop offset=\"0%\" stop-color=\"gold\" />\n <stop offset=\"50%\" stop-color=\"green\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </radialGradient>\n\n <radialGradient cy=\"50%\" id=\"myGradient050\">\n <stop offset=\"0%\" stop-color=\"gold\" />\n <stop offset=\"50%\" stop-color=\"green\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </radialGradient>\n\n <radialGradient cy=\"100%\" id=\"myGradient100\">\n <stop offset=\"0%\" stop-color=\"gold\" />\n <stop offset=\"50%\" stop-color=\"green\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"1\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n fill=\"url(#myGradient000)\"\n stroke=\"black\" />\n <rect\n x=\"13\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n fill=\"url(#myGradient050)\"\n stroke=\"black\" />\n <rect\n x=\"25\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n fill=\"url(#myGradient100)\"\n stroke=\"black\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.686Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":71,"estimatedTokens":387}}229{"id":"doc-diffuseconstant_svg_mdn-8924f121","source":"documentation","title":"diffuseConstant - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/diffuseConstant","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"diffuseLighting1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feDiffuseLighting in=\"SourceGraphic\" diffuseConstant=\"1\">\n <fePointLight x=\"60\" y=\"60\" z=\"20\" />\n </feDiffuseLighting>\n </filter>\n <filter id=\"diffuseLighting2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feDiffuseLighting in=\"SourceGraphic\" diffuseConstant=\"2\">\n <fePointLight x=\"60\" y=\"60\" z=\"20\" />\n </feDiffuseLighting>\n </filter>\n\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#diffuseLighting1)\" />\n <rect\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#diffuseLighting2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.687Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":195}}230{"id":"doc-decoding_svg_mdn-fd451a2b","source":"documentation","title":"decoding - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/decoding","text":"Example:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <image\n href=\"https://example.com/mdn_logo_dark.png\"\n height=\"200\"\n width=\"200\"\n decoding=\"async\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.687Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":12,"estimatedTokens":56}}231{"id":"doc-crossorigin_svg_mdn-60e4c11b","source":"documentation","title":"crossorigin - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/crossorigin","text":"Example:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <image\n href=\"https://example.com/mdn_logo_dark.png\"\n height=\"200\"\n width=\"200\"\n crossorigin=\"use-credentials\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.688Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":12,"estimatedTokens":59}}232{"id":"doc-cx_svg_mdn-8ec2d0a3","source":"documentation","title":"cx - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/cx","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 300 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <radialGradient cx=\"25%\" id=\"myGradient\">\n <stop offset=\"0\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"black\" />\n </radialGradient>\n\n <circle cx=\"50\" cy=\"50\" r=\"45\" />\n <ellipse cx=\"150\" cy=\"50\" rx=\"45\" ry=\"25\" />\n <rect x=\"205\" y=\"5\" width=\"90\" height=\"90\" fill=\"url(#myGradient)\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 34 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient cx=\"0\" id=\"myGradient000\">\n <stop offset=\"0%\" stop-color=\"gold\" />\n <stop offset=\"50%\" stop-color=\"green\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </radialGradient>\n\n <radialGradient cx=\"50%\" id=\"myGradient050\">\n <stop offset=\"0%\" stop-color=\"gold\" />\n <stop offset=\"50%\" stop-color=\"green\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </radialGradient>\n\n <radialGradient cx=\"100%\" id=\"myGradient100\">\n <stop offset=\"0%\" stop-color=\"gold\" />\n <stop offset=\"50%\" stop-color=\"green\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"1\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n fill=\"url(#myGradient000)\"\n stroke=\"black\" />\n <rect\n x=\"13\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n fill=\"url(#myGradient050)\"\n stroke=\"black\" />\n <rect\n x=\"25\"\n y=\"1\"\n width=\"8\"\n height=\"8\"\n fill=\"url(#myGradient100)\"\n stroke=\"black\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.688Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":71,"estimatedTokens":387}}233{"id":"doc-fegaussianblur_svg_mdn-75883fc9","source":"documentation","title":"<feGaussianBlur> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur","text":"Example:\n```text\n<filter x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\">\n```\n\nExample:\n```text\n<svg\n width=\"230\"\n height=\"120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <filter id=\"blurMe\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\" />\n </filter>\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"green\" />\n\n <circle cx=\"170\" cy=\"60\" r=\"50\" fill=\"green\" filter=\"url(#blurMe)\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <filter id=\"dropShadow\">\n <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n <feOffset dx=\"2\" dy=\"4\" />\n <feMerge>\n <feMergeNode />\n <feMergeNode in=\"SourceGraphic\" />\n </feMerge>\n </filter>\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"green\" filter=\"url(#dropShadow)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.689Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":43,"estimatedTokens":223}}234{"id":"doc-id_html_global_attribute_html_mdn-31bbe1ff","source":"documentation","title":"id HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id","text":"Example:\n```text\n<p>A normal, boring paragraph. Try not to fall asleep.</p>\n\n<p id=\"exciting\">The most exciting paragraph on the page. One of a kind!</p>\n```\n\nExample:\n```text\n#exciting {\n background: linear-gradient(to bottom, #ffe8d4, #f69d3c);\n border: 1px solid dimgrey;\n padding: 10px;\n border-radius: 10px;\n box-shadow: 2px 2px 1px black;\n}\n\n#exciting::before {\n content: \"โน๏ธ\";\n margin-right: 5px;\n}\n```\n\nExample:\n```text\n<p id=\"preamble\"></p>\n```\n\nExample:\n```javascript\nconst content = window.preamble.textContent;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.689Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":34,"estimatedTokens":137}}235{"id":"doc-itemprop_html_global_attribute_html_mdn-a08dc5fe","source":"documentation","title":"itemprop HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop","text":"Example:\n```text\n<h1 itemscope>\n <data itemprop=\"product-id\" value=\"9678AOU879\">The Instigator 2000</data>\n</h1>\n```\n\nExample:\n```text\n<figure>\n <img src=\"castle.jpeg\" />\n <figcaption>\n <span itemscope><span itemprop=\"name\">The Castle</span></span> (1986)\n </figcaption>\n</figure>\n```\n\nExample:\n```text\n<span itemscope><meta itemprop=\"name\" content=\"The Castle\" /></span>\n<figure>\n <img src=\"castle.jpeg\" />\n <figcaption>The Castle (1986)</figcaption>\n</figure>\n```\n\nExample:\n```text\n<dl\n itemscope\n itemtype=\"https://schema.org/Book\"\n itemid=\"urn:isbn:0-374-22848-5<\">\n <dt>Title</dt>\n <dd itemprop=\"title\">Owls of the Eastern Ice</dd>\n <dt>Author</dt>\n <dd itemprop=\"author\">Jonathan C Slaght</dd>\n <dt>Publication date</dt>\n <dd>\n <time itemprop=\"datePublished\" datetime=\"2020-08-04\">August 4 2020</time>\n </dd>\n</dl>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.690Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":44,"estimatedTokens":215}}236{"id":"doc-itemid_html_global_attribute_html_mdn-54bd886e","source":"documentation","title":"itemid HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemid","text":"Example:\n```text\n<dl\n itemscope\n itemtype=\"https://schema.org/Book\"\n itemid=\"urn:isbn:0-374-22848-5<\">\n <dt>Title</dt>\n <dd itemprop=\"title\">Owls of the Eastern Ice</dd>\n <dt>Author</dt>\n <dd itemprop=\"author\">Jonathan C Slaght</dd>\n <dt>Publication date</dt>\n <dd>\n <time itemprop=\"datePublished\" datetime=\"2020-08-04\">August 4 2020</time>\n </dd>\n</dl>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.691Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":18,"estimatedTokens":96}}237{"id":"doc-itemref_html_global_attribute_html_mdn-2c94b5d3","source":"documentation","title":"itemref HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemref","text":"Example:\n```json\n{\n \"@id\": \"amanda\",\n \"name\": \"Amanda\",\n \"band\": {\n \"@id\": \"b\",\n \"name\": \"Jazz Band\",\n \"size\": 12\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.691Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":14,"estimatedTokens":38}}238{"id":"doc-lang_html_global_attribute_html_mdn-81449db1","source":"documentation","title":"lang HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang","text":"Example:\n```text\n<p>This paragraph is English, but the language is not specifically defined.</p>\n\n<p lang=\"en-GB\">This paragraph is defined as British English.</p>\n\n<p lang=\"fr\">Ce paragraphe est dรฉfini en franรงais.</p>\n```\n\nExample:\n```text\np::before {\n padding-right: 5px;\n}\n\n[lang=\"en-GB\"]::before {\n content: \"(In British English) \";\n}\n\n[lang=\"fr\"]::before {\n content: \"(In French) \";\n}\n```\n\nExample:\n```text\n<div class=\"dropdown-container language-menu\">\n <button\n id=\"header-language-menu\"\n type=\"button\"\n class=\"dropdown-menu-label\"\n aria-haspopup=\"true\"\n aria-owns=\"language-menu\"\n aria-label=\"Current language is English. Choose your preferred language.\">\n English\n <span class=\"dropdown-arrow-down\" aria-hidden=\"true\">โผ</span>\n </button>\n <ul\n id=\"language-menu\"\n class=\"dropdown-menu-items right show\"\n aria-expanded=\"true\"\n role=\"menu\">\n <li role=\"menuitem\">\n <a\n href=\"/ca/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Catalan\">\n <bdi lang=\"ca\">Catalร </bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/de/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"German\">\n <bdi lang=\"de\">Deutsch</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/es/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Spanish\">\n <bdi lang=\"es\">Espaรฑol</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/fr/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"French\">\n <bdi lang=\"fr\">Franรงais</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/ja/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Japanese\">\n <bdi lang=\"ja\">ๆฅๆฌ่ช</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/ko/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Korean\">\n <bdi lang=\"ko\">ํ๊ตญ์ด</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/pt-BR/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Portuguese (Brazilian)\">\n <bdi lang=\"pt-BR\">Portuguรชs (do Brasil)</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/ru/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Russian\">\n <bdi lang=\"ru\">ะ ัััะบะธะน</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/uk/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Ukrainian\">\n <bdi lang=\"uk\">ะฃะบัะฐัะฝััะบะฐ</bdi>\n </a>\n </li>\n <li role=\"menuitem\">\n <a\n href=\"/zh-CN/docs/Web/HTML/Reference/Global_attributes/lang\"\n title=\"Chinese (Simplified)\">\n <bdi lang=\"zh-Hans\">ไธญๆ (็ฎไฝ)</bdi>\n </a>\n </li>\n <li>\n <a\n href=\"/en-US/docs/Web/HTML/Reference/Global_attributes/lang\"\n rel=\"nofollow\"\n id=\"translations-add\">\n Add a translation\n </a>\n </li>\n </ul>\n</div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.692Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":125,"estimatedTokens":750}}239{"id":"doc-svg_filters_svg_mdn-58d21803","source":"documentation","title":"SVG filters - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_filters","text":"Example:\n```text\n<defs>\n <filter id=\"drop-shadow\">\n <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n </filter>\n</defs>\n\n<g id=\"ghost\" filter=\"url(#drop-shadow)\">\n <!--Ghost drawing in here-->\n</g>\n```\n\nExample:\n```text\n<defs>\n <filter id=\"drop-shadow\">\n <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" result=\"blur\" />\n <feoffset in=\"blur\" dx=\"4\" dy=\"4\" result=\"offsetBlur\" />\n <feMerge>\n <feMergeNode in=\"offsetBlur\" />\n <feMergeNode in=\"SourceGraphic\" />\n </feMerge>\n </filter>\n</defs>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.693Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":136}}240{"id":"doc-namespaces_crash_course_svg_mdn-cf05e2ac","source":"documentation","title":"Namespaces crash course - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/Namespaces_crash_course","text":"Example:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n <!-- more tags here -->\n</svg>\n```\n\nExample:\n```text\n<report xmlns=\"https://www.acme.org/reports\">\n <title>Some stats</title>\n <summary>...</summary>\n <statTable xmlns=\"https://www.acme.org/tables\">\n <content>...</content>\n <!-- redeclaring root's default namespace -->\n <summary xmlns=\"https://www.acme.org/reports\">...</summary>\n </statTable>\n</report>\n```\n\nExample:\n```text\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <script xlink:href=\"cool-script.js\" type=\"text/javascript\" />\n</svg>\n```\n\nExample:\n```text\n<html\n lang=\"en\"\n xmlns=\"http://www.w3.org/1999/xhtml\"\n xmlns:svg=\"http://www.w3.org/2000/svg\">\n <body>\n <h1>SVG embedded inline in XHTML</h1>\n <svg:svg width=\"300px\" height=\"200px\">\n <svg:circle cx=\"150\" cy=\"100\" r=\"50\" fill=\"red\" />\n </svg:svg>\n </body>\n</html>\n```\n\nExample:\n```javascript\ndocument.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n```\n\nExample:\n```javascript\nrect.getAttributeNS(null, \"x\");\n```\n\nExample:\n```javascript\nelt.getAttributeNS(\"http://www.w3.org/1999/xlink\", \"href\");\n```\n\nExample:\n```javascript\nelt.setAttributeNS(\n \"http://www.w3.org/1999/xlink\",\n \"xlink:href\",\n \"other-doc.svg\",\n);\n```\n\nExample:\n```javascript\nconst SVG_NS = \"http://www.w3.org/2000/svg\";\nconst XLINK_NS = \"http://www.w3.org/1999/xlink\";\nconst image = document.createElementNS(SVG_NS, \"image\");\nimage.setAttributeNS(null, \"width\", \"100\");\nimage.setAttributeNS(null, \"height\", \"100\");\nimage.setAttributeNS(XLINK_NS, \"xlink:href\", \"flower.png\");\n```\n\nExample:\n```text\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"></svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.693Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":86,"estimatedTokens":434}}241{"id":"doc-getting_started_svg_mdn-80591ff8","source":"documentation","title":"Getting started - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Getting_started","text":"Example:\n```text\n<svg width=\"300\" height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\">\n\n <rect width=\"100%\" height=\"100%\" fill=\"red\" />\n\n <circle cx=\"150\" cy=\"100\" r=\"80\" fill=\"green\" />\n\n <text x=\"150\" y=\"125\" font-size=\"60\" text-anchor=\"middle\" fill=\"white\">SVG</text>\n\n</svg>\n```\n\nExample:\n```text\n<object data=\"image.svg\" type=\"image/svg+xml\"></object>\n```\n\nExample:\n```text\n<iframe src=\"image.svg\"></iframe>\n```\n\nExample:\n```text\nContent-Type: image/svg+xml\nVary: Accept-Encoding\n```\n\nExample:\n```text\nContent-Type: image/svg+xml\nContent-Encoding: gzip\nVary: Accept-Encoding\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.694Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":38,"estimatedTokens":151}}242{"id":"doc-scripting_svg_mdn-f74e5dcb","source":"documentation","title":"Scripting - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/Scripting","text":"Example:\n```javascript\nfunction myRect(x, y, w, h, message) {\n this.message = message;\n\n this.rect = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n this.rect.setAttributeNS(null, \"x\", x);\n this.rect.setAttributeNS(null, \"y\", y);\n this.rect.setAttributeNS(null, \"width\", w);\n this.rect.setAttributeNS(null, \"height\", h);\n document.documentElement.appendChild(this.rect);\n\n this.rect.addEventListener(\"click\", this);\n\n this.handleEvent = (evt) => {\n switch (evt.type) {\n case \"click\":\n alert(this.message);\n break;\n }\n };\n}\n```\n\nExample:\n```javascript\nconst svgDoc = document.embeds[\"name_of_svg\"].getSVGDocument();\n```\n\nExample:\n```javascript\nconst svgDoc = document.getElementById(\"iframe_element\").contentDocument;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.695Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":35,"estimatedTokens":197}}243{"id":"doc-svg_in_html_introduction_svg_mdn-5033d0df","source":"documentation","title":"SVG in HTML introduction - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_in_HTML","text":"Example:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>SVG Demo</title>\n <meta name=\"viewport\" content=\"width=device-width\" />\n </head>\n <body>\n <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\">\n <title>A gradient</title>\n <linearGradient id=\"gradient\">\n <stop class=\"begin\" offset=\"0%\" stop-color=\"red\" />\n <stop class=\"end\" offset=\"100%\" stop-color=\"black\" />\n </linearGradient>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"url(#gradient)\" />\n <circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"url(#gradient)\" />\n </svg>\n </body>\n</html>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 125\" role=\"img\" aria-labelledby=\"svgTitle svgDescription\">\n <title id=\"svgTitle\">Manual</title>\n <desc id=\"svgDescription\">\n A nondescript twelve page booklet opened to the middle page\n </desc>\n <defs>\n <style>\n rect {\n fill: #cccccc;\n stroke: #666666;\n transform-origin: top;\n }\n </style>\n </defs>\n\n <rect width=\"36\" height=\"60\" x=\"13\" y=\"18\" ry=\"2\" transform=\"skewY(24deg)\" />\n <rect width=\"39\" height=\"60\" x=\"11\" y=\"20\" ry=\"2\" transform=\"skewY(18deg)\" />\n <rect width=\"42\" height=\"90\" x=\"8\" y=\"22\" ry=\"2\" transform=\"skewY(12deg)\" />\n <rect width=\"36\" height=\"60\" x=\"50\" y=\"18\" ry=\"2\" transform=\"skewY(-24deg)\" />\n <rect width=\"39\" height=\"60\" x=\"50\" y=\"20\" ry=\"2\" transform=\"skewY(-18deg)\" />\n <rect width=\"42\" height=\"90\" x=\"50\" y=\"22\" ry=\"2\" transform=\"skewY(-12deg)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.695Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":50,"estimatedTokens":388}}244{"id":"doc-gradients_in_svg_svg_mdn-83e75613","source":"documentation","title":"Gradients in SVG - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients","text":"Example:\n```text\n<svg width=\"120\" height=\"240\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"Gradient1\">\n <stop class=\"stop1\" offset=\"0%\" />\n <stop class=\"stop2\" offset=\"50%\" />\n <stop class=\"stop3\" offset=\"100%\" />\n </linearGradient>\n <linearGradient id=\"Gradient2\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"50%\" stop-color=\"black\" stop-opacity=\"0\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </linearGradient>\n </defs>\n <style>\n #rect1 {\n fill: url(\"#Gradient1\");\n }\n .stop1 {\n stop-color: red;\n }\n .stop2 {\n stop-color: black;\n stop-opacity: 0;\n }\n .stop3 {\n stop-color: blue;\n }\n </style>\n\n <rect id=\"rect1\" x=\"10\" y=\"10\" rx=\"15\" ry=\"15\" width=\"100\" height=\"100\" />\n <rect\n x=\"10\"\n y=\"120\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#Gradient2)\" />\n</svg>\n```\n\nExample:\n```text\n<stop offset=\"100%\" stop-color=\"yellow\" stop-opacity=\"0.5\"/>\n```\n\nExample:\n```text\n<style>\n #rect1 {\n fill: url(\"#Gradient1\");\n }\n</style>\n```\n\nExample:\n```text\n<linearGradient id=\"Gradient2\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"></linearGradient>\n```\n\nExample:\n```text\n<linearGradient id=\"Gradient1\">\n <stop id=\"stop1\" offset=\"0%\" />\n <stop id=\"stop2\" offset=\"50%\" />\n <stop id=\"stop3\" offset=\"100%\" />\n</linearGradient>\n<linearGradient\n id=\"Gradient2\"\n x1=\"0\"\n x2=\"0\"\n y1=\"0\"\n y2=\"1\"\n href=\"#Gradient1\" />\n```\n\nExample:\n```text\n<svg width=\"120\" height=\"240\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient id=\"RadialGradient1\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n <radialGradient id=\"RadialGradient2\" cx=\"0.25\" cy=\"0.25\" r=\"0.25\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"10\"\n y=\"10\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#RadialGradient1)\" />\n <rect\n x=\"10\"\n y=\"120\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#RadialGradient2)\" />\n</svg>\n```\n\nExample:\n```text\n<svg width=\"120\" height=\"120\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient id=\"Gradient\" cx=\"0.5\" cy=\"0.5\" r=\"0.5\" fx=\"0.25\" fy=\"0.25\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"10\"\n y=\"10\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#Gradient)\"\n stroke=\"black\"\n stroke-width=\"2\" />\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"35\" cy=\"35\" r=\"2\" fill=\"white\" stroke=\"white\" />\n <circle cx=\"60\" cy=\"60\" r=\"2\" fill=\"white\" stroke=\"white\" />\n <text x=\"38\" y=\"40\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">\n (fx,fy)\n </text>\n <text x=\"63\" y=\"63\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">\n (cx,cy)\n </text>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"220\" height=\"220\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient\n id=\"GradientPad\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.4\"\n fx=\"0.75\"\n fy=\"0.75\"\n spreadMethod=\"pad\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n <radialGradient\n id=\"GradientRepeat\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.4\"\n fx=\"0.75\"\n fy=\"0.75\"\n spreadMethod=\"repeat\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n <radialGradient\n id=\"GradientReflect\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.4\"\n fx=\"0.75\"\n fy=\"0.75\"\n spreadMethod=\"reflect\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"10\"\n y=\"10\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#GradientPad)\" />\n <rect\n x=\"10\"\n y=\"120\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#GradientRepeat)\" />\n <rect\n x=\"120\"\n y=\"120\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#GradientReflect)\" />\n\n <text x=\"15\" y=\"30\" fill=\"white\" font-family=\"sans-serif\" font-size=\"12pt\">\n Pad\n </text>\n <text x=\"15\" y=\"140\" fill=\"white\" font-family=\"sans-serif\" font-size=\"12pt\">\n Repeat\n </text>\n <text x=\"125\" y=\"140\" fill=\"white\" font-family=\"sans-serif\" font-size=\"12pt\">\n Reflect\n </text>\n</svg>\n```\n\nExample:\n```text\n<radialGradient\n id=\"Gradient\"\n cx=\"60\"\n cy=\"60\"\n r=\"50\"\n fx=\"35\"\n fy=\"35\"\n gradientUnits=\"userSpaceOnUse\"></radialGradient>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.697Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":233,"estimatedTokens":1200}}245{"id":"doc-positions_svg_mdn-d5678324","source":"documentation","title":"Positions - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Positions","text":"Example:\n```text\n<svg width=\"200\" height=\"200\">โฆ</svg>\n```\n\nExample:\n```typescript\n<svg width=\"200\" height=\"200\" viewBox=\"0 0 100 100\">\n <rect x=\"10\" y=\"10\" width=\"40\" height=\"40\" fill=\"royalblue\" />\n</svg>\n```\n\nExample:\n```typescript\nsvg {\n border: 1px solid gray;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.698Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":20,"estimatedTokens":72}}246{"id":"doc-basic_shapes_svg_mdn-13b8bb5e","source":"documentation","title":"Basic shapes - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes","text":"Example:\n```text\n<svg width=\"200\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <rect x=\"10\" y=\"10\" width=\"30\" height=\"30\" stroke=\"black\" fill=\"none\" stroke-width=\"5\"/>\n <rect x=\"60\" y=\"10\" rx=\"10\" ry=\"10\" width=\"30\" height=\"30\" stroke=\"black\" fill=\"none\" stroke-width=\"5\"/>\n\n <circle cx=\"25\" cy=\"75\" r=\"20\" stroke=\"red\" fill=\"none\" stroke-width=\"5\"/>\n <ellipse cx=\"75\" cy=\"75\" rx=\"20\" ry=\"5\" stroke=\"red\" fill=\"none\" stroke-width=\"5\"/>\n\n <line x1=\"10\" x2=\"50\" y1=\"110\" y2=\"150\" stroke=\"orange\" stroke-width=\"5\"/>\n <polyline points=\"60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145\"\n stroke=\"orange\" fill=\"none\" stroke-width=\"5\"/>\n\n <polygon points=\"50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180\"\n stroke=\"green\" fill=\"none\" stroke-width=\"5\"/>\n\n <path d=\"M20,230 Q40,205 50,230 T90,230\" fill=\"none\" stroke=\"blue\" stroke-width=\"5\"/>\n</svg>\n```\n\nExample:\n```text\n<rect x=\"10\" y=\"10\" width=\"30\" height=\"30\"/>\n<rect x=\"60\" y=\"10\" rx=\"10\" ry=\"10\" width=\"30\" height=\"30\"/>\n```\n\nExample:\n```text\n<circle cx=\"25\" cy=\"75\" r=\"20\"/>\n```\n\nExample:\n```text\n<ellipse cx=\"75\" cy=\"75\" rx=\"20\" ry=\"5\"/>\n```\n\nExample:\n```text\n<line x1=\"10\" x2=\"50\" y1=\"110\" y2=\"150\" stroke=\"black\" stroke-width=\"5\"/>\n```\n\nExample:\n```text\n<polyline points=\"60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145\"/>\n```\n\nExample:\n```text\n<polygon points=\"50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180\"/>\n```\n\nExample:\n```text\n<path d=\"M20,230 Q40,205 50,230 T90,230\" fill=\"none\" stroke=\"blue\" stroke-width=\"5\"/>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.699Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":58,"estimatedTokens":402}}247{"id":"doc-fills_and_strokes_svg_mdn-452eb9b5","source":"documentation","title":"Fills and strokes - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Fills_and_strokes","text":"Example:\n```text\n<svg width=\"160\" height=\"140\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\"\n stroke-width=\"15\" />\n</svg>\n```\n\nExample:\n```text\n<svg width=\"160\" height=\"140\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"40\" x2=\"120\" y1=\"20\" y2=\"20\" stroke=\"black\" stroke-width=\"20\" stroke-linecap=\"butt\"/>\n <line x1=\"40\" x2=\"120\" y1=\"60\" y2=\"60\" stroke=\"black\" stroke-width=\"20\" stroke-linecap=\"square\"/>\n <line x1=\"40\" x2=\"120\" y1=\"100\" y2=\"100\" stroke=\"black\" stroke-width=\"20\" stroke-linecap=\"round\"/>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"160\" height=\"280\" xmlns=\"http://www.w3.org/2000/svg\">\n <polyline points=\"40 60 80 20 120 60\" stroke=\"black\" stroke-width=\"20\"\n stroke-linecap=\"butt\" fill=\"none\" stroke-linejoin=\"miter\"/>\n\n <polyline points=\"40 140 80 100 120 140\" stroke=\"black\" stroke-width=\"20\"\n stroke-linecap=\"round\" fill=\"none\" stroke-linejoin=\"round\"/>\n\n <polyline points=\"40 220 80 180 120 220\" stroke=\"black\" stroke-width=\"20\"\n stroke-linecap=\"square\" fill=\"none\" stroke-linejoin=\"bevel\"/>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"200\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M 10 75 Q 50 10 100 75 T 190 75\" stroke=\"black\"\n stroke-linecap=\"round\" stroke-dasharray=\"5,10,5\" fill=\"none\"/>\n <path d=\"M 10 75 L 190 75\" stroke=\"red\"\n stroke-linecap=\"round\" stroke-width=\"1\" stroke-dasharray=\"5,5\" fill=\"none\"/>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"400\" height=\"180\" xmlns=\"http://www.w3.org/2000/svg\">\n <polyline\n points=\"40 80 80 40 120 80\"\n stroke-width=\"15\"\n stroke=\"black\"\n fill=\"coral\"\n paint-order=\"fill\" />\n\n <polyline\n points=\"40 140 80 100 120 140\"\n stroke-width=\"15\"\n stroke=\"black\"\n fill=\"coral\"\n paint-order=\"stroke\" />\n</svg>\n```\n\nExample:\n```text\n<rect x=\"10\" height=\"180\" y=\"10\" width=\"180\" style=\"stroke: black; fill: red;\"/>\n```\n\nExample:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <style><![CDATA[\n #MyRect {\n stroke: black;\n fill: red;\n paint-order: stroke;\n }\n ]]></style>\n </defs>\n <rect x=\"10\" height=\"180\" y=\"10\" width=\"180\" id=\"MyRect\"/>\n</svg>\n```\n\nExample:\n```text\n#MyRect:hover {\n stroke: black;\n fill: blue;\n}\n```\n\nExample:\n```text\n<?xml-stylesheet type=\"text/css\" href=\"style.css\"?>\n\n<svg width=\"200\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect height=\"10\" width=\"10\" id=\"MyRect\"/>\n</svg>\n```\n\nExample:\n```text\n#MyRect {\n fill: red;\n stroke: black;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.699Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":115,"estimatedTokens":660}}248{"id":"doc-basic_transformations_svg_mdn-9dcb97a8","source":"documentation","title":"Basic transformations - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Basic_transformations","text":"Example:\n```text\n<svg width=\"30\" height=\"10\">\n <g fill=\"red\">\n <rect x=\"0\" y=\"0\" width=\"10\" height=\"10\" />\n <rect x=\"20\" y=\"0\" width=\"10\" height=\"10\" />\n </g>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"40\" height=\"50\">\n <rect x=\"0\" y=\"0\" width=\"10\" height=\"10\" transform=\"translate(30,40)\" />\n</svg>\n```\n\nExample:\n```text\nsvg {\n background-color: #bbffff;\n}\n```\n\nExample:\n```text\n<svg width=\"31\" height=\"31\">\n <rect x=\"12\" y=\"-10\" width=\"20\" height=\"20\" transform=\"rotate(45)\" />\n</svg>\n```\n\nExample:\n```text\n<svg width=\"40\" height=\"50\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"10\"\n height=\"10\"\n transform=\"translate(30,40) rotate(45)\" />\n</svg>\n```\n\nExample:\n```typescript\n<svg width=\"100\" height=\"100\">\n <g transform=\"scale(2)\">\n <rect width=\"50\" height=\"50\" />\n </g>\n</svg>\n```\n\nExample:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\">\n <svg width=\"100\" height=\"100\" viewBox=\"0 0 50 50\">\n <rect width=\"50\" height=\"50\" />\n </svg>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.700Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":62,"estimatedTokens":252}}249{"id":"doc-patterns_svg_mdn-62769880","source":"documentation","title":"Patterns - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Patterns","text":"Example:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"Gradient1\">\n <stop offset=\"5%\" stop-color=\"white\" />\n <stop offset=\"95%\" stop-color=\"blue\" />\n </linearGradient>\n <linearGradient id=\"Gradient2\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"5%\" stop-color=\"red\" />\n <stop offset=\"95%\" stop-color=\"orange\" />\n </linearGradient>\n\n <pattern id=\"Pattern\" x=\"0\" y=\"0\" width=\".25\" height=\".25\">\n <rect x=\"0\" y=\"0\" width=\"50\" height=\"50\" fill=\"skyblue\" />\n <rect x=\"0\" y=\"0\" width=\"25\" height=\"25\" fill=\"url(#Gradient2)\" />\n <circle\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"url(#Gradient1)\"\n fill-opacity=\"0.5\" />\n </pattern>\n </defs>\n\n <rect fill=\"url(#Pattern)\" stroke=\"black\" width=\"200\" height=\"200\" />\n</svg>\n```\n\nExample:\n```text\n<pattern id=\"Pattern\" width=\".25\" height=\".25\" patternContentUnits=\"objectBoundingBox\">\n <rect x=\"0\" y=\"0\" width=\".25\" height=\".25\" fill=\"skyblue\"/>\n <rect x=\"0\" y=\"0\" width=\".125\" height=\".125\" fill=\"url(#Gradient2)\"/>\n <circle cx=\".125\" cy=\".125\" r=\".1\" fill=\"url(#Gradient1)\" fill-opacity=\"0.5\"/>\n </pattern>\n```\n\nExample:\n```text\n<pattern id=\"Pattern\" x=\"10\" y=\"10\" width=\"50\" height=\"50\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"50\" height=\"50\" fill=\"skyblue\"/>\n <rect x=\"0\" y=\"0\" width=\"25\" height=\"25\" fill=\"url(#Gradient2)\"/>\n <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"url(#Gradient1)\" fill-opacity=\"0.5\"/>\n </pattern>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.700Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":48,"estimatedTokens":385}}250{"id":"doc-paths_svg_mdn-53d13cf6","source":"documentation","title":"Paths - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths","text":"Example:\n```text\nM x y\n(or)\nm dx dy\n```\n\nExample:\n```text\n<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 10\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <circle cx=\"10\" cy=\"10\" r=\"3\" fill=\"red\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```javascript\nconst g = document.querySelector(\"#reference\");\nconst svg = document.querySelector(\"svg\");\nconst button = document.querySelector(\"button\");\nlet isHidden = true;\nbutton.addEventListener(\"click\", () => {\n isHidden = !isHidden;\n if (isHidden) {\n svg.querySelector(\"#reference\").remove();\n } else {\n svg.appendChild(g.cloneNode(true));\n }\n});\n```\n\nExample:\n```text\nL x y\n(or)\nl dx dy\n```\n\nExample:\n```text\nH x\n(or)\nh dx\n\nV y\n(or)\nv dy\n```\n\nExample:\n```text\n<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M 10 10 H 90 V 90 H 10 L 10 10\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <circle cx=\"10\" cy=\"10\" r=\"3\" fill=\"red\" />\n <circle cx=\"90\" cy=\"90\" r=\"3\" fill=\"red\" />\n <circle cx=\"90\" cy=\"10\" r=\"3\" fill=\"red\" />\n <circle cx=\"10\" cy=\"90\" r=\"3\" fill=\"red\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\nZ\n(or)\nz\n```\n\nExample:\n```text\n<path d=\"M 10 10 H 90 V 90 H 10 Z\" fill=\"none\" stroke=\"black\" />\n```\n\nExample:\n```text\n<path d=\"M 10 10 h 80 v 80 h -80 Z\" fill=\"none\" stroke=\"black\" />\n```\n\nExample:\n```text\nC x1 y1, x2 y2, x y\n(or)\nc dx1 dy1, dx2 dy2, dx dy\n```\n\nExample:\n```text\n<svg width=\"190\" height=\"160\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M 10 10 C 20 20, 40 20, 50 10\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 70 10 C 70 20, 110 20, 110 10\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 130 10 C 120 20, 180 20, 170 10\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 10 60 C 20 80, 40 80, 50 60\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 70 60 C 70 80, 110 80, 110 60\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 130 60 C 120 80, 180 80, 170 60\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 10 110 C 20 140, 40 140, 50 110\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 70 110 C 70 140, 110 140, 110 110\" stroke=\"black\" fill=\"none\" />\n <path d=\"M 130 110 C 120 140, 180 140, 170 110\" stroke=\"black\" fill=\"none\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\"></g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```javascript\nconst g = document.querySelector(\"#reference\");\nconst svg = document.querySelector(\"svg\");\nconst button = document.querySelector(\"button\");\n\n// prettier-ignore\nconst points = [\n [[10, 10], [20, 20], [40, 20], [50, 10]],\n [[70, 10], [70, 20], [110, 20], [110, 10]],\n [[130, 10], [120, 20], [180, 20], [170, 10]],\n [[10, 60], [20, 80], [40, 80], [50, 60]],\n [[70, 60], [70, 80], [110, 80], [110, 60]],\n [[130, 60], [120, 80], [180, 80], [170, 60]],\n [[10, 110], [20, 140], [40, 140], [50, 110]],\n [[70, 110], [70, 140], [110, 140], [110, 110]],\n [[130, 110], [120, 140], [180, 140], [170, 110]],\n];\n\nfor (const curvePoints of points) {\n for (const p of curvePoints) {\n const circle = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"circle\",\n );\n circle.setAttribute(\"cx\", p[0]);\n circle.setAttribute(\"cy\", p[1]);\n circle.setAttribute(\"r\", 1.5);\n circle.setAttribute(\"fill\", \"red\");\n g.appendChild(circle);\n }\n const line1 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n line1.setAttribute(\"x1\", curvePoints[0][0]);\n line1.setAttribute(\"y1\", curvePoints[0][1]);\n line1.setAttribute(\"x2\", curvePoints[1][0]);\n line1.setAttribute(\"y2\", curvePoints[1][1]);\n line1.setAttribute(\"stroke\", \"red\");\n g.appendChild(line1);\n const line2 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n line2.setAttribute(\"x1\", curvePoints[2][0]);\n line2.setAttribute(\"y1\", curvePoints[2][1]);\n line2.setAttribute(\"x2\", curvePoints[3][0]);\n line2.setAttribute(\"y2\", curvePoints[3][1]);\n line2.setAttribute(\"stroke\", \"red\");\n g.appendChild(line2);\n}\n\nlet isHidden = true;\nbutton.addEventListener(\"click\", () => {\n isHidden = !isHidden;\n if (isHidden) {\n svg.querySelector(\"#reference\").remove();\n } else {\n svg.appendChild(g.cloneNode(true));\n }\n});\n```\n\nExample:\n```text\nS x2 y2, x y\n(or)\ns dx2 dy2, dx dy\n```\n\nExample:\n```text\n<svg width=\"190\" height=\"160\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\"\n stroke=\"black\"\n fill=\"none\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <line x1=\"10\" y1=\"80\" x2=\"40\" y2=\"10\" stroke=\"red\" />\n <line x1=\"65\" y1=\"10\" x2=\"95\" y2=\"80\" stroke=\"red\" />\n <line x1=\"95\" y1=\"80\" x2=\"125\" y2=\"150\" stroke=\"blue\" />\n <line x1=\"150\" y1=\"150\" x2=\"180\" y2=\"80\" stroke=\"red\" />\n <circle cx=\"10\" cy=\"80\" r=\"3\" fill=\"red\" />\n <circle cx=\"40\" cy=\"10\" r=\"3\" fill=\"red\" />\n <circle cx=\"65\" cy=\"10\" r=\"3\" fill=\"red\" />\n <circle cx=\"95\" cy=\"80\" r=\"3\" fill=\"red\" />\n <circle cx=\"125\" cy=\"150\" r=\"3\" fill=\"blue\" />\n <circle cx=\"150\" cy=\"150\" r=\"3\" fill=\"red\" />\n <circle cx=\"180\" cy=\"80\" r=\"3\" fill=\"red\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\nQ x1 y1, x y\n(or)\nq dx1 dy1, dx dy\n```\n\nExample:\n```text\n<svg width=\"190\" height=\"160\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M 10 80 Q 95 10 180 80\" stroke=\"black\" fill=\"none\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <line x1=\"10\" y1=\"80\" x2=\"95\" y2=\"10\" stroke=\"red\" />\n <line x1=\"95\" y1=\"10\" x2=\"180\" y2=\"80\" stroke=\"red\" />\n <circle cx=\"10\" cy=\"80\" r=\"3\" fill=\"red\" />\n <circle cx=\"180\" cy=\"80\" r=\"3\" fill=\"red\" />\n <circle cx=\"95\" cy=\"10\" r=\"3\" fill=\"red\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\nT x y\n(or)\nt dx dy\n```\n\nExample:\n```text\n<svg width=\"190\" height=\"160\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M 10 80 Q 52.5 10, 95 80 T 180 80\" stroke=\"black\" fill=\"none\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <line x1=\"10\" y1=\"80\" x2=\"52.5\" y2=\"10\" stroke=\"red\" />\n <line x1=\"52.5\" y1=\"10\" x2=\"95\" y2=\"80\" stroke=\"red\" />\n <line x1=\"95\" y1=\"80\" x2=\"137.5\" y2=\"150\" stroke=\"blue\" />\n <line x1=\"137.5\" y1=\"150\" x2=\"180\" y2=\"80\" stroke=\"blue\" />\n <circle cx=\"10\" cy=\"80\" r=\"3\" fill=\"red\" />\n <circle cx=\"52.5\" cy=\"10\" r=\"3\" fill=\"red\" />\n <circle cx=\"95\" cy=\"80\" r=\"3\" fill=\"red\" />\n <circle cx=\"137.5\" cy=\"150\" r=\"3\" fill=\"blue\" />\n <circle cx=\"180\" cy=\"80\" r=\"3\" fill=\"blue\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\nA rx ry x-axis-rotation large-arc-flag sweep-flag x y\na rx ry x-axis-rotation large-arc-flag sweep-flag dx dy\n```\n\nExample:\n```text\n<svg width=\"320\" height=\"320\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M 10 315\n L 110 215\n A 30 50 0 0 1 162.55 162.45\n L 172.55 152.45\n A 30 50 -45 0 1 215.1 109.9\n L 315 10\"\n stroke=\"black\"\n fill=\"green\"\n stroke-width=\"2\"\n fill-opacity=\"0.5\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <ellipse\n cx=\"136.225\"\n cy=\"188.275\"\n rx=\"30\"\n ry=\"50\"\n stroke=\"red\"\n fill=\"none\" />\n <ellipse\n cx=\"193.5\"\n cy=\"131.5\"\n rx=\"30\"\n ry=\"50\"\n stroke=\"red\"\n fill=\"none\"\n transform=\"rotate(-45)\"\n transform-origin=\"193.5 131.5\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"320\">\n <path\n d=\"M 10 315\n L 110 215\n A 36 60 0 0 1 150.71 170.29\n L 172.55 152.45\n A 30 50 -45 0 1 215.1 109.9\n L 315 10\"\n stroke=\"black\"\n fill=\"green\"\n stroke-width=\"2\"\n fill-opacity=\"0.5\" />\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <circle cx=\"150.71\" cy=\"170.29\" r=\"3\" fill=\"red\" />\n <circle cx=\"110\" cy=\"215\" r=\"3\" fill=\"red\" />\n <ellipse\n cx=\"144.931\"\n cy=\"229.512\"\n rx=\"36\"\n ry=\"60\"\n fill=\"none\"\n stroke=\"red\" />\n <ellipse\n cx=\"115.779\"\n cy=\"155.778\"\n rx=\"36\"\n ry=\"60\"\n fill=\"none\"\n stroke=\"red\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\n<svg width=\"360\" height=\"360\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M 100 100\n A 45 45, 0, 0, 0, 145 145\n L 145 100 Z\"\n fill=\"#00FF00A0\"\n stroke=\"black\"\n stroke-width=\"2\" />\n <path\n d=\"M 250 100\n A 45 45, 0, 1, 0, 295 145\n L 295 100 Z\"\n fill=\"#FF0000A0\"\n stroke=\"black\"\n stroke-width=\"2\" />\n <path\n d=\"M 100 250\n A 45 45, 0, 0, 1, 145 295\n L 145 250 Z\"\n fill=\"#FF00FFA0\"\n stroke=\"black\"\n stroke-width=\"2\" />\n <path\n d=\"M 250 250\n A 45 45, 0, 1, 1, 295 295\n L 295 250 Z\"\n fill=\"#0000FFA0\"\n stroke=\"black\"\n stroke-width=\"2\" />\n <path\n d=\"M 45 45 L 345 45 L 345 345 L 45 345 Z M 195 45 L 195 345 M 45 195 L 345 195\"\n fill=\"none\"\n stroke=\"black\" />\n <text x=\"140\" y=\"20\" font-size=\"20\" fill=\"black\">Large arc flag</text>\n <text\n x=\"-15\"\n y=\"195\"\n font-size=\"20\"\n fill=\"black\"\n transform=\"rotate(-90)\"\n transform-origin=\"20 195\">\n Sweep flag\n </text>\n <text x=\"120\" y=\"40\" font-size=\"20\" fill=\"black\">0</text>\n <text x=\"270\" y=\"40\" font-size=\"20\" fill=\"black\">1</text>\n <text x=\"30\" y=\"120\" font-size=\"20\" fill=\"black\">0</text>\n <text x=\"30\" y=\"270\" font-size=\"20\" fill=\"black\">1</text>\n</svg>\n```\n\nExample:\n```text\n<svg style=\"display:none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"reference\">\n <circle cx=\"145\" cy=\"100\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"100\" cy=\"145\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"295\" cy=\"100\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"250\" cy=\"145\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"145\" cy=\"250\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"100\" cy=\"295\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"295\" cy=\"250\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n <circle cx=\"250\" cy=\"295\" r=\"45\" stroke=\"#888888E0\" fill=\"none\" />\n </g>\n</svg>\n<button>Show/hide reference points and lines</button>\n```\n\nExample:\n```text\n<script src=\"https://cdn.jsdelivr.net/gh/lingtalfi/simpledrag@2.2.0/simpledrag.js\"></script>\n<div class=\"ui\">\n <div class=\"controls\">\n Radius X: <input id=\"rx\" type=\"range\" min=\"0\" max=\"500\" /><br />\n Radius Y: <input id=\"ry\" type=\"range\" min=\"0\" max=\"500\" /><br />\n Rotation:\n <input id=\"rot\" type=\"range\" min=\"0\" max=\"360\" value=\"0\" /><br />\n Large arc flag: <input id=\"laf\" type=\"checkbox\" /><br />\n Sweep flag: <input id=\"sf\" type=\"checkbox\" /><br />\n Arc command: <span id=\"arc-value\"></span><br />\n </div>\n <div class=\"results\">\n mouse: pageX <span id=\"page-x\"></span>, pageY <span id=\"page-y\"></span\n ><br />\n A: <span id=\"ax-value\"></span>, <span id=\"ay-value\"></span><br />\n B: <span id=\"bx-value\"></span>, <span id=\"by-value\"></span><br />\n m: <span id=\"m-value\"></span><br />\n b(A): <span id=\"ba-value\"></span><br />\n b(B): <span id=\"bb-value\"></span><br />\n contextWidth: <span id=\"cw-value\"></span><br />\n </div>\n</div>\n\n<svg width=\"100%\" height=\"100%\" id=\"svg-context\">\n <path id=\"arc2\" d=\"\" fill=\"none\" stroke=\"green\" stroke-width=\"2\"></path>\n <path id=\"arc3\" d=\"\" fill=\"none\" stroke=\"green\" stroke-width=\"2\"></path>\n <path id=\"arc4\" d=\"\" fill=\"none\" stroke=\"green\" stroke-width=\"2\"></path>\n\n <path\n id=\"arc\"\n d=\"M100 100 A 100 100 0 1 0 200 100\"\n fill=\"none\"\n stroke=\"red\"\n stroke-width=\"4\"></path>\n\n <line\n id=\"line0\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"0\"\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"></line>\n <line\n id=\"line\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"0\"\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"></line>\n <line\n id=\"line2\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"0\"\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"></line>\n\n <circle\n id=\"circle1\"\n cx=\"100\"\n cy=\"100\"\n r=\"5\"\n fill=\"red\"\n stroke=\"red\"\n stroke-width=\"2\"></circle>\n\n <circle\n id=\"circle2\"\n cx=\"200\"\n cy=\"100\"\n r=\"5\"\n fill=\"red\"\n stroke=\"red\"\n stroke-width=\"2\"></circle>\n</svg>\n```\n\nExample:\n```text\nbody {\n position: fixed;\n width: 100%;\n height: 100%;\n background: #eeeeee;\n}\n\n.ui {\n display: flex;\n}\n\n.ui > div {\n margin: 0 10px;\n}\n\n.ui .controls input {\n vertical-align: middle;\n}\n\n#circle1,\n#circle2 {\n cursor: pointer;\n}\n\nsvg {\n background: #dddddd;\n}\n```\n\nExample:\n```javascript\nconst svgContext = document.getElementById(\"svg-context\");\nlet rect = svgContext.getBoundingClientRect(); // helper to enclose mouse coordinates into svg box\n\nconst pageXEl = document.getElementById(\"page-x\");\nconst pageYEl = document.getElementById(\"page-y\");\nconst mEl = document.getElementById(\"m-value\");\nconst rxEl = document.getElementById(\"rx\");\nconst ryEl = document.getElementById(\"ry\");\nconst rotEl = document.getElementById(\"rot\");\nconst lafEl = document.getElementById(\"laf\");\nconst sfEl = document.getElementById(\"sf\");\nconst axEl = document.getElementById(\"ax-value\");\nconst ayEl = document.getElementById(\"ay-value\");\nconst bxEl = document.getElementById(\"bx-value\");\nconst byEl = document.getElementById(\"by-value\");\nconst baEl = document.getElementById(\"ba-value\");\nconst bbEl = document.getElementById(\"bb-value\");\nconst circle1 = document.getElementById(\"circle1\");\nconst circle2 = document.getElementById(\"circle2\");\nconst line = document.getElementById(\"line\");\nconst line0 = document.getElementById(\"line0\");\nconst line2 = document.getElementById(\"line2\");\nconst cwEl = document.getElementById(\"cw-value\");\nconst arcCmdEl = document.getElementById(\"arc-value\");\nconst arcEl = document.getElementById(\"arc\");\nconst arc2El = document.getElementById(\"arc2\");\nconst arc3El = document.getElementById(\"arc3\");\nconst arc4El = document.getElementById(\"arc4\");\n\nfunction updatePaths(pageX, pageY) {\n pageXEl.textContent = pageX;\n pageYEl.textContent = pageY;\n\n // line between two points\n line.setAttribute(\"x1\", circle1.getAttribute(\"cx\"));\n line.setAttribute(\"y1\", circle1.getAttribute(\"cy\"));\n line.setAttribute(\"x2\", circle2.getAttribute(\"cx\"));\n line.setAttribute(\"y2\", circle2.getAttribute(\"cy\"));\n\n axEl.textContent = circle1.getAttribute(\"cx\");\n ayEl.textContent = circle1.getAttribute(\"cy\");\n bxEl.textContent = circle2.getAttribute(\"cx\");\n byEl.textContent = circle2.getAttribute(\"cy\");\n\n // y = mx + b\n let m, b, run; // m = rise/run = (y2-y1) / (x2-x1)\n if (circle1.getAttribute(\"cx\") <= circle2.getAttribute(\"cx\")) {\n run = circle2.getAttribute(\"cx\") - circle1.getAttribute(\"cx\");\n if (run !== 0) {\n m = (circle2.getAttribute(\"cy\") - circle1.getAttribute(\"cy\")) / run;\n }\n } else {\n run = circle1.getAttribute(\"cx\") - circle2.getAttribute(\"cx\");\n if (run !== 0) {\n m = (circle1.getAttribute(\"cy\") - circle2.getAttribute(\"cy\")) / run;\n }\n }\n\n if (run !== 0) {\n // b = y - mx\n b = circle1.getAttribute(\"cy\") - m * circle1.getAttribute(\"cx\");\n b2 = circle2.getAttribute(\"cy\") - m * circle2.getAttribute(\"cx\");\n baEl.textContent = b;\n bbEl.textContent = b2;\n mEl.textContent = m;\n\n // draw segment from the left vertical axis (x=0) to the left most point (A or B).\n // x=0 ----> y = b\n let leftMost, rightMost;\n if (circle1.getAttribute(\"cx\") <= circle2.getAttribute(\"cx\")) {\n leftMost = circle1;\n rightMost = circle2;\n } else {\n leftMost = circle2;\n rightMost = circle1;\n }\n\n line0.setAttribute(\"x1\", 0);\n line0.setAttribute(\"y1\", b);\n line0.setAttribute(\"x2\", leftMost.getAttribute(\"cx\"));\n line0.setAttribute(\"y2\", leftMost.getAttribute(\"cy\"));\n\n // draw segment from point B to the right vertical axis (x=rect.width)\n // representing the end of the svg box.\n // y = mx + b\n const y = m * rect.width + b;\n line2.setAttribute(\"x1\", rightMost.getAttribute(\"cx\"));\n line2.setAttribute(\"y1\", rightMost.getAttribute(\"cy\"));\n line2.setAttribute(\"x2\", rect.width);\n line2.setAttribute(\"y2\", y);\n\n // now update the arc\n const arcCmd = getArcCommand(\n leftMost,\n rightMost,\n lafEl.checked,\n sfEl.checked,\n );\n arcCmdEl.textContent = arcCmd;\n arcEl.setAttribute(\"d\", arcCmd);\n\n // now update the other helper arcs\n const combo = [\n [true, true],\n [true, false],\n [false, true],\n [false, false],\n ].filter(\n (item) => !(item[0] === lafEl.checked && item[1] === sfEl.checked),\n );\n arc2El.setAttribute(\n \"d\",\n getArcCommand(leftMost, rightMost, combo[0][0], combo[0][1]),\n );\n arc3El.setAttribute(\n \"d\",\n getArcCommand(leftMost, rightMost, combo[1][0], combo[1][1]),\n );\n arc4El.setAttribute(\n \"d\",\n getArcCommand(leftMost, rightMost, combo[2][0], combo[2][1]),\n );\n }\n}\n\nfunction getArcCommand(leftMost, rightMost, lafChecked, sfChecked) {\n return `M${leftMost.getAttribute(\"cx\")} ${leftMost.getAttribute(\"cy\")} A ${rxEl.value} ${ryEl.value} ${rotEl.value} ${lafChecked ? \"1\" : \"0\"} ${sfChecked ? \"1\" : \"0\"} ${rightMost.getAttribute(\"cx\")} ${rightMost.getAttribute(\"cy\")}`;\n}\n\nfunction updateScreen() {\n rect = svgContext.getBoundingClientRect();\n cwEl.textContent = rect.width;\n}\n\ncircle1.sdrag((el, pageX, startX, pageY, startY) => {\n pageX -= rect.left;\n pageY -= rect.top;\n\n el.setAttribute(\"cx\", pageX);\n el.setAttribute(\"cy\", pageY);\n updatePaths(pageX, pageY);\n});\n\ncircle2.sdrag((el, pageX, startX, pageY, startY) => {\n pageX -= rect.left;\n pageY -= rect.top;\n\n el.setAttribute(\"cx\", pageX);\n el.setAttribute(\"cy\", pageY);\n updatePaths(pageX, pageY);\n});\n\nwindow.addEventListener(\"resize\", updateScreen);\n\n// sliders\n[\"rx\", \"ry\", \"rot\"].forEach((id) => {\n document.getElementById(id).addEventListener(\"input\", (e) => {\n updatePaths();\n });\n});\n\n// checkboxes\n[\"laf\", \"sf\"].forEach((id) => {\n document.getElementById(id).addEventListener(\"change\", (e) => {\n updatePaths();\n });\n});\n\nupdatePaths();\nupdateScreen();\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.703Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":34,"totalLines":730,"estimatedTokens":4666}}251{"id":"doc-clipping_and_masking_svg_mdn-7b802cc9","source":"documentation","title":"Clipping and masking - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Clipping_and_masking","text":"Example:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <clipPath id=\"cut-off-bottom\">\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"100\" />\n </clipPath>\n </defs>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" clip-path=\"url(#cut-off-bottom)\" />\n</svg>\n```\n\nExample:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"Gradient\">\n <stop offset=\"0\" stop-color=\"black\" />\n <stop offset=\"1\" stop-color=\"white\" />\n </linearGradient>\n <mask id=\"Mask\">\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"url(#Gradient)\" />\n </mask>\n </defs>\n\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"green\" />\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"red\" mask=\"url(#Mask)\" />\n</svg>\n```\n\nExample:\n```text\n<rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" opacity=\".5\" />\n```\n\nExample:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"blue\" />\n <circle\n cx=\"100\"\n cy=\"100\"\n r=\"50\"\n stroke=\"yellow\"\n stroke-width=\"40\"\n stroke-opacity=\".5\"\n fill=\"red\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.704Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":52,"estimatedTokens":288}}252{"id":"doc-other_content_in_svg_svg_mdn-a62dc2a7","source":"documentation","title":"Other content in SVG - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Other_content_in_SVG","text":"Example:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\">\n <image\n x=\"90\"\n y=\"-65\"\n width=\"128\"\n height=\"146\"\n transform=\"rotate(45)\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image/mdn_logo_only_color.png\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.704Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":14,"estimatedTokens":78}}253{"id":"doc-texts_svg_mdn-9ad58a0c","source":"documentation","title":"Texts - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Texts","text":"Example:\n```text\n<text x=\"10\" y=\"10\">Hello World!</text>\n```\n\nExample:\n```typescript\n<svg width=\"350\" height=\"60\" xmlns=\"http://www.w3.org/2000/svg\">\n <text>\n This is\n <tspan font-weight=\"bold\" fill=\"red\">bold and red</tspan>\n </text>\n\n <style>\n <![CDATA[\n text {\n dominant-baseline: hanging;\n font: 28px Verdana, Helvetica, Arial, sans-serif;\n }\n ]]>\n </style>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"200\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"my_path\" d=\"M 20,20 C 80,60 100,40 120,20\" fill=\"none\" />\n <text>\n <textPath href=\"#my_path\">A curve.</textPath>\n </text>\n\n <style>\n <![CDATA[\n text {\n dominant-baseline: hanging;\n font: 28px Verdana, Helvetica, Arial, sans-serif;\n }\n ]]>\n </style>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.705Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":44,"estimatedTokens":205}}254{"id":"doc-animatemotion_svg_mdn-63241f46","source":"documentation","title":"<animateMotion> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animateMotion","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n margin: 0;\n padding: 0;\n display: block;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill=\"none\"\n stroke=\"lightgrey\"\n d=\"M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z\" />\n\n <circle r=\"5\" fill=\"red\">\n <animateMotion\n dur=\"10s\"\n repeatCount=\"indefinite\"\n path=\"M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z\" />\n </circle>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.705Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":30,"estimatedTokens":124}}255{"id":"doc-filter_effects_svg_mdn-39b5aa29","source":"documentation","title":"Filter effects - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Filter_effects","text":"Example:\n```text\n<svg width=\"250\" viewBox=\"0 0 200 85\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <!-- Filter declaration -->\n <filter\n id=\"MyFilter\"\n filterUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"120\">\n <!-- offsetBlur -->\n <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"4\" result=\"blur\" />\n <feOffset in=\"blur\" dx=\"4\" dy=\"4\" result=\"offsetBlur\" />\n\n <!-- litPaint -->\n <feSpecularLighting\n in=\"blur\"\n surfaceScale=\"5\"\n specularConstant=\".75\"\n specularExponent=\"20\"\n lighting-color=\"#bbbbbb\"\n result=\"specOut\">\n <fePointLight x=\"-5000\" y=\"-10000\" z=\"20000\" />\n </feSpecularLighting>\n <feComposite\n in=\"specOut\"\n in2=\"SourceAlpha\"\n operator=\"in\"\n result=\"specOut\" />\n <feComposite\n in=\"SourceGraphic\"\n in2=\"specOut\"\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n result=\"litPaint\" />\n\n <!-- merge offsetBlur + litPaint -->\n <feMerge>\n <feMergeNode in=\"offsetBlur\" />\n <feMergeNode in=\"litPaint\" />\n </feMerge>\n </filter>\n </defs>\n\n <!-- Graphic elements -->\n <g filter=\"url(#MyFilter)\">\n <path\n fill=\"none\"\n stroke=\"#D90000\"\n stroke-width=\"10\"\n d=\"M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z\" />\n <path\n fill=\"#D90000\"\n d=\"M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z\" />\n <g fill=\"white\" stroke=\"black\" font-size=\"45\" font-family=\"Verdana\">\n <text x=\"52\" y=\"52\">SVG</text>\n </g>\n </g>\n</svg>\n```\n\nExample:\n```text\n<feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"4\" result=\"blur\" />\n```\n\nExample:\n```text\n<feOffset in=\"blur\" dx=\"4\" dy=\"4\" result=\"offsetBlur\" />\n```\n\nExample:\n```text\n<feSpecularLighting\n in=\"blur\"\n surfaceScale=\"5\"\n specularConstant=\".75\"\n specularExponent=\"20\"\n lighting-color=\"#bbbbbb\"\n result=\"specOut\">\n <fePointLight x=\"-5000\" y=\"-10000\" z=\"20000\" />\n</feSpecularLighting>\n```\n\nExample:\n```text\n<feComposite in=\"specOut\" in2=\"SourceAlpha\" operator=\"in\" result=\"specOut\" />\n```\n\nExample:\n```text\n<feComposite\n in=\"SourceGraphic\"\n in2=\"specOut\"\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\"\n result=\"litPaint\" />\n```\n\nExample:\n```text\n<feMerge>\n <feMergeNode in=\"offsetBlur\" />\n <feMergeNode in=\"litPaint\" />\n</feMerge>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.706Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":116,"estimatedTokens":605}}256{"id":"doc-linking_svg_mdn-fbea5853","source":"documentation","title":"Linking - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/Linking","text":"Example:\n```text\n<html lang=\"en\">\n <body>\n <p>This is a SVG button:</p>\n <object\n width=\"100\"\n height=\"50\"\n type=\"image/svg+xml\"\n data=\"button.svg\"></object>\n </body>\n</html>\n```\n\nExample:\n```text\n<?xml version=\"1.1\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n <a href=\"page2.html\" target=\"_top\">\n <g>\n <!-- button graphical elements here -->\n </g>\n </a>\n</svg>\n```\n\nExample:\n```text\n<?xml version=\"1.1\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\">\n <g onclick=\"top.document.href='page2.html'\" cursor=\"pointer\">\n <!-- button graphical elements here -->\n </g>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.706Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":37,"estimatedTokens":166}}257{"id":"doc-svg_image_element_svg_mdn-6aadcdb2","source":"documentation","title":"SVG image element - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Image_element","text":"Example:\n```text\n<svg width=\"5cm\" height=\"4cm\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <image href=\"firefox.jpg\" x=\"0\" y=\"0\" height=\"50px\" width=\"50px\"/>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.707Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":46}}258{"id":"doc-a_svg_mdn-28854077","source":"documentation","title":"<a> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/a","text":"Example:\n```text\n@namespace svg url(\"http://www.w3.org/2000/svg\");\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- A link around a shape -->\n <a href=\"/docs/Web/SVG/Reference/Element/circle\">\n <circle cx=\"50\" cy=\"40\" r=\"35\" />\n </a>\n\n <!-- A link around a text -->\n <a href=\"/docs/Web/SVG/Reference/Element/text\">\n <text x=\"50\" y=\"90\" text-anchor=\"middle\"><circle></text>\n </a>\n</svg>\n```\n\nExample:\n```text\n/* As SVG does not provide a default visual style for links,\n it's considered best practice to add some */\n\n@namespace svg url(\"http://www.w3.org/2000/svg\");\n/* Necessary to select only SVG <a> elements, and not also HTML's.\n See warning below */\n\nsvg|a:link,\nsvg|a:visited {\n cursor: pointer;\n}\n\nsvg|a text,\ntext svg|a {\n fill: blue; /* Even for text, SVG uses fill over color */\n text-decoration: underline;\n}\n\nsvg|a:hover,\nsvg|a:active {\n outline: dotted 1px blue;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.707Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":52,"estimatedTokens":250}}259{"id":"doc-svg_and_css_svg_mdn-1d5e2d61","source":"documentation","title":"SVG and CSS - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/SVG_and_CSS","text":"Example:\n```text\n<svg\n width=\"600px\"\n height=\"600px\"\n viewBox=\"-300 -300 600 600\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <link\n xmlns=\"http://www.w3.org/1999/xhtml\"\n rel=\"stylesheet\"\n href=\"style8.css\"\n type=\"text/css\" />\n\n <title>SVG demonstration</title>\n <desc>Mozilla CSS Getting Started - SVG demonstration</desc>\n\n <defs>\n <radialGradient\n id=\"fade\"\n cx=\"0\"\n cy=\"0\"\n r=\"200\"\n gradientUnits=\"userSpaceOnUse\">\n <stop id=\"fade-stop-1\" offset=\"33%\" />\n <stop id=\"fade-stop-2\" offset=\"95%\" />\n </radialGradient>\n </defs>\n\n <text id=\"heading\" x=\"-280\" y=\"-270\">SVG demonstration</text>\n <text id=\"caption\" x=\"-280\" y=\"-250\">\n Move your mouse pointer over the flower.\n </text>\n\n <g id=\"flower\">\n <circle\n id=\"overlay\"\n cx=\"0\"\n cy=\"0\"\n r=\"200\"\n stroke=\"none\"\n fill=\"url(#fade)\" />\n\n <g id=\"outer-petals\">\n <g class=\"quadrant\">\n <g class=\"segment\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(18)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(36)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(54)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(72)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n\n <g class=\"quadrant\">\n <g class=\"segment\" transform=\"rotate(90)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(108)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(126)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(144)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(162)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n\n <g class=\"quadrant\">\n <g class=\"segment\" transform=\"rotate(180)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(198)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(216)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(234)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(252)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n\n <g class=\"quadrant\">\n <g class=\"segment\" transform=\"rotate(270)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(288)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(306)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(324)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(342)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n </g>\n\n <g id=\"inner-petals\" transform=\"rotate(9) scale(0.33)\">\n <g class=\"quadrant\">\n <g class=\"segment\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(18)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(36)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(54)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(72)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n\n <g class=\"quadrant\">\n <g class=\"segment\" transform=\"rotate(90)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(108)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(126)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(144)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(162)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n\n <g class=\"quadrant\">\n <g class=\"segment\" transform=\"rotate(180)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(198)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(216)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(234)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(252)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n\n <g class=\"quadrant\">\n <g class=\"segment\" transform=\"rotate(270)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(288)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(306)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(324)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g class=\"segment\" transform=\"rotate(342)\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n </g>\n </g>\n </g>\n</svg>\n```\n\nExample:\n```text\n/*** SVG demonstration ***/\n\n/* page */\nsvg {\n background-color: beige;\n}\n\n#heading {\n font-size: 24px;\n font-weight: bold;\n}\n\n#caption {\n font-size: 12px;\n}\n\n/* flower */\n#flower:hover {\n cursor: crosshair;\n}\n\n/* gradient */\n#fade-stop-1 {\n stop-color: blue;\n}\n\n#fade-stop-2 {\n stop-color: white;\n}\n\n/* petals */\n.segment-fill {\n fill: var(--segment-fill-fill);\n stroke: var(--segment-fill-stroke);\n stroke-width: var(--segment-fill-stroke-width);\n}\n\n.segment-fill:hover {\n fill: var(--segment-fill-fill-hover);\n stroke: var(--segment-fill-stroke-hover);\n}\n\n.segment-edge {\n fill: var(--segment-edge-fill);\n stroke: var(--segment-edge-stroke);\n stroke-width: var(--segment-edge-stroke-width);\n}\n\n.segment-edge:hover {\n stroke: var(--segment-edge-stroke-hover);\n}\n\n/* outer petals */\n#outer-petals {\n opacity: 0.75;\n --segment-fill-fill: azure;\n --segment-fill-stroke: lightsteelblue;\n --segment-fill-stroke-width: 1;\n --segment-edge-fill: none;\n --segment-edge-stroke: deepskyblue;\n --segment-edge-stroke-width: 3;\n --segment-fill-fill-hover: plum;\n --segment-fill-stroke-hover: none;\n --segment-edge-stroke-hover: slateblue;\n}\n\n/*\n Non-standard way of styling elements referenced via <use> elements,\n supported by some older browsers\n*/\n#outer-petals .segment-fill {\n fill: azure;\n stroke: lightsteelblue;\n stroke-width: 1;\n}\n\n#outer-petals .segment-edge {\n fill: none;\n stroke: deepskyblue;\n stroke-width: 3;\n}\n\n#outer-petals .segment:hover > .segment-fill {\n fill: plum;\n stroke: none;\n}\n\n#outer-petals .segment:hover > .segment-edge {\n stroke: slateblue;\n}\n\n/* inner petals */\n#inner-petals {\n --segment-fill-fill: yellow;\n --segment-fill-stroke: yellow;\n --segment-fill-stroke-width: 1;\n --segment-edge-fill: none;\n --segment-edge-stroke: yellowgreen;\n --segment-edge-stroke-width: 9;\n --segment-fill-fill-hover: darkseagreen;\n --segment-fill-stroke-hover: none;\n --segment-edge-stroke-hover: green;\n}\n\n/*\n Non-standard way of styling elements referenced via <use> elements,\n supported by some older browsers\n*/\n#inner-petals .segment-fill {\n fill: yellow;\n stroke: yellow;\n stroke-width: 1;\n}\n\n#inner-petals .segment-edge {\n fill: none;\n stroke: yellowgreen;\n stroke-width: 9;\n}\n\n#inner-petals .segment:hover > .segment-fill {\n fill: darkseagreen;\n stroke: none;\n}\n\n#inner-petals .segment:hover > .segment-edge {\n stroke: green;\n}\n```\n\nExample:\n```text\n<link rel=\"stylesheet\" href=\"style8.css\" type=\"text/css\" />\n```\n\nExample:\n```text\n<style>\n @import \"style8.css\";\n</style>\n```\n\nExample:\n```text\n#inner-petals {\n --segment-fill-fill-hover: pink;\n}\n\n/* Non-standard way for some older browsers */\n#inner-petals:hover .segment-fill {\n fill: pink;\n stroke: none;\n}\n```\n\nExample:\n```text\n<svg\n width=\"600px\"\n height=\"600px\"\n viewBox=\"-300 -300 600 600\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <link\n xmlns=\"http://www.w3.org/1999/xhtml\"\n rel=\"stylesheet\"\n href=\"style8.css\"\n type=\"text/css\" />\n <title>SVG demonstration</title>\n <desc>Mozilla CSS Getting Started - SVG demonstration</desc>\n\n <defs>\n <g id=\"segment\" class=\"segment\">\n <path class=\"segment-fill\" d=\"M0,0 v-200 a40,40 0 0,0 -62,10 z\" />\n <path class=\"segment-edge\" d=\"M0,-200 a40,40 0 0,0 -62,10\" />\n </g>\n <g id=\"quadrant\">\n <use href=\"#segment\" />\n <use href=\"#segment\" transform=\"rotate(18)\" />\n <use href=\"#segment\" transform=\"rotate(36)\" />\n <use href=\"#segment\" transform=\"rotate(54)\" />\n <use href=\"#segment\" transform=\"rotate(72)\" />\n </g>\n <g id=\"petals\">\n <use href=\"#quadrant\" />\n <use href=\"#quadrant\" transform=\"rotate(90)\" />\n <use href=\"#quadrant\" transform=\"rotate(180)\" />\n <use href=\"#quadrant\" transform=\"rotate(270)\" />\n </g>\n <radialGradient\n id=\"fade\"\n cx=\"0\"\n cy=\"0\"\n r=\"200\"\n gradientUnits=\"userSpaceOnUse\">\n <stop id=\"fade-stop-1\" offset=\"33%\" />\n <stop id=\"fade-stop-2\" offset=\"95%\" />\n </radialGradient>\n </defs>\n\n <text id=\"heading\" x=\"-280\" y=\"-270\">SVG demonstration</text>\n <text id=\"caption\" x=\"-280\" y=\"-250\">\n Move your mouse pointer over the flower.\n </text>\n\n <g id=\"flower\">\n <circle\n id=\"overlay\"\n cx=\"0\"\n cy=\"0\"\n r=\"200\"\n stroke=\"none\"\n fill=\"url(#fade)\" />\n <use id=\"outer-petals\" href=\"#petals\" />\n <use id=\"inner-petals\" href=\"#petals\" transform=\"rotate(9) scale(0.33)\" />\n </g>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.708Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":454,"estimatedTokens":3571}}260{"id":"doc-using_fonts_in_svg_svg_mdn-3cb8bba3","source":"documentation","title":"Using fonts in SVG - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Using_fonts","text":"Example:\n```text\n<svg>\n <style>\n text {\n /* Specify the system or custom font to use */\n font-family: \"Courier New\", monospace;\n\n /* Add other styling */\n font-size: 24px;\n font-weight: bold;\n font-style: italic;\n }\n </style>\n <text x=\"10\" y=\"20\">Some text</text>\n</svg>\n```\n\nExample:\n```typescript\n<svg\n viewBox=\"0 0 400 50\"\n width=\"350\"\n height=\"50\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n /* Define the font family using web fonts */\n @font-face {\n font-family: \"FiraSans\";\n src:\n url(\"https://mdn.github.io/shared-assets/fonts/FiraSans-Italic.woff2\")\n format(\"woff2\"),\n url(\"https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2\")\n format(\"woff2\");\n }\n\n /* Style the text */\n text {\n /* Specify the system or custom font to use */\n font-family: \"FiraSans\", sans-serif;\n\n /* Add other styling */\n font-size: 24px;\n font-weight: bold;\n font-style: italic;\n }\n </style>\n <text x=\"10\" y=\"20\">Text styled with custom font</text>\n</svg>\n```\n\nExample:\n```text\n<svg>\n <text font-family=\"My Font\" x=\"10\" y=\"20\">Text using \"My Font\" font</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.708Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":59,"estimatedTokens":304}}261{"id":"doc-animatetransform_svg_mdn-fc48240c","source":"documentation","title":"<animateTransform> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animateTransform","text":"Example:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <polygon points=\"60,30 90,90 30,90\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n from=\"0 60 70\"\n to=\"360 60 70\"\n dur=\"10s\"\n repeatCount=\"indefinite\" />\n </polygon>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.709Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":21,"estimatedTokens":96}}262{"id":"doc-animate_svg_mdn-9b944049","source":"documentation","title":"<animate> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animate","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"10\">\n <animate\n attributeName=\"rx\"\n values=\"0;5;0\"\n dur=\"10s\"\n repeatCount=\"indefinite\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.709Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":85}}263{"id":"doc-clippath_svg_mdn-0774a9e9","source":"documentation","title":"<clipPath> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\">\n <clipPath id=\"myClip\">\n <!--\n Everything outside the circle will be\n clipped and therefore invisible.\n -->\n <circle cx=\"40\" cy=\"35\" r=\"35\" />\n </clipPath>\n\n <!-- The original black heart, for reference -->\n <path\n id=\"heart\"\n d=\"M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z\" />\n\n <!--\n Only the portion of the red heart\n inside the clip circle is visible.\n -->\n <use clip-path=\"url(#myClip)\" href=\"#heart\" fill=\"red\" />\n</svg>\n```\n\nExample:\n```text\n/* With a touch of CSS for browsers who *\n * implemented the r Geometry Property. */\n\n@keyframes openYourHeart {\n from {\n r: 0;\n }\n to {\n r: 60px;\n }\n}\n\n#myClip circle {\n animation: openYourHeart 15s infinite;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.710Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":53,"estimatedTokens":215}}264{"id":"doc-defs_svg_mdn-4c849e04","source":"documentation","title":"<defs> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/defs","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Some graphical objects to use -->\n <defs>\n <circle id=\"myCircle\" cx=\"0\" cy=\"0\" r=\"5\" />\n\n <linearGradient id=\"myGradient\" gradientTransform=\"rotate(90)\">\n <stop offset=\"20%\" stop-color=\"gold\" />\n <stop offset=\"90%\" stop-color=\"red\" />\n </linearGradient>\n </defs>\n\n <!-- using my graphical objects -->\n <use x=\"5\" y=\"5\" href=\"#myCircle\" fill=\"url('#myGradient')\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.710Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":28,"estimatedTokens":139}}265{"id":"doc-ellipse_svg_mdn-b407865e","source":"documentation","title":"<ellipse> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/ellipse","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <ellipse cx=\"100\" cy=\"50\" rx=\"100\" ry=\"50\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.710Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":17,"estimatedTokens":53}}266{"id":"doc-desc_svg_mdn-616f302a","source":"documentation","title":"<desc> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/desc","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 10 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"5\" cy=\"5\" r=\"4\">\n <desc>\n I'm a circle and that description is here to demonstrate how I can be\n described, but is it really necessary to describe a simple circle like me?\n </desc>\n </circle>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.711Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":22,"estimatedTokens":96}}267{"id":"doc-fecomposite_svg_mdn-465a58bf","source":"documentation","title":"<feComposite> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite","text":"Example:\n```text\nresult = k1*i1*i2 + k2*i1 + k3*i2 + k4\n```\n\nExample:\n```text\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"imageOver\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite in2=\"SourceGraphic\" operator=\"over\" />\n </filter>\n <filter id=\"imageIn\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite in2=\"SourceGraphic\" operator=\"in\" />\n </filter>\n <filter id=\"imageOut\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite in2=\"SourceGraphic\" operator=\"out\" />\n </filter>\n <filter id=\"imageAtop\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite in2=\"SourceGraphic\" operator=\"atop\" />\n </filter>\n <filter id=\"imageXor\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite in2=\"SourceGraphic\" operator=\"xor\" />\n </filter>\n <filter id=\"imageArithmetic\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"0.1\"\n k2=\"0.2\"\n k3=\"0.3\"\n k4=\"0.4\" />\n </filter>\n <filter id=\"imageLighter\">\n <feImage href=\"mdn_logo_only_color.png\" x=\"10px\" y=\"10px\" width=\"160px\" />\n <feComposite in2=\"SourceGraphic\" operator=\"lighter\" />\n </filter>\n </defs>\n <g transform=\"translate(0,25)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageOver)\" />\n <text x=\"80\" y=\"-5\">over</text>\n </g>\n <g transform=\"translate(200,25)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageIn)\" />\n <text x=\"80\" y=\"-5\">in</text>\n </g>\n <g transform=\"translate(400,25)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageOut)\" />\n <text x=\"80\" y=\"-5\">out</text>\n </g>\n <g transform=\"translate(600,25)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageAtop)\" />\n <text x=\"80\" y=\"-5\">atop</text>\n </g>\n <g transform=\"translate(0,240)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageXor)\" />\n <text x=\"80\" y=\"-5\">xor</text>\n </g>\n <g transform=\"translate(200,240)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageArithmetic)\" />\n <text x=\"70\" y=\"-5\">arithmetic</text>\n </g>\n <g transform=\"translate(400,240)\">\n <circle\n cx=\"90px\"\n cy=\"80px\"\n r=\"70px\"\n fill=\"#cc0000\"\n filter=\"url(#imageLighter)\" />\n <text x=\"80\" y=\"-5\">lighter</text>\n </g>\n</svg>\n```\n\nExample:\n```text\nsvg {\n width: 800px;\n height: 400px;\n display: inline;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.711Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":122,"estimatedTokens":753}}268{"id":"doc-fecolormatrix_svg_mdn-ad07e064","source":"documentation","title":"<feColorMatrix> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix","text":"Example:\n```text\n| R' | | r1 r2 r3 r4 r5 | | R |\n| G' | | g1 g2 g3 g4 g5 | | G |\n| B' | = | b1 b2 b3 b4 b5 | * | B |\n| A' | | a1 a2 a3 a4 a5 | | A |\n| 1 | | 0 0 0 0 1 | | 1 |\n```\n\nExample:\n```text\nR' = r1*R + r2*G + r3*B + r4*A + r5\nG' = g1*R + g2*G + g3*B + g4*A + g5\nB' = b1*R + b2*G + b3*B + b4*A + b5\nA' = a1*R + a2*G + a3*B + a4*A + a5\n```\n\nExample:\n```text\nR' = r1 * R + r2 * G + r3 * B + r4 * A + r5\nNew red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]\n```\n\nExample:\n```text\nR G B A W\nR' | 1 0 0 0 0 |\nG' | 0 1 0 0 0 |\nB' | 0 0 1 0 0 |\nA' | 0 0 0 1 0 |\n```\n\nExample:\n```text\n<svg\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 150 500\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- ref -->\n <defs>\n <g id=\"circles\">\n <circle cx=\"30\" cy=\"30\" r=\"20\" fill=\"blue\" fill-opacity=\"0.5\" />\n <circle cx=\"20\" cy=\"50\" r=\"20\" fill=\"green\" fill-opacity=\"0.5\" />\n <circle cx=\"40\" cy=\"50\" r=\"20\" fill=\"red\" fill-opacity=\"0.5\" />\n </g>\n </defs>\n <use href=\"#circles\" />\n <text x=\"70\" y=\"50\">Reference</text>\n\n <!-- identity matrix -->\n <filter id=\"colorMeTheSame\">\n <feColorMatrix\n in=\"SourceGraphic\"\n type=\"matrix\"\n values=\"1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 1 0\" />\n </filter>\n <use\n href=\"#circles\"\n transform=\"translate(0 70)\"\n filter=\"url(#colorMeTheSame)\" />\n <text x=\"70\" y=\"120\">Identity matrix</text>\n\n <!-- Combine RGB into green matrix -->\n <filter id=\"colorMeGreen\">\n <feColorMatrix\n in=\"SourceGraphic\"\n type=\"matrix\"\n values=\"0 0 0 0 0\n 1 1 1 1 0\n 0 0 0 0 0\n 0 0 0 1 0\" />\n </filter>\n <use\n href=\"#circles\"\n transform=\"translate(0 140)\"\n filter=\"url(#colorMeGreen)\" />\n <text x=\"70\" y=\"190\">rgbToGreen</text>\n\n <!-- saturate -->\n <filter id=\"colorMeSaturate\">\n <feColorMatrix in=\"SourceGraphic\" type=\"saturate\" values=\"0.2\" />\n </filter>\n <use\n href=\"#circles\"\n transform=\"translate(0 210)\"\n filter=\"url(#colorMeSaturate)\" />\n <text x=\"70\" y=\"260\">saturate</text>\n\n <!-- hueRotate -->\n <filter id=\"colorMeHueRotate\">\n <feColorMatrix in=\"SourceGraphic\" type=\"hueRotate\" values=\"180\" />\n </filter>\n <use\n href=\"#circles\"\n transform=\"translate(0 280)\"\n filter=\"url(#colorMeHueRotate)\" />\n <text x=\"70\" y=\"330\">hueRotate</text>\n\n <!-- luminanceToAlpha -->\n <filter id=\"colorMeLTA\">\n <feColorMatrix in=\"SourceGraphic\" type=\"luminanceToAlpha\" />\n </filter>\n <use href=\"#circles\" transform=\"translate(0 350)\" filter=\"url(#colorMeLTA)\" />\n <text x=\"70\" y=\"400\">luminanceToAlpha</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.712Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":114,"estimatedTokens":711}}269{"id":"doc-circle_svg_mdn-4fe0e111","source":"documentation","title":"<circle> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/circle","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"50\" cy=\"50\" r=\"50\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.712Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":17,"estimatedTokens":50}}270{"id":"doc-feconvolvematrix_svg_mdn-f8116ac4","source":"documentation","title":"<feConvolveMatrix> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix","text":"Example:\n```text\n0 20 40 235 235\n100 120 140 235 235\n200 220 240 235 235\n225 225 255 255 255\n225 225 255 255 255\n```\n\nExample:\n```text\n1 2 3\n4 5 6\n7 8 9\n```\n\nExample:\n```text\n(9*0 + 8*20 + 7*40 +\n 6*100 + 5*120 + 4*140 +\n 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)\n```\n\nExample:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n viewBox=\"0 0 200 200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"emboss\">\n <feConvolveMatrix\n kernelMatrix=\"3 0 0\n 0 0 0\n 0 0 -3\" />\n </filter>\n </defs>\n\n <image\n href=\"mdn.svg\"\n x=\"0\"\n y=\"0\"\n height=\"200\"\n width=\"200\"\n filter=\"url(#emboss)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.713Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":51,"estimatedTokens":186}}271{"id":"doc-feblend_svg_mdn-9e89fe6a","source":"documentation","title":"<feBlend> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feBlend","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"spotlight\">\n <feFlood\n result=\"floodFill\"\n x=\"0\"\n y=\"0\"\n width=\"100%\"\n height=\"100%\"\n flood-color=\"green\"\n flood-opacity=\"1\" />\n <feBlend in=\"SourceGraphic\" in2=\"floodFill\" mode=\"multiply\" />\n </filter>\n </defs>\n\n <image\n href=\"mdn_logo_only_color.png\"\n x=\"10%\"\n y=\"10%\"\n width=\"80%\"\n height=\"80%\"\n filter=\"url(#spotlight)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.713Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":32,"estimatedTokens":148}}272{"id":"doc-fecomponenttransfer_svg_mdn-c40dc4d5","source":"documentation","title":"<feComponentTransfer> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComponentTransfer","text":"Example:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 300\">\n <defs>\n <linearGradient\n id=\"rainbow\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0\"\n y1=\"0\"\n x2=\"100%\"\n y2=\"0\">\n <stop offset=\"0\" stop-color=\"red\"></stop>\n <stop offset=\"0.2\" stop-color=\"yellow\"></stop>\n <stop offset=\"0.4\" stop-color=\"lime\"></stop>\n <stop offset=\"0.6\" stop-color=\"cyan\"></stop>\n <stop offset=\"0.8\" stop-color=\"blue\"></stop>\n <stop offset=\"1\" stop-color=\"purple\"></stop>\n </linearGradient>\n <filter id=\"identity\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"identity\"></feFuncR>\n <feFuncG type=\"identity\"></feFuncG>\n <feFuncB type=\"identity\"></feFuncB>\n <feFuncA type=\"identity\"></feFuncA>\n </feComponentTransfer>\n </filter>\n <filter id=\"table\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"table\" tableValues=\"0 0 1 1\"></feFuncR>\n <feFuncG type=\"table\" tableValues=\"1 1 0 0\"></feFuncG>\n <feFuncB type=\"table\" tableValues=\"0 1 1 0\"></feFuncB>\n </feComponentTransfer>\n </filter>\n <filter id=\"discrete\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"discrete\" tableValues=\"0 0 1 1\"></feFuncR>\n <feFuncG type=\"discrete\" tableValues=\"1 1 0 0\"></feFuncG>\n <feFuncB type=\"discrete\" tableValues=\"0 1 1 0\"></feFuncB>\n </feComponentTransfer>\n </filter>\n <filter id=\"linear\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"linear\" slope=\"0.5\" intercept=\"0\"></feFuncR>\n <feFuncG type=\"linear\" slope=\"0.5\" intercept=\"0.25\"></feFuncG>\n <feFuncB type=\"linear\" slope=\"0.5\" intercept=\"0.5\"></feFuncB>\n </feComponentTransfer>\n </filter>\n <filter id=\"gamma\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"gamma\" amplitude=\"4\" exponent=\"7\" offset=\"0\"></feFuncR>\n <feFuncG type=\"gamma\" amplitude=\"4\" exponent=\"4\" offset=\"0\"></feFuncG>\n <feFuncB type=\"gamma\" amplitude=\"4\" exponent=\"1\" offset=\"0\"></feFuncB>\n </feComponentTransfer>\n </filter>\n </defs>\n <g font-weight=\"bold\">\n <text x=\"0\" y=\"20\">Default</text>\n <rect x=\"0\" y=\"30\" width=\"100%\" height=\"20\"></rect>\n <text x=\"0\" y=\"70\">Identity</text>\n <rect x=\"0\" y=\"80\" width=\"100%\" height=\"20\" filter=\"url(#identity)\"></rect>\n <text x=\"0\" y=\"120\">Table lookup</text>\n <rect x=\"0\" y=\"130\" width=\"100%\" height=\"20\" filter=\"url(#table)\"></rect>\n <text x=\"0\" y=\"170\">Discrete table lookup</text>\n <rect x=\"0\" y=\"180\" width=\"100%\" height=\"20\" filter=\"url(#discrete)\"></rect>\n <text x=\"0\" y=\"220\">Linear function</text>\n <rect x=\"0\" y=\"230\" width=\"100%\" height=\"20\" filter=\"url(#linear)\"></rect>\n <text x=\"0\" y=\"270\">Gamma function</text>\n <rect x=\"0\" y=\"280\" width=\"100%\" height=\"20\" filter=\"url(#gamma)\"></rect>\n </g>\n</svg>\n```\n\nExample:\n```text\nrect {\n fill: url(\"#rainbow\");\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.714Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":80,"estimatedTokens":769}}273{"id":"doc-fediffuselighting_svg_mdn-a7d02679","source":"documentation","title":"<feDiffuseLighting> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting","text":"Example:\n```text\n<svg width=\"440\" height=\"140\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- No light is applied -->\n <text text-anchor=\"middle\" x=\"60\" y=\"22\">No Light</text>\n <circle cx=\"60\" cy=\"80\" r=\"50\" fill=\"green\" />\n\n <!-- the light source is a fePointLight element -->\n <text text-anchor=\"middle\" x=\"170\" y=\"22\">fePointLight</text>\n <filter id=\"lightMe1\">\n <feDiffuseLighting in=\"SourceGraphic\" result=\"light\" lighting-color=\"white\">\n <fePointLight x=\"150\" y=\"60\" z=\"20\" />\n </feDiffuseLighting>\n\n <feComposite\n in=\"SourceGraphic\"\n in2=\"light\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n\n <circle cx=\"170\" cy=\"80\" r=\"50\" fill=\"green\" filter=\"url(#lightMe1)\" />\n\n <!-- the light source is a feDistantLight element -->\n <text text-anchor=\"middle\" x=\"280\" y=\"22\">feDistantLight</text>\n <filter id=\"lightMe2\">\n <feDiffuseLighting in=\"SourceGraphic\" result=\"light\" lighting-color=\"white\">\n <feDistantLight azimuth=\"240\" elevation=\"20\" />\n </feDiffuseLighting>\n\n <feComposite\n in=\"SourceGraphic\"\n in2=\"light\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n\n <circle cx=\"280\" cy=\"80\" r=\"50\" fill=\"green\" filter=\"url(#lightMe2)\" />\n\n <!-- the light source is a feSpotLight source -->\n <text text-anchor=\"middle\" x=\"390\" y=\"22\">feSpotLight</text>\n <filter id=\"lightMe3\">\n <feDiffuseLighting in=\"SourceGraphic\" result=\"light\" lighting-color=\"white\">\n <feSpotLight\n x=\"360\"\n y=\"5\"\n z=\"30\"\n limitingConeAngle=\"20\"\n pointsAtX=\"390\"\n pointsAtY=\"80\"\n pointsAtZ=\"0\" />\n </feDiffuseLighting>\n\n <feComposite\n in=\"SourceGraphic\"\n in2=\"light\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n\n <circle cx=\"390\" cy=\"80\" r=\"50\" fill=\"green\" filter=\"url(#lightMe3)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.715Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":74,"estimatedTokens":489}}274{"id":"doc-fedisplacementmap_svg_mdn-88d00a68","source":"documentation","title":"<feDisplacementMap> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n viewBox=\"0 0 220 220\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"displacementFilter\">\n <feTurbulence\n type=\"turbulence\"\n baseFrequency=\"0.05\"\n numOctaves=\"2\"\n result=\"turbulence\" />\n <feDisplacementMap\n in2=\"turbulence\"\n in=\"SourceGraphic\"\n scale=\"50\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\" />\n </filter>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" filter=\"url(#displacementFilter)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.716Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":26,"estimatedTokens":131}}275{"id":"doc-fedropshadow_svg_mdn-e5ae8273","source":"documentation","title":"<feDropShadow> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDropShadow","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 30 10\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <filter id=\"shadow\">\n <feDropShadow dx=\"0.2\" dy=\"0.4\" stdDeviation=\"0.2\" />\n </filter>\n <filter id=\"shadow2\">\n <feDropShadow dx=\"0\" dy=\"0\" stdDeviation=\"0.5\" flood-color=\"cyan\" />\n </filter>\n <filter id=\"shadow3\">\n <feDropShadow\n dx=\"-0.8\"\n dy=\"-0.8\"\n stdDeviation=\"0\"\n flood-color=\"pink\"\n flood-opacity=\"0.5\" />\n </filter>\n </defs>\n\n <circle cx=\"5\" cy=\"50%\" r=\"4\" fill=\"pink\" filter=\"url(#shadow)\" />\n <circle cx=\"15\" cy=\"50%\" r=\"4\" fill=\"pink\" filter=\"url(#shadow2)\" />\n <circle cx=\"25\" cy=\"50%\" r=\"4\" fill=\"pink\" filter=\"url(#shadow3)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.716Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":36,"estimatedTokens":196}}276{"id":"doc-feflood_svg_mdn-fba27ce8","source":"documentation","title":"<feFlood> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood","text":"Example:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\">\n <defs>\n <filter id=\"floodFilter\" filterUnits=\"userSpaceOnUse\">\n <feFlood\n x=\"50\"\n y=\"50\"\n width=\"100\"\n height=\"100\"\n flood-color=\"green\"\n flood-opacity=\"0.5\" />\n </filter>\n </defs>\n\n <use filter=\"url(#floodFilter)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.717Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":20,"estimatedTokens":96}}277{"id":"doc-feturbulence_svg_mdn-24a97863","source":"documentation","title":"<feTurbulence> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n viewBox=\"0 0 220 220\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"displacementFilter\">\n <feTurbulence\n type=\"turbulence\"\n baseFrequency=\"0.05\"\n numOctaves=\"2\"\n result=\"turbulence\" />\n <feDisplacementMap\n in2=\"turbulence\"\n in=\"SourceGraphic\"\n scale=\"50\"\n xChannelSelector=\"R\"\n yChannelSelector=\"G\" />\n </filter>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" filter=\"url(#displacementFilter)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.717Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":26,"estimatedTokens":131}}278{"id":"doc-femorphology_svg_mdn-a5c485b7","source":"documentation","title":"<feMorphology> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feMorphology","text":"Example:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"180\">\n <filter id=\"erode\">\n <feMorphology operator=\"erode\" radius=\"1\" />\n </filter>\n <filter id=\"dilate\">\n <feMorphology operator=\"dilate\" radius=\"2\" />\n </filter>\n <text y=\"1em\">Normal text</text>\n <text id=\"thin\" y=\"2em\">Thinned text</text>\n <text id=\"thick\" y=\"3em\">Fattened text</text>\n</svg>\n```\n\nExample:\n```text\ntext {\n font-family: \"Helvetica\", \"Arial\", sans-serif;\n font-size: 3em;\n}\n\n#thin {\n filter: url(\"#erode\");\n}\n\n#thick {\n filter: url(\"#dilate\");\n}\n```\n\nExample:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\">\n <filter id=\"erode\">\n <feMorphology operator=\"erode\" radius=\"1\" />\n </filter>\n <filter id=\"dilate\">\n <feMorphology operator=\"dilate\" radius=\"2\" />\n </filter>\n</svg>\n\n<p>Normal text</p>\n<p id=\"thin\">Thinned text</p>\n<p id=\"thick\">Fattened text</p>\n```\n\nExample:\n```text\np {\n margin: 0;\n font-family: \"Helvetica\", \"Arial\", sans-serif;\n font-size: 3em;\n}\n\n#thin {\n filter: url(\"#erode\");\n}\n\n#thick {\n filter: url(\"#dilate\");\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.718Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":65,"estimatedTokens":275}}279{"id":"doc-femergenode_svg_mdn-1aa546a5","source":"documentation","title":"<feMergeNode> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feMergeNode","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <filter id=\"feOffset\" x=\"-40\" y=\"-20\" width=\"100\" height=\"200\">\n <feOffset in=\"SourceGraphic\" dx=\"60\" dy=\"60\" />\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\" result=\"blur2\" />\n <feMerge>\n <feMergeNode in=\"blur2\" />\n <feMergeNode in=\"SourceGraphic\" />\n </feMerge>\n </filter>\n\n <rect\n x=\"40\"\n y=\"40\"\n width=\"100\"\n height=\"100\"\n stroke=\"black\"\n fill=\"green\"\n filter=\"url(#feOffset)\" />\n <rect x=\"40\" y=\"40\" width=\"100\" height=\"100\" stroke=\"black\" fill=\"green\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.718Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":29,"estimatedTokens":169}}280{"id":"doc-feoffset_svg_mdn-18754fdf","source":"documentation","title":"<feOffset> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feOffset","text":"Example:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <filter id=\"offset\" width=\"180\" height=\"180\" filterUnits=\"userSpaceOnUse\">\n <feOffset in=\"SourceGraphic\" dx=\"60\" dy=\"60\" />\n </filter>\n </defs>\n\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" stroke=\"black\" fill=\"green\" />\n <rect\n x=\"0\"\n y=\"0\"\n width=\"100\"\n height=\"100\"\n stroke=\"black\"\n fill=\"green\"\n filter=\"url(#offset)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.718Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":22,"estimatedTokens":119}}281{"id":"doc-fespecularlighting_svg_mdn-8e88e279","source":"documentation","title":"<feSpecularLighting> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting","text":"Example:\n```text\n<svg\n height=\"200\"\n width=\"200\"\n viewBox=\"0 0 220 220\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"filter\">\n <feSpecularLighting\n result=\"specOut\"\n specularExponent=\"20\"\n lighting-color=\"#bbbbbb\">\n <fePointLight x=\"50\" y=\"75\" z=\"200\" />\n </feSpecularLighting>\n <feComposite\n in=\"SourceGraphic\"\n in2=\"specOut\"\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\" />\n </filter>\n <circle cx=\"110\" cy=\"110\" r=\"100\" filter=\"url(#filter)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.719Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":28,"estimatedTokens":139}}282{"id":"doc-feimage_svg_mdn-b4b180c8","source":"documentation","title":"<feImage> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage","text":"Example:\n```text\n<svg\n viewBox=\"0 0 200 200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n width=\"200\"\n height=\"200\">\n <defs>\n <filter id=\"image\">\n <feImage href=\"mdn_logo_only_color.png\" />\n </filter>\n </defs>\n\n <rect x=\"10%\" y=\"10%\" width=\"80%\" height=\"80%\" filter=\"url(#image)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.719Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":19,"estimatedTokens":91}}283{"id":"doc-fetile_svg_mdn-3003f084","source":"documentation","title":"<feTile> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTile","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>\n Tiling an MDN logo with the Mozilla mascot's head that is on the logo\n </title>\n <defs>\n <!-- Define the region of the filter to be the bounding box of the\n MDN logo being filtered. These parameters will create an output\n that covers the same region as the image. -->\n <filter id=\"tile\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <!-- Create a tile from the central portion of the image from\n (50,50) to (150,150). This area is essentially the Mozilla\n mascot's head. -->\n <feTile in=\"SourceGraphic\" x=\"50\" y=\"50\" width=\"100\" height=\"100\" />\n\n <!-- Without specifying a region, feTile defaults to the region\n of the filter. Without specifying an \"in\" parameter, the default\n is the result of the previous primitive. So this second feTile\n will tile the entire filter region with the mascot's head. -->\n <feTile />\n </filter>\n </defs>\n\n <!-- Use the MDN logo as input to the filter -->\n <image\n href=\"mdn_logo_only_color.png\"\n x=\"10%\"\n y=\"10%\"\n width=\"80%\"\n height=\"80%\"\n filter=\"url(#tile)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.720Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":40,"estimatedTokens":321}}284{"id":"doc-fepointlight_svg_mdn-7b6bcc45","source":"documentation","title":"<fePointLight> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/fePointLight","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"spotlight\">\n <feSpecularLighting\n result=\"spotlight\"\n specularConstant=\"1.5\"\n specularExponent=\"80\"\n lighting-color=\"white\">\n <fePointLight x=\"50\" y=\"50\" z=\"220\" />\n </feSpecularLighting>\n <feComposite\n in=\"SourceGraphic\"\n in2=\"spotlight\"\n operator=\"arithmetic\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\" />\n </filter>\n </defs>\n\n <image\n href=\"mdn_logo_only_color.png\"\n x=\"10%\"\n y=\"10%\"\n width=\"80%\"\n height=\"80%\"\n filter=\"url(#spotlight)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.720Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":38,"estimatedTokens":185}}285{"id":"doc-femerge_svg_mdn-cd9cced4","source":"documentation","title":"<feMerge> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feMerge","text":"Example:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"feOffset\" x=\"-40\" y=\"-20\" width=\"100\" height=\"200\">\n <feOffset in=\"SourceGraphic\" dx=\"60\" dy=\"60\" />\n <feGaussianBlur stdDeviation=\"5\" result=\"blur2\" />\n <feMerge>\n <feMergeNode in=\"blur2\" />\n <feMergeNode in=\"SourceGraphic\" />\n </feMerge>\n </filter>\n\n <rect\n x=\"40\"\n y=\"40\"\n width=\"100\"\n height=\"100\"\n stroke=\"black\"\n fill=\"green\"\n filter=\"url(#feOffset)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.720Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":24,"estimatedTokens":132}}286{"id":"doc-foreignobject_svg_mdn-e172bf7f","source":"documentation","title":"<foreignObject> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/foreignObject","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n div {\n color: white;\n font: 18px serif;\n height: 100%;\n overflow: auto;\n }\n </style>\n\n <polygon points=\"5,5 195,10 185,185 10,195\" />\n\n <!-- Common use case: embed HTML text into SVG -->\n <foreignObject x=\"20\" y=\"20\" width=\"160\" height=\"160\">\n <!--\n In the context of SVG embedded in an HTML document, the XHTML\n namespace could be omitted, but it is mandatory in the\n context of an SVG document\n -->\n <div xmlns=\"http://www.w3.org/1999/xhtml\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis\n mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum\n imperdiet eros. Aliquam erat volutpat.\n </div>\n </foreignObject>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.721Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":40,"estimatedTokens":226}}287{"id":"doc-metadata_svg_mdn-004a86b0","source":"documentation","title":"<metadata> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/metadata","text":"Example:\n```text\n<svg\n width=\"400\"\n viewBox=\"0 0 400 300\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <metadata>\n <rdf:RDF\n xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n xmlns:connect=\"http://www.w3.org/1999/08/29-svg-connections-in-RDF#\">\n <rdf:Description about=\"#CableA\">\n <connect:ends rdf:resource=\"#socket1\" />\n <connect:ends rdf:resource=\"#ComputerA\" />\n </rdf:Description>\n <rdf:Description about=\"#CableB\">\n <connect:ends rdf:resource=\"#socket2\" />\n <connect:ends rdf:resource=\"#ComputerB\" />\n </rdf:Description>\n <rdf:Description about=\"#CableN\">\n <connect:ends rdf:resource=\"#socket5\" />\n <connect:ends>Everything</connect:ends>\n </rdf:Description>\n <rdf:Description about=\"#Hub\">\n <connect:ends rdf:resource=\"#socket1\" />\n <connect:ends rdf:resource=\"#socket2\" />\n <connect:ends rdf:resource=\"#socket3\" />\n <connect:ends rdf:resource=\"#socket4\" />\n <connect:ends rdf:resource=\"#socket5\" />\n </rdf:Description>\n </rdf:RDF>\n </metadata>\n <title>Network</title>\n <desc>An example of a computer network based on a hub.</desc>\n\n <style>\n svg {\n /* Default styles to be inherited */\n fill: white;\n stroke: black;\n }\n text {\n fill: black;\n stroke: none;\n }\n path {\n fill: none;\n }\n </style>\n\n <!-- Define symbols used in the SVG -->\n <defs>\n <!-- hubPlug symbol. Used by hub symbol -->\n <symbol id=\"hubPlug\">\n <desc>A 10BaseT/100baseTX socket</desc>\n <path d=\"M0,10 h5 v-9 h12 v9 h5 v16 h-22 z\" />\n </symbol>\n\n <!-- hub symbol -->\n <symbol id=\"hub\">\n <desc>A typical 10BaseT/100BaseTX network hub</desc>\n <text x=\"0\" y=\"15\">Hub</text>\n <g transform=\"translate(0 20)\">\n <rect width=\"253\" height=\"84\" />\n <rect width=\"229\" height=\"44\" x=\"12\" y=\"10\" />\n <circle fill=\"red\" cx=\"227\" cy=\"71\" r=\"7\" />\n <!-- five groups each using the defined socket -->\n <g id=\"sock1et\" transform=\"translate(25 20)\">\n <title>Socket 1</title>\n <use href=\"#hubPlug\" />\n </g>\n <g id=\"socket2\" transform=\"translate(70 20)\">\n <title>Socket 2</title>\n <use href=\"#hubPlug\" />\n </g>\n <g id=\"socket3\" transform=\"translate(115 20)\">\n <title>Socket 3</title>\n <use href=\"#hubPlug\" />\n </g>\n <g id=\"socket4\" transform=\"translate(160 20)\">\n <title>Socket 4</title>\n <use href=\"#hubPlug\" />\n </g>\n <g id=\"socket5\" transform=\"translate(205 20)\">\n <title>Socket 5</title>\n <use href=\"#hubPlug\" />\n </g>\n </g>\n </symbol>\n\n <!-- computer symbol -->\n <symbol id=\"computer\">\n <desc>A common desktop PC</desc>\n <g id=\"monitorStand\" transform=\"translate(40 121)\">\n <title>Monitor stand</title>\n <desc>\n One of those cool swivelling monitor stands that sit under the monitor\n </desc>\n <path d=\"m0,0 S 10 10 40 12\" />\n <path d=\"m80,0 S 70 10 40 12\" />\n <path d=\"m0,20 L 10 10 S 40 12 70 10 L 80 20z\" />\n </g>\n <g id=\"monitor\">\n <title>Monitor</title>\n <desc>A very fancy monitor</desc>\n <rect width=\"160\" height=\"120\" />\n <rect fill=\"lightgrey\" width=\"138\" height=\"95\" x=\"11\" y=\"12\" />\n </g>\n <g id=\"processor\" transform=\"translate(0 142)\">\n <title>The computer</title>\n <desc>A desktop computer - broad flat box style</desc>\n <rect width=\"160\" height=\"60\" />\n <g id=\"discDrive\" transform=\"translate(70 8)\">\n <title>disc drive</title>\n <desc>A built-in disc drive</desc>\n <rect width=\"58\" height=\"3\" x=\"12\" y=\"8\" />\n <rect width=\"8\" height=\"2\" x=\"12\" y=\"15\" />\n </g>\n <circle cx=\"135\" cy=\"40\" r=\"5\" />\n </g>\n </symbol>\n </defs>\n\n <text x=\"0\" y=\"15\">Network</text>\n\n <!-- Use the hub symbol. -->\n <g id=\"Hub\" transform=\"translate(80 45)\">\n <title>Hub</title>\n <use href=\"#hub\" transform=\"scale(0.75)\" />\n </g>\n\n <!-- Use the computer symbol. -->\n <g id=\"ComputerA\" transform=\"translate(20 170)\">\n <title>Computer A</title>\n <use href=\"#computer\" transform=\"scale(0.5)\" />\n </g>\n\n <!-- Use the same computer symbol. -->\n <g id=\"ComputerB\" transform=\"translate(300 170)\">\n <title>Computer B</title>\n <use href=\"#computer\" transform=\"scale(0.5)\" />\n </g>\n\n <!-- Draw Cable A. -->\n <g id=\"CableA\" transform=\"translate(107 88)\">\n <title>Cable A</title>\n <desc>10BaseT twisted pair cable</desc>\n <path d=\"M0,0c100,140 50,140 -8,160\" />\n </g>\n\n <!-- Draw Cable B. -->\n <g id=\"CableB\" transform=\"translate(142 88)\">\n <title>Cable B</title>\n <desc>10BaseT twisted pair cable</desc>\n <path d=\"M0,0c100,180 110,160 159,160\" />\n </g>\n\n <!-- Draw Cable N. -->\n <g id=\"CableN\" transform=\"translate(242 88)\">\n <title>Cable N</title>\n <desc>10BaseT twisted pair cable</desc>\n <path d=\"M0,0c0,-70 20,-50 60,-50\" />\n </g>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.721Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":167,"estimatedTokens":1283}}288{"id":"doc-lineargradient_svg_mdn-3610440d","source":"documentation","title":"<linearGradient> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/linearGradient","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <linearGradient id=\"myGradient\" gradientTransform=\"rotate(90)\">\n <stop offset=\"5%\" stop-color=\"gold\" />\n <stop offset=\"95%\" stop-color=\"red\" />\n </linearGradient>\n </defs>\n\n <!-- using my linear gradient -->\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"url('#myGradient')\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 500 500\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <linearGradient\n id=\"grad\"\n x1=\"0\"\n y1=\"0\"\n x2=\"20\"\n y2=\"20\"\n spreadMethod=\"repeat\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"50%\" stop-color=\"red\" />\n <stop offset=\"50%\" stop-color=\"gold\" />\n </linearGradient>\n </defs>\n <rect width=\"100%\" height=\"25%\" fill=\"url(#grad)\" />\n <rect width=\"100%\" height=\"65%\" fill=\"url(#grad)\" y=\"30%\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.722Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":52,"estimatedTokens":263}}289{"id":"doc-g_svg_mdn-58b45739","source":"documentation","title":"<g> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/g","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Using g to inherit presentation attributes -->\n <g fill=\"white\" stroke=\"green\" stroke-width=\"5\">\n <circle cx=\"40\" cy=\"40\" r=\"25\" />\n <circle cx=\"60\" cy=\"60\" r=\"25\" />\n </g>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.723Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":21,"estimatedTokens":88}}290{"id":"doc-line_svg_mdn-d404f8c3","source":"documentation","title":"<line> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/line","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"0\" y1=\"80\" x2=\"100\" y2=\"20\" stroke=\"black\" />\n\n <!-- If you do not specify the stroke\n color the line will not be visible -->\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.724Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":20,"estimatedTokens":77}}291{"id":"doc-image_svg_mdn-410bb644","source":"documentation","title":"<image> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image","text":"Example:\n```text\n<svg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <image href=\"mdn_logo_only_color.png\" height=\"200\" width=\"200\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.724Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":8,"estimatedTokens":44}}292{"id":"doc-fespotlight_svg_mdn-25c0ef8f","source":"documentation","title":"<feSpotLight> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpotLight","text":"Example:\n```text\n<svg\n width=\"200\"\n height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"spotlight\">\n <feSpecularLighting\n result=\"spotlight\"\n specularConstant=\"1.5\"\n specularExponent=\"4\"\n lighting-color=\"white\">\n <feSpotLight x=\"600\" y=\"600\" z=\"400\" limitingConeAngle=\"5.5\" />\n </feSpecularLighting>\n <feComposite\n in=\"SourceGraphic\"\n in2=\"spotlight\"\n operator=\"out\"\n k1=\"0\"\n k2=\"1\"\n k3=\"1\"\n k4=\"0\" />\n </filter>\n </defs>\n\n <image\n href=\"mdn_logo_only_color.png\"\n x=\"10%\"\n y=\"10%\"\n width=\"80%\"\n height=\"80%\"\n filter=\"url(#spotlight)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.724Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":38,"estimatedTokens":189}}293{"id":"doc-marker_svg_mdn-364d42f3","source":"documentation","title":"<marker> - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/marker","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 300 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <!-- A marker to be used as an arrowhead -->\n <marker\n id=\"arrow\"\n viewBox=\"0 0 10 10\"\n refX=\"5\"\n refY=\"5\"\n markerWidth=\"6\"\n markerHeight=\"6\"\n orient=\"auto-start-reverse\">\n <path d=\"M 0 0 L 10 5 L 0 10 z\" />\n </marker>\n </defs>\n\n <!-- A line with a marker -->\n <line\n x1=\"10\"\n y1=\"10\"\n x2=\"90\"\n y2=\"90\"\n stroke=\"black\"\n marker-end=\"url(#arrow)\" />\n\n <!-- A curved path with markers -->\n <path\n d=\"M 110 10\n C 120 20, 130 20, 140 10\n C 150 0, 160 0, 170 10\n C 180 20, 190 20, 200 10\"\n stroke=\"black\"\n fill=\"none\"\n marker-start=\"url(#arrow)\"\n marker-mid=\"url(#arrow)\"\n marker-end=\"url(#arrow)\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <!-- Arrowhead marker definition -->\n <marker\n id=\"arrow\"\n viewBox=\"0 0 10 10\"\n refX=\"5\"\n refY=\"5\"\n markerWidth=\"6\"\n markerHeight=\"6\"\n orient=\"auto-start-reverse\">\n <path d=\"M 0 0 L 10 5 L 0 10 z\" />\n </marker>\n\n <!-- Dot marker definition -->\n <marker\n id=\"dot\"\n viewBox=\"0 0 10 10\"\n refX=\"5\"\n refY=\"5\"\n markerWidth=\"5\"\n markerHeight=\"5\">\n <circle cx=\"5\" cy=\"5\" r=\"5\" fill=\"red\" />\n </marker>\n </defs>\n\n <!-- Coordinate axes with an arrowhead in both directions -->\n <polyline\n points=\"10,10 10,90 90,90\"\n fill=\"none\"\n stroke=\"black\"\n marker-start=\"url(#arrow)\"\n marker-end=\"url(#arrow)\" />\n\n <!-- Data line with polymarkers -->\n <polyline\n points=\"15,80 29,50 43,60 57,30 71,40 85,15\"\n fill=\"none\"\n stroke=\"grey\"\n marker-start=\"url(#dot)\"\n marker-mid=\"url(#dot)\"\n marker-end=\"url(#dot)\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n <marker\n id=\"circle\"\n markerWidth=\"6\"\n markerHeight=\"6\"\n refX=\"3\"\n refY=\"3\"\n markerUnits=\"strokeWidth\">\n <circle cx=\"3\" cy=\"3\" r=\"2\" stroke=\"context-stroke\" fill=\"context-fill\" />\n </marker>\n\n <style>\n path {\n marker: url(\"#circle\");\n }\n </style>\n\n <path d=\"M 10,10 30,10 h 10\" stroke=\"black\" />\n <path d=\"M 10,20 30,20 h 10\" stroke=\"blue\" fill=\"red\" />\n <path d=\"M 10,30 30,30 h 10\" stroke=\"red\" fill=\"none\" />\n <path d=\"M 10,40 30,40 h 10\" stroke=\"gray\" fill=\"blue\" stroke-width=\"1.5\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.725Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":123,"estimatedTokens":631}}294{"id":"doc-color_interpolation_svg_mdn-0a1acf39","source":"documentation","title":"color-interpolation - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation","text":"Example:\n```text\nsvg {\n display: block;\n}\n```\n\nExample:\n```text\n<svg width=\"450\" height=\"70\">\n <title>\n Example of linearGradient excluding the color-interpolation attribute\n </title>\n <defs>\n <linearGradient id=\"gradientDefault\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"25%\" stop-color=\"blue\" />\n <stop offset=\"50%\" stop-color=\"white\" />\n <stop offset=\"75%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </linearGradient>\n </defs>\n <rect\n x=\"0\"\n y=\"0\"\n width=\"400\"\n height=\"40\"\n fill=\"url(#gradientDefault)\"\n stroke=\"black\" />\n <text x=\"0\" y=\"60\" font-family=\"courier\" font-size=\"16\">\n color-interpolation not set\n </text>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"450\" height=\"70\">\n <title>\n Example of linearGradient using the color-interpolation attribute\n </title>\n <defs>\n <linearGradient id=\"gradientLinearRGB\" color-interpolation=\"linearRGB\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"25%\" stop-color=\"blue\" />\n <stop offset=\"50%\" stop-color=\"white\" />\n <stop offset=\"75%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </linearGradient>\n </defs>\n <rect\n x=\"0\"\n y=\"0\"\n width=\"400\"\n height=\"40\"\n fill=\"url(#gradientLinearRGB)\"\n stroke=\"black\" />\n <text x=\"0\" y=\"60\" font-family=\"courier\" font-size=\"16\">\n color-interpolation=\"linearRGB\"\n </text>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"450\" height=\"70\">\n <title>\n Example of radialGradient excluding the color-interpolation attribute\n </title>\n <defs>\n <radialGradient id=\"none\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"gold\" />\n </radialGradient>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"400\" height=\"40\" fill=\"url(#none)\" stroke=\"black\" />\n <text x=\"0\" y=\"60\" font-family=\"courier\" font-size=\"16\">\n color-interpolation not set\n </text>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"450\" height=\"70\">\n <title>\n Example of radialGradient using the color-interpolation attribute\n </title>\n <defs>\n <radialGradient id=\"radLinearRGB\" color-interpolation=\"linearRGB\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"gold\" />\n </radialGradient>\n </defs>\n <rect\n x=\"0\"\n y=\"0\"\n width=\"400\"\n height=\"40\"\n fill=\"url(#radLinearRGB)\"\n stroke=\"black\" />\n <text x=\"0\" y=\"60\" font-family=\"courier\" font-size=\"16\">\n color-interpolation=\"linearRGB\" (SVG attr)\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.726Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":108,"estimatedTokens":637}}295{"id":"doc-divisor_svg_mdn-f6dbc850","source":"documentation","title":"divisor - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"convolveMatrix1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feConvolveMatrix kernelMatrix=\"1 2 0 0 0 0 0 0 -1\" divisor=\"1\" />\n </filter>\n <filter id=\"convolveMatrix2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feConvolveMatrix kernelMatrix=\"1 2 0 0 0 0 0 0 -1\" divisor=\"8\" />\n </filter>\n\n <image\n href=\"mdn_logo_only_color.png\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#convolveMatrix1)\" />\n <image\n x=\"220\"\n href=\"mdn_logo_only_color.png\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#convolveMatrix2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.726Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":179}}296{"id":"doc-dur_svg_mdn-02177fd0","source":"documentation","title":"dur - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/dur","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 220 150\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\">\n <animate\n attributeType=\"XML\"\n attributeName=\"y\"\n from=\"0\"\n to=\"50\"\n dur=\"1s\"\n repeatCount=\"indefinite\" />\n </rect>\n <rect x=\"120\" y=\"0\" width=\"100\" height=\"100\">\n <animate\n attributeType=\"XML\"\n attributeName=\"y\"\n from=\"0\"\n to=\"50\"\n dur=\"3s\"\n repeatCount=\"indefinite\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.727Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":140}}297{"id":"doc-d_svg_mdn-1bdf2c8a","source":"documentation","title":"d - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 10,30\n A 20,20 0,0,1 50,30\n A 20,20 0,0,1 90,30\n Q 90,60 50,90\n Q 10,60 10,30 z\" />\n</svg>\n```\n\nExample:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n\n/* This path is displayed on hover */\n#svg_css_ex1:hover path {\n d: path(\n \"M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90\"\n );\n}\n```\n\nExample:\n```text\n<svg id=\"svg_css_ex1\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 10,30\n A 20,20 0,0,1 50,30\n A 20,20 0,0,1 90,30\n Q 90,60 50,90\n Q 10,60 10,30 z\n \" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 10,10 h 10\n m 0,10 h 10\n m 0,10 h 10\n M 40,20 h 10\n m 0,10 h 10\n m 0,10 h 10\n m 0,10 h 10\n M 50,50 h 10\n m-20,10 h 10\n m-20,10 h 10\n m-20,10 h 10\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- LineTo commands with absolute coordinates -->\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 10,10\n L 90,90\n V 10\n H 50\" />\n\n <!-- LineTo commands with relative coordinates -->\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 110,10\n l 80,80\n v -80\n h -40\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 200 100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- Cubic Bรฉzier curve with absolute coordinates -->\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 10,90\n C 30,90 25,10 50,10\n S 70,90 90,90\" />\n\n <!-- Cubic Bรฉzier curve with relative coordinates -->\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 110,90\n c 20,0 15,-80 40,-80\n s 20,80 40,80\" />\n\n <!-- Highlight the curve vertex and control points -->\n <g id=\"ControlPoints\">\n <!-- First cubic command control points -->\n <line x1=\"10\" y1=\"90\" x2=\"30\" y2=\"90\" stroke=\"lightgrey\" />\n <circle cx=\"30\" cy=\"90\" r=\"1.5\" />\n\n <line x1=\"50\" y1=\"10\" x2=\"25\" y2=\"10\" stroke=\"lightgrey\" />\n <circle cx=\"25\" cy=\"10\" r=\"1.5\" />\n\n <!-- Second smooth command control points (the first one is implicit) -->\n <line\n x1=\"50\"\n y1=\"10\"\n x2=\"75\"\n y2=\"10\"\n stroke=\"lightgrey\"\n stroke-dasharray=\"2\" />\n <circle cx=\"75\" cy=\"10\" r=\"1.5\" fill=\"lightgrey\" />\n\n <line x1=\"90\" y1=\"90\" x2=\"70\" y2=\"90\" stroke=\"lightgrey\" />\n <circle cx=\"70\" cy=\"90\" r=\"1.5\" />\n\n <!-- curve vertex points -->\n <circle cx=\"10\" cy=\"90\" r=\"1.5\" />\n <circle cx=\"50\" cy=\"10\" r=\"1.5\" />\n <circle cx=\"90\" cy=\"90\" r=\"1.5\" />\n </g>\n <use href=\"#ControlPoints\" x=\"100\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 200 100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- Quadratic Bรฉzier curve with implicit repetition -->\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 10,50\n Q 25,25 40,50\n t 30,0 30,0 30,0 30,0 30,0\" />\n\n <!-- Highlight the curve vertex and control points -->\n <g>\n <polyline\n points=\"10,50 25,25 40,50\"\n stroke=\"rgb(0 0 0 / 20%)\"\n fill=\"none\" />\n <circle cx=\"25\" cy=\"25\" r=\"1.5\" />\n\n <!-- Curve vertex points -->\n <circle cx=\"10\" cy=\"50\" r=\"1.5\" />\n <circle cx=\"40\" cy=\"50\" r=\"1.5\" />\n\n <g id=\"SmoothQuadraticDown\">\n <polyline\n points=\"40,50 55,75 70,50\"\n stroke=\"rgb(0 0 0 / 20%)\"\n stroke-dasharray=\"2\"\n fill=\"none\" />\n <circle cx=\"55\" cy=\"75\" r=\"1.5\" fill=\"lightgrey\" />\n <circle cx=\"70\" cy=\"50\" r=\"1.5\" />\n </g>\n\n <g id=\"SmoothQuadraticUp\">\n <polyline\n points=\"70,50 85,25 100,50\"\n stroke=\"rgb(0 0 0 / 20%)\"\n stroke-dasharray=\"2\"\n fill=\"none\" />\n <circle cx=\"85\" cy=\"25\" r=\"1.5\" fill=\"lightgrey\" />\n <circle cx=\"100\" cy=\"50\" r=\"1.5\" />\n </g>\n\n <use href=\"#SmoothQuadraticDown\" x=\"60\" />\n <use href=\"#SmoothQuadraticUp\" x=\"60\" />\n <use href=\"#SmoothQuadraticDown\" x=\"120\" />\n </g>\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- The influence of the arc flags with which the arc is drawn -->\n <path\n fill=\"none\"\n stroke=\"red\"\n d=\"M 6,10\n A 6 4 10 1 0 14,10\" />\n\n <path\n fill=\"none\"\n stroke=\"lime\"\n d=\"M 6,10\n A 6 4 10 1 1 14,10\" />\n\n <path\n fill=\"none\"\n stroke=\"purple\"\n d=\"M 6,10\n A 6 4 10 0 1 14,10\" />\n\n <path\n fill=\"none\"\n stroke=\"pink\"\n d=\"M 6,10\n A 6 4 10 0 0 14,10\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 -1 30 11\" xmlns=\"http://www.w3.org/2000/svg\">\n <!--\n An open shape with the last point of\n the path different to the first one\n -->\n <path\n stroke=\"red\"\n d=\"M 5,1\n l -4,8 8,0\" />\n\n <!--\n An open shape with the last point of\n the path matching the first one\n -->\n <path\n stroke=\"red\"\n d=\"M 15,1\n l -4,8 8,0 -4,-8\" />\n\n <!--\n A closed shape with the last point of\n the path different to the first one\n -->\n <path\n stroke=\"red\"\n d=\"M 25,1\n l -4,8 8,0\n z\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.728Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":267,"estimatedTokens":1359}}298{"id":"doc-direction_svg_mdn-38bf8bb6","source":"documentation","title":"direction - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/direction","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 600 72\"\n xmlns=\"http://www.w3.org/2000/svg\"\n direction=\"rtl\"\n lang=\"fa\">\n <text x=\"300\" y=\"50\" text-anchor=\"middle\" font-size=\"36\">\n ุฏุงุณุชุงู SVG 1.1 SE ุทููุง ูู ุงุณุช.\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.729Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":23,"estimatedTokens":75}}299{"id":"doc-display_svg_mdn-c8b03bc6","source":"documentation","title":"display - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/display","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 220 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Here the yellow rectangle is displayed -->\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"skyblue\"></rect>\n <rect x=\"20\" y=\"20\" width=\"60\" height=\"60\" fill=\"yellow\"></rect>\n\n <!-- Here the yellow rectangle is not displayed -->\n <rect x=\"120\" y=\"0\" width=\"100\" height=\"100\" fill=\"skyblue\"></rect>\n <rect\n x=\"140\"\n y=\"20\"\n width=\"60\"\n height=\"60\"\n fill=\"yellow\"\n display=\"none\"></rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.729Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":29,"estimatedTokens":145}}300{"id":"doc-dx_svg_mdn-9d99eab5","source":"documentation","title":"dx - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/dx","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Lines materialized the position of the glyphs -->\n <line x1=\"0\" x2=\"100%\" y1=\"50%\" y2=\"50%\" />\n <line x1=\"10%\" x2=\"10%\" y1=\"0\" y2=\"100%\" />\n <line x1=\"60%\" x2=\"60%\" y1=\"0\" y2=\"100%\" />\n\n <!-- Some reference text -->\n <text x=\"10%\" y=\"50%\" fill=\"grey\">SVG</text>\n\n <!-- The same text with a shift along the x-axis -->\n <text dx=\"50%\" x=\"10%\" y=\"50%\">SVG</text>\n</svg>\n```\n\nExample:\n```text\nline {\n stroke: red;\n stroke-width: 0.5px;\n stroke-dasharray: 3px;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Lines materialized the position of the glyphs -->\n <line x1=\"0\" x2=\"100%\" y1=\"25%\" y2=\"25%\" />\n <line x1=\"0\" x2=\"100%\" y1=\"50%\" y2=\"50%\" />\n <line x1=\"0\" x2=\"100%\" y1=\"75%\" y2=\"75%\" />\n\n <line x1=\"10%\" x2=\"10%\" y1=\"0\" y2=\"100%\" />\n <line x1=\"30%\" x2=\"30%\" y1=\"0\" y2=\"100%\" />\n <line x1=\"60%\" x2=\"60%\" y1=\"0\" y2=\"100%\" />\n\n <!-- Behaviors change based on the number\n of values in the attributes -->\n <text dx=\"20%\" x=\"10%\" y=\"25%\">SVG</text>\n <text dx=\"0 10%\" x=\"10%\" y=\"50%\">SVG</text>\n <text dx=\"0 10% 20%\" x=\"10%\" y=\"75%\">SVG</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.730Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":55,"estimatedTokens":320}}301{"id":"doc-dy_svg_mdn-910a8ba4","source":"documentation","title":"dy - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/dy","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Lines materialized the position of the glyphs -->\n <line x1=\"10%\" x2=\"10%\" y1=\"0\" y2=\"100%\" />\n <line x1=\"0\" x2=\"100%\" y1=\"30%\" y2=\"30%\" />\n <line x1=\"0\" x2=\"100%\" y1=\"80%\" y2=\"80%\" />\n\n <!-- Some reference text -->\n <text x=\"10%\" y=\"30%\" fill=\"grey\">SVG</text>\n\n <!-- The same text with a shift along the y-axis -->\n <text dy=\"50%\" x=\"10%\" y=\"30%\">SVG</text>\n</svg>\n```\n\nExample:\n```text\nline {\n stroke: red;\n stroke-width: 0.5px;\n stroke-dasharray: 3px;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 150 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Horizontal lines -->\n <line x1=\"0\" x2=\"100%\" y1=\"30\" y2=\"30\" />\n <line x1=\"0\" x2=\"100%\" y1=\"40\" y2=\"40\" />\n <line x1=\"0\" x2=\"100%\" y1=\"50\" y2=\"50\" />\n <line x1=\"0\" x2=\"100%\" y1=\"60\" y2=\"60\" />\n\n <!-- Vertical lines -->\n <line x1=\"10\" x2=\"10\" y1=\"0\" y2=\"100%\" />\n <line x1=\"50\" x2=\"50\" y1=\"0\" y2=\"100%\" />\n <line x1=\"90\" x2=\"90\" y1=\"0\" y2=\"100%\" />\n\n <!-- Behaviors change based on the number of values in the attributes -->\n <text dy=\"20\" x=\"10\" y=\"30\">SVG</text>\n <text dy=\"0 10\" x=\"50\" y=\"30\">SVG</text>\n <text dy=\"0 10 20\" x=\"90\" y=\"30\">SVG</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.730Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":56,"estimatedTokens":323}}302{"id":"doc-elevation_svg_mdn-8ad20121","source":"documentation","title":"elevation - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/elevation","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 440 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"distantLight1\">\n <feDiffuseLighting>\n <feDistantLight elevation=\"0\" />\n </feDiffuseLighting>\n </filter>\n <filter id=\"distantLight2\">\n <feDiffuseLighting>\n <feDistantLight elevation=\"45\" />\n </feDiffuseLighting>\n </filter>\n\n <circle cx=\"100\" cy=\"100\" r=\"80\" filter=\"url(#distantLight1)\" />\n <circle cx=\"340\" cy=\"100\" r=\"80\" filter=\"url(#distantLight2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.731Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":29,"estimatedTokens":140}}303{"id":"doc-dominant_baseline_svg_mdn-9cef0cac","source":"documentation","title":"dominant-baseline - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/dominant-baseline","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n\ntext {\n font:\n bold 14px \"Helvetica\",\n \"Verdana\",\n \"Arial\",\n sans-serif;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 120\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M20,20 L180,20 M20,50 L180,50 M20,80 L180,80\" stroke=\"grey\" />\n\n <text dominant-baseline=\"auto\" x=\"30\" y=\"20\">Auto</text>\n <text dominant-baseline=\"middle\" x=\"30\" y=\"50\">Middle</text>\n <text dominant-baseline=\"hanging\" x=\"30\" y=\"80\">Hanging</text>\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"400\"\n height=\"300\"\n viewBox=\"0 0 300 300\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Materialization of anchors -->\n <path\n d=\"M60,20 L60,270\n M30,20 L400,20\n M30,70 L400,70\n M30,120 L400,120\n M30,170 L400,170\n M30,220 L400,220\n M30,270 L400,270\"\n stroke=\"grey\" />\n\n <!-- Anchors in action -->\n <text dominant-baseline=\"auto\" x=\"70\" y=\"20\">auto</text>\n <text dominant-baseline=\"middle\" x=\"70\" y=\"70\">middle</text>\n <text dominant-baseline=\"hanging\" x=\"70\" y=\"170\">hanging</text>\n <text dominant-baseline=\"mathematical\" x=\"70\" y=\"220\">mathematical</text>\n <text dominant-baseline=\"text-top\" x=\"70\" y=\"270\">text-top</text>\n\n <!-- Materialization of anchors -->\n <circle cx=\"60\" cy=\"20\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"70\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"120\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"170\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"220\" r=\"3\" fill=\"red\" />\n <circle cx=\"60\" cy=\"270\" r=\"3\" fill=\"red\" />\n\n <style>\n <![CDATA[\n text {\n font: bold 30px Verdana, Helvetica, Arial, sans-serif;\n }\n ]]>\n </style>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.732Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":72,"estimatedTokens":426}}304{"id":"doc-fetchpriority_svg_mdn-fc6fa925","source":"documentation","title":"fetchpriority - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fetchpriority","text":"Example:\n```text\n<svg\n viewBox=\"0 0 10 10\"\n height=\"120px\"\n width=\"120px\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle id=\"normal\" cx=\"5\" cy=\"5\" r=\"4\" />\n <script href=\"./color-change.js\" fetchpriority=\"high\"></script>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.732Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":13,"estimatedTokens":63}}305{"id":"doc-flood_opacity_svg_mdn-cbabb556","source":"documentation","title":"flood-opacity - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/flood-opacity","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"flood1\">\n <feFlood\n flood-color=\"seagreen\"\n flood-opacity=\"1\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\" />\n </filter>\n <filter id=\"flood2\">\n <feFlood\n flood-color=\"seagreen\"\n flood-opacity=\"0.3\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\" />\n </filter>\n\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#flood1)\" />\n <rect x=\"220\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#flood2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.732Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":37,"estimatedTokens":160}}306{"id":"doc-fill_opacity_svg_mdn-8f1a4469","source":"documentation","title":"fill-opacity - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-opacity","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 400 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Default fill opacity: 1 -->\n <circle cx=\"50\" cy=\"50\" r=\"40\" />\n\n <!-- Fill opacity as a number -->\n <circle cx=\"150\" cy=\"50\" r=\"40\" fill-opacity=\"0.7\" />\n\n <!-- Fill opacity as a percentage -->\n <circle cx=\"250\" cy=\"50\" r=\"40\" fill-opacity=\"50%\" />\n\n <!-- Fill opacity as a CSS property -->\n <circle cx=\"350\" cy=\"50\" r=\"40\" style=\"fill-opacity: .25;\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.733Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":27,"estimatedTokens":133}}307{"id":"doc-exponent_svg_mdn-fb739fa9","source":"documentation","title":"exponent - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/exponent","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient\n id=\"gradient\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0\"\n y1=\"0\"\n x2=\"200\"\n y2=\"0\">\n <stop offset=\"0\" stop-color=\"red\" />\n <stop offset=\"0.5\" stop-color=\"lime\" />\n <stop offset=\"1\" stop-color=\"blue\" />\n </linearGradient>\n </defs>\n\n <filter id=\"componentTransfer1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"gamma\" exponent=\"1\" />\n <feFuncG type=\"gamma\" exponent=\"1\" />\n <feFuncB type=\"gamma\" exponent=\"1\" />\n </feComponentTransfer>\n </filter>\n <filter id=\"componentTransfer2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"gamma\" exponent=\"5\" />\n <feFuncG type=\"gamma\" exponent=\"5\" />\n <feFuncB type=\"gamma\" exponent=\"5\" />\n </feComponentTransfer>\n </filter>\n\n <rect\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n fill=\"url(#gradient)\"\n filter=\"url(#componentTransfer1)\" />\n <rect\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n fill=\"url(#gradient)\"\n filter=\"url(#componentTransfer2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.733Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":59,"estimatedTokens":318}}308{"id":"doc-download_svg_mdn-2e4b2528","source":"documentation","title":"download - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/download","text":"Example:\n```text\nhtml,\nbody {\n height: 100%;\n}\n\nsvg {\n height: 100px;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 160 40\" xmlns=\"http://www.w3.org/2000/svg\">\n <a\n href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 85 C20 55 5 35 5 22 C5 8 15 0 28 0 C36 0 44 5 50 14 C56 5 64 0 72 0 C85 0 95 8 95 22 C95 35 80 55 50 85Z' fill='%23e03'/%3E%3C/svg%3E\">\n <text x=\"10\" y=\"25\">Display my image</text>\n </a>\n</svg>\n\n<hr />\n\n<svg viewBox=\"0 0 160 40\" xmlns=\"http://www.w3.org/2000/svg\">\n <a\n href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 85 C20 55 5 35 5 22 C5 8 15 0 28 0 C36 0 44 5 50 14 C56 5 64 0 72 0 C85 0 95 8 95 22 C95 35 80 55 50 85Z' fill='%23e03'/%3E%3C/svg%3E\"\n download=\"heart.svg\">\n <text x=\"10\" y=\"25\">Download my image</text>\n </a>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.734Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":225}}309{"id":"doc-flood_color_svg_mdn-661c98e3","source":"documentation","title":"flood-color - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/flood-color","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"flood1\">\n <feFlood flood-color=\"skyblue\" x=\"0\" y=\"0\" width=\"200\" height=\"200\" />\n </filter>\n <filter id=\"flood2\">\n <feFlood flood-color=\"seagreen\" x=\"0\" y=\"0\" width=\"200\" height=\"200\" />\n </filter>\n\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#flood1)\" />\n <rect x=\"220\" y=\"0\" width=\"200\" height=\"200\" filter=\"url(#flood2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.734Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":25,"estimatedTokens":132}}310{"id":"doc-filter_svg_mdn-96b3bc89","source":"documentation","title":"filter - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filter","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"blur\">\n <feGaussianBlur stdDeviation=\"2\" />\n </filter>\n\n <rect x=\"10\" y=\"10\" width=\"80\" height=\"80\" filter=\"url(#blur)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.735Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":21,"estimatedTokens":76}}311{"id":"doc-font_size_adjust_svg_mdn-bf5e5a3d","source":"documentation","title":"font-size-adjust - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/font-size-adjust","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg\n width=\"600\"\n height=\"80\"\n viewBox=\"0 0 500 80\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <text y=\"20\" font-family=\"Times, serif\" font-size=\"10px\">\n This text uses the Times font (10px), which is hard to read in small sizes.\n </text>\n <text y=\"40\" font-family=\"Verdana, sans-serif\" font-size=\"10px\">\n This text uses the Verdana font (10px), which has relatively large lowercase\n letters.\n </text>\n <text\n y=\"60\"\n font-family=\"Times, serif\"\n font-size=\"10px\"\n font-size-adjust=\"0.58\">\n This is the 10px Times, but now adjusted to the same aspect ratio as the\n Verdana.\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.735Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":35,"estimatedTokens":179}}312{"id":"doc-end_svg_mdn-a4855805","source":"documentation","title":"end - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/end","text":"Example:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <!-- animated rectangles -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"100\"\n begin=\"0s\"\n end=\"8s\"\n fill=\"freeze\" />\n </rect>\n\n <rect x=\"10\" y=\"60\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"75\"\n begin=\"0s\"\n end=\"6s\"\n fill=\"freeze\" />\n </rect>\n\n <rect x=\"10\" y=\"85\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n to=\"50\"\n begin=\"0s\"\n end=\"4s\"\n fill=\"freeze\" />\n </rect>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"105\" x2=\"110\" y2=\"105\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- animated rectangle -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n from=\"0\"\n to=\"100\"\n begin=\"0s\"\n end=\"endButton.click\"\n dur=\"8s\"\n repeatCount=\"indefinite\"\n fill=\"freeze\" />\n </rect>\n\n <!-- trigger -->\n <rect\n id=\"endButton\"\n cursor=\"pointer\"\n x=\"19.5\"\n y=\"62.5\"\n rx=\"5\"\n height=\"25\"\n width=\"80\"\n fill=\"#EFEFEF\"\n stroke=\"black\"\n stroke-width=\"1\" />\n\n <text x=\"60\" y=\"80\" text-anchor=\"middle\" pointer-events=\"none\">\n Click me.\n </text>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- animated rectangles -->\n <rect x=\"10\" y=\"35\" height=\"15\" width=\"0\">\n <animate\n attributeType=\"XML\"\n attributeName=\"width\"\n from=\"0\"\n to=\"100\"\n begin=\"0s\"\n end=\"accessKey(e)\"\n dur=\"8s\"\n repeatCount=\"indefinite\"\n fill=\"freeze\" />\n </rect>\n\n <!-- trigger -->\n <text x=\"60\" y=\"80\" text-anchor=\"middle\" pointer-events=\"none\">\n Hit the \"s\" key\n </text>\n\n <!-- grid -->\n <text x=\"10\" y=\"20\" text-anchor=\"middle\">0s</text>\n <line x1=\"10\" y1=\"25\" x2=\"10\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"35\" y=\"20\" text-anchor=\"middle\">2s</text>\n <line x1=\"35\" y1=\"25\" x2=\"35\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"60\" y=\"20\" text-anchor=\"middle\">4s</text>\n <line x1=\"60\" y1=\"25\" x2=\"60\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"85\" y=\"20\" text-anchor=\"middle\">6s</text>\n <line x1=\"85\" y1=\"25\" x2=\"85\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n <text x=\"110\" y=\"20\" text-anchor=\"middle\">8s</text>\n <line x1=\"110\" y1=\"25\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n\n <line x1=\"10\" y1=\"30\" x2=\"110\" y2=\"30\" stroke=\"grey\" stroke-width=\".5\" />\n <line x1=\"10\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"grey\" stroke-width=\".5\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.736Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":156,"estimatedTokens":1132}}313{"id":"doc-font_size_svg_mdn-8ad7dc16","source":"documentation","title":"font-size - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/font-size","text":"Example:\n```text\n<svg viewBox=\"0 0 200 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <text y=\"25\" font-size=\"smaller\">smaller</text>\n <text x=\"100\" y=\"25\" font-size=\"2em\">2em</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.736Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":51}}314{"id":"doc-from_svg_mdn-9cbd031c","source":"documentation","title":"from - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/from","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"10\" y=\"10\" height=\"100\">\n <animate attributeName=\"width\" fill=\"freeze\" from=\"100\" to=\"150\" dur=\"3s\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.737Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":19,"estimatedTokens":73}}315{"id":"doc-fill_rule_svg_mdn-3dc9c763","source":"documentation","title":"fill-rule - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"-10 -10 220 120\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Default value for fill-rule -->\n <polygon\n fill-rule=\"nonzero\"\n stroke=\"red\"\n points=\"50,0 21,90 98,35 2,35 79,90\" />\n\n <!--\n The center of the shape has two\n path segments (shown by the red stroke)\n between it and infinity. It is therefore\n considered outside the shape, and not filled.\n -->\n <polygon\n fill-rule=\"evenodd\"\n stroke=\"red\"\n points=\"150,0 121,90 198,35 102,35 179,90\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"-10 -10 320 120\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Effect of nonzero fill rule on crossing path segments -->\n <polygon\n fill-rule=\"nonzero\"\n stroke=\"red\"\n points=\"50,0 21,90 98,35 2,35 79,90\" />\n\n <!--\n Effect of nonzero fill rule on a shape inside a shape\n with the path segment moving in the same direction\n (both squares drawn clockwise, to the \"right\")\n -->\n <path\n fill-rule=\"nonzero\"\n stroke=\"red\"\n d=\"M110,0 h90 v90 h-90 z\n M130,20 h50 v50 h-50 z\" />\n\n <!--\n Effect of nonzero fill rule on a shape inside a shape\n with the path segment moving in the opposite direction\n (one square drawn clockwise, the other anti-clockwise)\n -->\n <path\n fill-rule=\"nonzero\"\n stroke=\"red\"\n d=\"M210,0 h90 v90 h-90 z\n M230,20 v50 h50 v-50 z\" />\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"-10 -10 320 120\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Effect of evenodd fill rule on crossing path segments -->\n <polygon\n fill-rule=\"evenodd\"\n stroke=\"red\"\n points=\"50,0 21,90 98,35 2,35 79,90\" />\n\n <!--\n Effect of evenodd fill rule on a shape inside a shape\n with the path segment moving in the same direction\n (both squares drawn clockwise, to the \"right\")\n -->\n <path\n fill-rule=\"evenodd\"\n stroke=\"red\"\n d=\"M110,0 h90 v90 h-90 z\n M130,20 h50 v50 h-50 z\" />\n\n <!--\n Effect of evenodd fill rule on a shape inside a shape\n with the path segment moving in opposite direction\n (one square drawn clockwise, the other anti-clockwise)\n -->\n <path\n fill-rule=\"evenodd\"\n stroke=\"red\"\n d=\"M210,0 h90 v90 h-90 z\n M230,20 v50 h50 v-50 z\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.737Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":98,"estimatedTokens":569}}316{"id":"doc-fill_svg_mdn-980d77a6","source":"documentation","title":"fill - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 300 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Basic color fill -->\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"pink\" />\n\n <!-- Fill circle with a gradient -->\n <defs>\n <radialGradient id=\"myGradient\">\n <stop offset=\"0%\" stop-color=\"pink\" />\n <stop offset=\"100%\" stop-color=\"black\" />\n </radialGradient>\n </defs>\n\n <circle cx=\"150\" cy=\"50\" r=\"40\" fill=\"url(#myGradient)\" />\n\n <!--\n Keeping the final state of an animated circle\n which is a circle with a radius of 40.\n -->\n <circle cx=\"250\" cy=\"50\" r=\"20\">\n <animate\n attributeType=\"XML\"\n attributeName=\"r\"\n from=\"0\"\n to=\"40\"\n dur=\"5s\"\n fill=\"freeze\" />\n </circle>\n</svg>\n```\n\nExample:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 300 90\">\n <style>\n path {\n stroke-width: 2px;\n marker: url(\"#circle\");\n }\n </style>\n <path d=\"M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z\"\n stroke=\"red\" fill=\"orange\" />\n <path d=\"M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z\"\n stroke=\"green\" fill=\"lightgreen\" />\n <path d=\"M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z\"\n stroke=\"blue\" fill=\"lightblue\" />\n <marker id=\"circle\" markerWidth=\"12\" markerHeight=\"12\"\n refX=\"6\" refY=\"6\" markerUnits=\"userSpaceOnUse\">\n <circle cx=\"6\" cy=\"6\" r=\"3\" stroke-width=\"2\"\n stroke=\"context-stroke\" fill=\"context-fill\" />\n </marker>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.738Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":65,"estimatedTokens":392}}317{"id":"doc-font_style_svg_mdn-aada1f4d","source":"documentation","title":"font-style - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/font-style","text":"Example:\n```text\n<svg viewBox=\"0 0 250 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <text y=\"20\" font-style=\"normal\">Normal font style</text>\n <text x=\"150\" y=\"20\" font-style=\"italic\">Italic font style</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.738Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":58}}318{"id":"doc-font_variant_svg_mdn-c091dac5","source":"documentation","title":"font-variant - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/font-variant","text":"Example:\n```text\n<svg viewBox=\"0 0 250 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <text y=\"20\" font-variant=\"normal\">Normal text</text>\n <text x=\"100\" y=\"20\" font-variant=\"small-caps\">Small-caps text</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.739Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":58}}319{"id":"doc-fr_svg_mdn-989fb1a1","source":"documentation","title":"fr - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fr","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 480 200\"\n width=\"420\"\n height=\"160\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient\n id=\"gradient1\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.35\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"darkseagreen\" />\n </radialGradient>\n <radialGradient\n id=\"gradient2\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.35\"\n fr=\"25%\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"darkseagreen\" />\n </radialGradient>\n </defs>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"url(#gradient1)\" />\n <circle cx=\"340\" cy=\"100\" r=\"100\" fill=\"url(#gradient2)\" />\n</svg>\n```\n\nExample:\n```typescript\n<svg\n viewBox=\"0 0 120 120\"\n width=\"165\"\n height=\"165\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient\n id=\"Gradient\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.35\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"10\"\n y=\"10\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#Gradient)\"\n stroke=\"black\"\n stroke-width=\"2\" />\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"45\" cy=\"45\" r=\"2\" fill=\"white\" stroke=\"white\" />\n <circle cx=\"60\" cy=\"60\" r=\"2\" fill=\"white\" stroke=\"white\" />\n <text x=\"38\" y=\"40\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">\n (fx,fy)\n </text>\n <text x=\"63\" y=\"63\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">\n (cx,cy)\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.739Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":91,"estimatedTokens":452}}320{"id":"doc-font_weight_svg_mdn-ac6086b5","source":"documentation","title":"font-weight - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/font-weight","text":"Example:\n```text\n<svg viewBox=\"0 0 200 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <text y=\"20\" font-weight=\"normal\">Normal text</text>\n <text x=\"100\" y=\"20\" font-weight=\"bold\">Bold text</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.740Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":55}}321{"id":"doc-font_family_svg_mdn-17bdaef6","source":"documentation","title":"font-family - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/font-family","text":"Example:\n```text\n<svg viewBox=\"0 0 200 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <text y=\"20\" font-family=\"Arial, Helvetica, sans-serif\">Sans serif</text>\n <text x=\"100\" y=\"20\" font-family=\"monospace\">Monospace</text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.740Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":9,"estimatedTokens":61}}322{"id":"doc-gradienttransform_svg_mdn-7427e721","source":"documentation","title":"gradientTransform - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientTransform","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <radialGradient\n id=\"gradient1\"\n gradientUnits=\"userSpaceOnUse\"\n cx=\"100\"\n cy=\"100\"\n r=\"100\"\n fx=\"100\"\n fy=\"100\">\n <stop offset=\"0%\" stop-color=\"darkblue\" />\n <stop offset=\"50%\" stop-color=\"skyblue\" />\n <stop offset=\"100%\" stop-color=\"darkblue\" />\n </radialGradient>\n <radialGradient\n id=\"gradient2\"\n gradientUnits=\"userSpaceOnUse\"\n cx=\"100\"\n cy=\"100\"\n r=\"100\"\n fx=\"100\"\n fy=\"100\"\n gradientTransform=\"skewX(20) translate(185, 0)\">\n <stop offset=\"0%\" stop-color=\"darkblue\" />\n <stop offset=\"50%\" stop-color=\"skyblue\" />\n <stop offset=\"100%\" stop-color=\"darkblue\" />\n </radialGradient>\n\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"url(#gradient1)\" />\n <rect x=\"220\" y=\"0\" width=\"200\" height=\"200\" fill=\"url(#gradient2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.741Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":44,"estimatedTokens":240}}323{"id":"doc-id_svg_mdn-cc9b44f4","source":"documentation","title":"id - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/id","text":"Example:\n```text\n<svg\n width=\"120\"\n height=\"120\"\n viewBox=\"0 0 120 120\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n <![CDATA[\n #smallRect {\n stroke: #000066;\n fill: #00cc00;\n }\n ]]>\n </style>\n\n <rect id=\"smallRect\" x=\"10\" y=\"10\" width=\"100\" height=\"100\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.741Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":21,"estimatedTokens":81}}324{"id":"doc-fx_svg_mdn-b3babd6b","source":"documentation","title":"fx - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 480 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient\n id=\"gradient1\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.35\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"darkseagreen\" />\n </radialGradient>\n <radialGradient\n id=\"gradient2\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.75\"\n fy=\"0.35\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"darkseagreen\" />\n </radialGradient>\n </defs>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"url(#gradient1)\" />\n <circle cx=\"340\" cy=\"100\" r=\"100\" fill=\"url(#gradient2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.743Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":43,"estimatedTokens":204}}325{"id":"doc-href_svg_mdn-45fd80da","source":"documentation","title":"href - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/href","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 160 40\" xmlns=\"http://www.w3.org/2000/svg\">\n <a href=\"https://developer.mozilla.org/\">\n <text x=\"10\" y=\"25\">MDN Web Docs</text>\n </a>\n</svg>\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <image href=\"fxlogo.png\" x=\"0\" y=\"0\" height=\"100\" width=\"100\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.743Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":26,"estimatedTokens":104}}326{"id":"doc-fy_svg_mdn-7d309173","source":"documentation","title":"fy - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 480 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient\n id=\"gradient1\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.35\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"darkseagreen\" />\n </radialGradient>\n <radialGradient\n id=\"gradient2\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.75\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"white\" />\n <stop offset=\"100%\" stop-color=\"darkseagreen\" />\n </radialGradient>\n </defs>\n\n <circle cx=\"100\" cy=\"100\" r=\"100\" fill=\"url(#gradient1)\" />\n <circle cx=\"340\" cy=\"100\" r=\"100\" fill=\"url(#gradient2)\" />\n</svg>\n```\n\nExample:\n```text\n<svg\n viewBox=\"0 0 120 120\"\n width=\"200\"\n height=\"200\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient\n id=\"Gradient\"\n cx=\"0.5\"\n cy=\"0.5\"\n r=\"0.5\"\n fx=\"0.35\"\n fy=\"0.35\"\n fr=\"5%\">\n <stop offset=\"0%\" stop-color=\"red\" />\n <stop offset=\"100%\" stop-color=\"blue\" />\n </radialGradient>\n </defs>\n\n <rect\n x=\"10\"\n y=\"10\"\n rx=\"15\"\n ry=\"15\"\n width=\"100\"\n height=\"100\"\n fill=\"url(#Gradient)\"\n stroke=\"black\"\n stroke-width=\"2\" />\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" />\n <circle cx=\"35\" cy=\"35\" r=\"2\" fill=\"white\" stroke=\"white\" />\n <circle cx=\"60\" cy=\"60\" r=\"2\" fill=\"white\" stroke=\"white\" />\n <text x=\"38\" y=\"40\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">\n (fx,fy)\n </text>\n <text x=\"63\" y=\"63\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">\n (cx,cy)\n </text>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.744Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":87,"estimatedTokens":442}}327{"id":"doc-k2_svg_mdn-76ce5faa","source":"documentation","title":"k2 - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k2","text":"Example:\n```javascript\nresult = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4;\n```\n\nExample:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"composite1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"1\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n <filter id=\"composite2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"10\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n\n <image\n href=\"mdn.svg\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite1)\" />\n <image\n href=\"mdn.svg\"\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.745Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":54,"estimatedTokens":220}}328{"id":"doc-k3_svg_mdn-688a515f","source":"documentation","title":"k3 - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k3","text":"Example:\n```javascript\nresult = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4;\n```\n\nExample:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"composite1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"1\"\n k4=\"0\" />\n </filter>\n <filter id=\"composite2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"10\"\n k4=\"0\" />\n </filter>\n\n <image\n href=\"mdn.svg\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite1)\" />\n <image\n href=\"mdn.svg\"\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.746Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":54,"estimatedTokens":220}}329{"id":"doc-intercept_svg_mdn-e57de224","source":"documentation","title":"intercept - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/intercept","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient\n id=\"gradient\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"0\"\n y1=\"0\"\n x2=\"200\"\n y2=\"0\">\n <stop offset=\"0\" stop-color=\"red\" />\n <stop offset=\"0.5\" stop-color=\"lime\" />\n <stop offset=\"1\" stop-color=\"blue\" />\n </linearGradient>\n </defs>\n\n <filter id=\"componentTransfer1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"linear\" intercept=\"0\" />\n <feFuncG type=\"linear\" intercept=\"0\" />\n <feFuncB type=\"linear\" intercept=\"0\" />\n </feComponentTransfer>\n </filter>\n <filter id=\"componentTransfer2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComponentTransfer>\n <feFuncR type=\"linear\" intercept=\"0.3\" />\n <feFuncG type=\"linear\" intercept=\"0.1\" />\n <feFuncB type=\"linear\" intercept=\"0.8\" />\n </feComponentTransfer>\n </filter>\n\n <rect\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n fill=\"url(#gradient)\"\n filter=\"url(#componentTransfer1)\" />\n <rect\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n fill=\"url(#gradient)\"\n filter=\"url(#componentTransfer2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.747Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":59,"estimatedTokens":322}}330{"id":"doc-in_svg_mdn-638e1870","source":"documentation","title":"in - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/in","text":"Example:\n```text\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"backgroundMultiply\">\n <!-- This will not work. -->\n <feBlend in=\"BackgroundImage\" in2=\"SourceGraphic\" mode=\"multiply\" />\n </filter>\n </defs>\n <image\n href=\"mdn_logo_only_color.png\"\n x=\"10%\"\n y=\"10%\"\n width=\"80%\"\n height=\"80%\" />\n <circle\n cx=\"50%\"\n cy=\"40%\"\n r=\"40%\"\n fill=\"#cc0000\"\n filter=\"url(#backgroundMultiply)\" />\n</svg>\n\n<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <defs>\n <filter id=\"imageMultiply\">\n <!-- This is a workaround. -->\n <feImage\n href=\"mdn_logo_only_color.png\"\n x=\"10%\"\n y=\"10%\"\n width=\"80%\"\n height=\"80%\" />\n <feBlend in2=\"SourceGraphic\" mode=\"multiply\" />\n </filter>\n </defs>\n <circle\n cx=\"50%\"\n cy=\"40%\"\n r=\"40%\"\n fill=\"#cc0000\"\n filter=\"url(#imageMultiply)\" />\n</svg>\n```\n\nExample:\n```text\nsvg {\n width: 200px;\n height: 200px;\n display: inline;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.747Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":59,"estimatedTokens":272}}331{"id":"doc-height_svg_mdn-1af8779e","source":"documentation","title":"height - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/height","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 300 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- With a height of 0 or less, nothing will be rendered -->\n <rect y=\"0\" x=\"0\" width=\"90\" height=\"0\" />\n <rect y=\"0\" x=\"100\" width=\"90\" height=\"60\" />\n <rect y=\"0\" x=\"200\" width=\"90\" height=\"100%\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.748Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":20,"estimatedTokens":93}}332{"id":"doc-k4_svg_mdn-2d2903c2","source":"documentation","title":"k4 - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k4","text":"Example:\n```text\nresult = k1*i1*i2 + k2*i1 + k3*i2 + k4\n```\n\nExample:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"composite1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n <filter id=\"composite2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"10\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0.3\" />\n </filter>\n\n <image\n href=\"mdn.svg\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite1)\" />\n <image\n href=\"mdn.svg\"\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.748Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":54,"estimatedTokens":217}}333{"id":"doc-tabindex_html_global_attribute_html_mdn-4003a4c7","source":"documentation","title":"tabindex HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex","text":"Example:\n```text\n<p>Click anywhere in this pane, then try tabbing through the elements.</p>\n\n<label>First in tab order:<input type=\"text\" /></label>\n\n<div tabindex=\"0\">Tabbable due to tabindex.</div>\n\n<div>Not tabbable: no tabindex.</div>\n\n<label>Third in tab order:<input type=\"text\" /></label>\n```\n\nExample:\n```text\np {\n font-style: italic;\n font-weight: bold;\n}\n\ndiv,\nlabel {\n display: block;\n letter-spacing: 0.5px;\n margin-bottom: 1rem;\n}\n\ndiv:focus {\n font-weight: bold;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.749Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":33,"estimatedTokens":126}}334{"id":"doc-popover_html_global_attribute_html_mdn-1360c887","source":"documentation","title":"popover HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover","text":"Example:\n```text\n<header>\n <button popovertarget=\"menu\">Open Menu</button>\n</header>\n<main>\n <!-- Page content goes here -->\n</main>\n```\n\nExample:\n```text\n<!-- menu popover -->\n<div id=\"menu\" popover=\"auto\">\n <ul>\n <li>\n <a href=\"#\">New thing</a><button popovertarget=\"new-info\">โ</button>\n </li>\n <li>\n <a href=\"#\">Open thing</a><button popovertarget=\"open-info\">โ</button>\n </li>\n <li>\n <a href=\"#\">Save thing</a><button popovertarget=\"save-info\">โ</button>\n </li>\n <li>\n <a href=\"#\">Close thing</a><button popovertarget=\"close-info\">โ</button>\n </li>\n </ul>\n</div>\n```\n\nExample:\n```text\n<!-- info popovers -->\n<div id=\"new-info\" class=\"info-popover\" popover=\"hint\">\n This is some information about <strong>creating a new</strong> thing.\n</div>\n<div id=\"open-info\" class=\"info-popover\" popover=\"hint\">\n This is some information about <strong>opening an existing</strong> thing.\n</div>\n<div id=\"save-info\" class=\"info-popover\" popover=\"hint\">\n This is some information about <strong>saving the current</strong> thing.\n</div>\n<div id=\"close-info\" class=\"info-popover\" popover=\"hint\">\n This is some information about <strong>closing the current</strong> thing.\n</div>\n```\n\nExample:\n```text\nheader {\n display: flex;\n justify-content: center;\n}\nheader button {\n margin: 0.4rem auto;\n}\n```\n\nExample:\n```text\n#menu {\n margin: 0;\n margin-top: 0.4rem;\n inset: auto;\n position-area: bottom;\n}\n#menu ul {\n display: grid;\n grid-template-columns: max-content 1fr;\n gap: 0.4rem;\n padding: 0.4rem;\n}\n#menu li {\n grid-column: span 2;\n display: grid;\n grid: inherit;\n grid-template-columns: subgrid;\n gap: 1.4rem;\n}\nli [popovertarget] {\n cursor: pointer;\n font-size: 1.2rem;\n}\nli button {\n border: none;\n padding: 0;\n background-color: inherit;\n}\n```\n\nExample:\n```text\ndiv.info-popover {\n margin: 2rem;\n inset: auto;\n max-width: 300px;\n position-area: right;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.750Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":102,"estimatedTokens":486}}335{"id":"doc-spellcheck_html_global_attribute_html_mdn-6df6bbc6","source":"documentation","title":"spellcheck HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck","text":"Example:\n```text\n<textarea spellcheck=\"true\">\nThis exampull will be checkd fur spellung when you try to edit it.</textarea>\n\n<textarea spellcheck=\"false\">\nThis exampull will nut be checkd fur spellung when you try to edit it.</textarea>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.751Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":10,"estimatedTokens":64}}336{"id":"doc-nonce_html_global_attribute_html_mdn-a088bb70","source":"documentation","title":"nonce HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce","text":"Example:\n```javascript\nimport crypto from \"node:crypto\";\n\ncrypto.randomBytes(16).toString(\"base64\");\n// '8IBTHwOdqNKAWeKl7plt8g=='\n```\n\nExample:\n```text\n<script nonce=\"8IBTHwOdqNKAWeKl7plt8g==\">\n // โฆ\n</script>\n```\n\nExample:\n```text\nContent-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='\n```\n\nExample:\n```javascript\nscript.getAttribute(\"nonce\"); // returns empty string\n```\n\nExample:\n```javascript\nscript.nonce; // returns nonce value\n```\n\nExample:\n```text\nscript[nonce~=\"whatever\"] {\n background: url(\"https://evil.com/nonce?whatever\");\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.752Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":38,"estimatedTokens":144}}337{"id":"doc-writingsuggestions_html_global_attribute_html_md-56bb01d3","source":"documentation","title":"writingsuggestions HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/writingsuggestions","text":"Example:\n```text\n<input type=\"text\" writingsuggestions=\"false\" />\n```\n\nExample:\n```text\n<input type=\"text\" />\n<input type=\"text\" writingsuggestions />\n<input type=\"text\" writingsuggestions=\"true\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.752Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":13,"estimatedTokens":54}}338{"id":"doc-input_type_color_html_attribute_value_html_mdn-21b1bbb6","source":"documentation","title":"<input type=\"color\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color","text":"Example:\n```text\n<p>Choose your colors:</p>\n\n<div>\n <input type=\"color\" id=\"foreground\" name=\"foreground\" value=\"#e66465\" />\n <label for=\"foreground\">Foreground color</label>\n</div>\n\n<div>\n <input\n type=\"color\"\n id=\"background\"\n name=\"background\"\n value=\"oklab(50% 0.1 0.1 / 0.5)\"\n colorspace=\"display-p3\"\n alpha />\n <label for=\"background\">Background color</label>\n</div>\n```\n\nExample:\n```text\np,\nlabel {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput {\n margin: 0.4rem;\n}\n```\n\nExample:\n```text\n<input type=\"color\" value=\"#ff0000\" />\n<input\n type=\"color\"\n id=\"body\"\n name=\"body\"\n value=\"oklab(50% 0.1 0.1 / 0.5)\"\n colorspace=\"display-p3\"\n alpha />\n```\n\nExample:\n```javascript\ncolorPicker.addEventListener(\"input\", updateFirst);\ncolorPicker.addEventListener(\"change\", watchColorPicker);\n\nfunction watchColorPicker(event) {\n document.querySelectorAll(\"p\").forEach((p) => {\n p.style.color = event.target.value;\n });\n}\n```\n\nExample:\n```javascript\ncolorPicker.select();\n```\n\nExample:\n```text\n<p>\n An example demonstrating the use of the\n <code><input type=\"color\"></code> control.\n</p>\n\n<label for=\"color-picker\">Color:</label>\n<input type=\"color\" value=\"#ff0000\" id=\"color-picker\" />\n\n<p>\n Watch the paragraph colors change when you adjust the color picker. As you\n make changes in the color picker, the first paragraph's color changes, as a\n preview (this uses the <code>input</code> event). When you close the color\n picker, the <code>change</code> event fires, and we detect that to change\n every paragraph to the selected color.\n</p>\n```\n\nExample:\n```javascript\nconst defaultColor = \"#0000ff\";\nconst colorPicker = document.querySelector(\"#color-picker\");\ncolorPicker.value = defaultColor;\ncolorPicker.addEventListener(\"input\", updateFirst);\ncolorPicker.addEventListener(\"change\", updateAll);\ncolorPicker.select();\n```\n\nExample:\n```javascript\nfunction updateFirst(event) {\n const p = document.querySelector(\"p\");\n if (p) {\n p.style.color = event.target.value;\n }\n}\n```\n\nExample:\n```javascript\nfunction updateAll(event) {\n document.querySelectorAll(\"p\").forEach((p) => {\n p.style.color = event.target.value;\n });\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.753Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":113,"estimatedTokens":550}}339{"id":"doc-input_type_checkbox_html_attribute_value_html_md-6ff232da","source":"documentation","title":"<input type=\"checkbox\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox","text":"Example:\n```text\n<fieldset>\n <legend>Choose your monster's features:</legend>\n\n <div>\n <input type=\"checkbox\" id=\"scales\" name=\"scales\" checked />\n <label for=\"scales\">Scales</label>\n </div>\n\n <div>\n <input type=\"checkbox\" id=\"horns\" name=\"horns\" />\n <label for=\"horns\">Horns</label>\n </div>\n</fieldset>\n```\n\nExample:\n```text\np,\nlabel {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput {\n margin: 0.4rem;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <input\n type=\"checkbox\"\n id=\"subscribeNews\"\n name=\"subscribe\"\n value=\"newsletter\" />\n <label for=\"subscribeNews\">Subscribe to newsletter?</label>\n </div>\n <div>\n <button type=\"submit\">Subscribe</button>\n </div>\n</form>\n```\n\nExample:\n```text\n<fieldset>\n <legend>Choose your interests</legend>\n <div>\n <input type=\"checkbox\" id=\"coding\" name=\"interest\" value=\"coding\" />\n <label for=\"coding\">Coding</label>\n </div>\n <div>\n <input type=\"checkbox\" id=\"music\" name=\"interest\" value=\"music\" />\n <label for=\"music\">Music</label>\n </div>\n</fieldset>\n```\n\nExample:\n```text\n<fieldset>\n <legend>Choose your interests</legend>\n <div>\n <input type=\"checkbox\" id=\"coding\" name=\"interest\" value=\"coding\" checked />\n <label for=\"coding\">Coding</label>\n </div>\n <div>\n <input type=\"checkbox\" id=\"music\" name=\"interest\" value=\"music\" />\n <label for=\"music\">Music</label>\n </div>\n</fieldset>\n```\n\nExample:\n```text\n<form>\n <fieldset>\n <legend>Adjust your setting</legend>\n <div>\n <label for=\"theme\">Dark mode</label>\n <input type=\"checkbox\" name=\"theme\" id=\"theme\" switch checked />\n </div>\n <div>\n <label for=\"notifications\">Notifications</label>\n <input type=\"checkbox\" name=\"notifications\" id=\"notifications\" switch />\n </div>\n <button type=\"submit\">Submit</button>\n </fieldset>\n</form>\n```\n\nExample:\n```javascript\ninputInstance.indeterminate = true;\n```\n\nExample:\n```javascript\nconst overall = document.querySelector(\"#enchantment\");\nconst ingredients = document.querySelectorAll(\"ul input\");\n\noverall.addEventListener(\"click\", (e) => {\n e.preventDefault();\n});\n\nfor (const ingredient of ingredients) {\n ingredient.addEventListener(\"click\", updateDisplay);\n}\n\nfunction updateDisplay() {\n let checkedCount = 0;\n for (const ingredient of ingredients) {\n if (ingredient.checked) {\n checkedCount++;\n }\n }\n\n if (checkedCount === 0) {\n overall.checked = false;\n overall.indeterminate = false;\n } else if (checkedCount === ingredients.length) {\n overall.checked = true;\n overall.indeterminate = false;\n } else {\n overall.checked = false;\n overall.indeterminate = true;\n }\n}\n```\n\nExample:\n```text\n<form>\n <fieldset>\n <legend>Complete the recipe</legend>\n <div>\n <input type=\"checkbox\" id=\"enchantment\" name=\"enchantment\" />\n <label for=\"enchantment\">Enchantment table</label>\n <ul>\n <li>\n <input type=\"checkbox\" id=\"book\" name=\"ingredient\" value=\"book\" />\n <label for=\"book\">Book</label>\n </li>\n <li>\n <input\n type=\"checkbox\"\n id=\"diamonds\"\n name=\"ingredient\"\n value=\"diamonds\" />\n <label for=\"diamonds\">Diamonds (x2)</label>\n </li>\n <li>\n <input\n type=\"checkbox\"\n id=\"obsidian\"\n name=\"ingredient\"\n value=\"obsidian\" />\n <label for=\"obsidian\">Obsidian (x4)</label>\n </li>\n </ul>\n </div>\n </fieldset>\n</form>\n```\n\nExample:\n```text\n<form>\n <fieldset>\n <legend>Choose your interests</legend>\n <div>\n <label>\n <input type=\"checkbox\" id=\"coding\" name=\"interest\" value=\"coding\" />\n Coding\n </label>\n </div>\n <div>\n <label>\n <input type=\"checkbox\" id=\"music\" name=\"interest\" value=\"music\" />\n Music\n </label>\n </div>\n <div>\n <label>\n <input type=\"checkbox\" id=\"art\" name=\"interest\" value=\"art\" />\n Art\n </label>\n </div>\n <div>\n <label>\n <input type=\"checkbox\" id=\"sports\" name=\"interest\" value=\"sports\" />\n Sports\n </label>\n </div>\n <div>\n <label>\n <input type=\"checkbox\" id=\"cooking\" name=\"interest\" value=\"cooking\" />\n Cooking\n </label>\n </div>\n <div>\n <label>\n <input type=\"checkbox\" id=\"other\" name=\"interest\" value=\"other\" />\n Other\n </label>\n <input\n type=\"text\"\n id=\"otherValue\"\n name=\"other\"\n aria-label=\"Other interest\" />\n </div>\n <div>\n <button type=\"submit\">Submit form</button>\n </div>\n </fieldset>\n</form>\n```\n\nExample:\n```text\nhtml {\n font-family: sans-serif;\n}\n\nform {\n width: 600px;\n margin: 0 auto;\n}\n\ndiv {\n margin-bottom: 10px;\n}\n\nfieldset {\n background: cyan;\n border: 5px solid blue;\n}\n\nlegend {\n padding: 10px;\n background: blue;\n color: cyan;\n}\n```\n\nExample:\n```javascript\nconst otherCheckbox = document.querySelector(\"#other\");\nconst otherText = document.querySelector(\"#otherValue\");\notherText.style.visibility = \"hidden\";\n\notherCheckbox.addEventListener(\"change\", () => {\n if (otherCheckbox.checked) {\n otherText.style.visibility = \"visible\";\n otherText.value = \"\";\n } else {\n otherText.style.visibility = \"hidden\";\n }\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.755Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":267,"estimatedTokens":1329}}340{"id":"doc-input_type_button_html_attribute_value_html_mdn-2ecbb9f6","source":"documentation","title":"<input type=\"button\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/button","text":"Example:\n```text\n<input class=\"styled\" type=\"button\" value=\"Add to favorites\" />\n```\n\nExample:\n```text\n.styled {\n border: 0;\n line-height: 2.5;\n padding: 0 20px;\n font-size: 1rem;\n text-align: center;\n color: white;\n text-shadow: 1px 1px 1px black;\n border-radius: 10px;\n background-color: tomato;\n background-image: linear-gradient(\n to top left,\n rgb(0 0 0 / 20%),\n rgb(0 0 0 / 20%) 30%,\n transparent\n );\n box-shadow:\n inset 2px 2px 3px rgb(255 255 255 / 60%),\n inset -2px -2px 3px rgb(0 0 0 / 60%);\n}\n\n.styled:hover {\n background-color: red;\n}\n\n.styled:active {\n box-shadow:\n inset -2px -2px 3px rgb(255 255 255 / 60%),\n inset 2px 2px 3px rgb(0 0 0 / 60%);\n}\n```\n\nExample:\n```text\n<input type=\"button\" value=\"Click Me\" />\n```\n\nExample:\n```text\n<input type=\"button\" />\n```\n\nExample:\n```text\n<form>\n <input type=\"button\" value=\"Start machine\" />\n</form>\n<p>The machine is stopped.</p>\n```\n\nExample:\n```javascript\nconst button = document.querySelector(\"input\");\nconst paragraph = document.querySelector(\"p\");\n\nbutton.addEventListener(\"click\", updateButton);\n\nfunction updateButton() {\n if (button.value === \"Start machine\") {\n button.value = \"Stop machine\";\n paragraph.textContent = \"The machine has started!\";\n } else {\n button.value = \"Start machine\";\n paragraph.textContent = \"The machine is stopped.\";\n }\n}\n```\n\nExample:\n```typescript\n<form>\n <input type=\"button\" value=\"Start machine\" accesskey=\"s\" />\n</form>\n<p>The machine is stopped.</p>\n```\n\nExample:\n```text\n<input type=\"button\" value=\"Disable me\" disabled />\n```\n\nExample:\n```text\n<input type=\"button\" value=\"Enabled\" />\n```\n\nExample:\n```javascript\nconst button = document.querySelector(\"input\");\n\nbutton.addEventListener(\"click\", disableButton);\n\nfunction disableButton() {\n button.disabled = true;\n button.value = \"Disabled\";\n setTimeout(() => {\n button.disabled = false;\n button.value = \"Enabled\";\n }, 2000);\n}\n```\n\nExample:\n```text\n<fieldset>\n <legend>Button group</legend>\n <input type=\"button\" value=\"Button 1\" />\n <input type=\"button\" value=\"Button 2\" />\n <input type=\"button\" value=\"Button 3\" />\n</fieldset>\n```\n\nExample:\n```javascript\nconst button = document.querySelector(\"input\");\nconst fieldset = document.querySelector(\"fieldset\");\n\nbutton.addEventListener(\"click\", disableButton);\n\nfunction disableButton() {\n fieldset.disabled = true;\n setTimeout(() => {\n fieldset.disabled = false;\n }, 2000);\n}\n```\n\nExample:\n```text\n<div class=\"toolbar\">\n <input type=\"color\" aria-label=\"select pen color\" />\n <input\n type=\"range\"\n min=\"2\"\n max=\"50\"\n value=\"30\"\n aria-label=\"select pen size\" /><span class=\"output\">30</span>\n <input type=\"button\" value=\"Clear canvas\" />\n</div>\n\n<canvas class=\"myCanvas\">\n <p>Add suitable fallback here.</p>\n</canvas>\n```\n\nExample:\n```text\nbody {\n background: #cccccc;\n margin: 0;\n overflow: hidden;\n}\n\n.toolbar {\n background: #cccccc;\n width: 150px;\n height: 75px;\n padding: 5px;\n}\n\ninput[type=\"color\"],\ninput[type=\"button\"] {\n width: 90%;\n margin: 0 auto;\n display: block;\n}\n\ninput[type=\"range\"] {\n width: 70%;\n}\n\nspan {\n position: relative;\n bottom: 5px;\n}\n```\n\nExample:\n```javascript\nconst canvas = document.querySelector(\".myCanvas\");\nconst width = (canvas.width = window.innerWidth);\nconst height = (canvas.height = window.innerHeight - 85);\nconst ctx = canvas.getContext(\"2d\");\n\nctx.fillStyle = \"rgb(0 0 0)\";\nctx.fillRect(0, 0, width, height);\n\nconst colorPicker = document.querySelector('input[type=\"color\"]');\nconst sizePicker = document.querySelector('input[type=\"range\"]');\nconst output = document.querySelector(\".output\");\nconst clearBtn = document.querySelector('input[type=\"button\"]');\n\n// covert degrees to radians\nfunction degToRad(degrees) {\n return (degrees * Math.PI) / 180;\n}\n\n// update size picker output value\n\nsizePicker.oninput = () => {\n output.textContent = sizePicker.value;\n};\n\n// store mouse pointer coordinates, and whether the button is pressed\nlet curX;\nlet curY;\nlet pressed = false;\n\n// update mouse pointer coordinates\ndocument.onmousemove = (e) => {\n curX = e.pageX;\n curY = e.pageY;\n};\n\ncanvas.onmousedown = () => {\n pressed = true;\n};\n\ncanvas.onmouseup = () => {\n pressed = false;\n};\n\nclearBtn.onclick = () => {\n ctx.fillStyle = \"rgb(0 0 0)\";\n ctx.fillRect(0, 0, width, height);\n};\n\nfunction draw() {\n if (pressed) {\n ctx.fillStyle = colorPicker.value;\n ctx.beginPath();\n ctx.arc(\n curX,\n curY - 85,\n sizePicker.value,\n degToRad(0),\n degToRad(360),\n false,\n );\n ctx.fill();\n }\n\n requestAnimationFrame(draw);\n}\n\ndraw();\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.756Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":256,"estimatedTokens":1158}}341{"id":"doc-title_html_global_attribute_html_mdn-e6394406","source":"documentation","title":"title HTML global attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title","text":"Example:\n```text\n<p>\n Use the <code>title</code> attribute on an <code>iframe</code> to clearly\n identify the content of the <code>iframe</code> to screen readers.\n</p>\n\n<iframe\n title=\"Wikipedia page for the HTML language\"\n src=\"https://en.m.wikipedia.org/wiki/HTML\"></iframe>\n<iframe\n title=\"Wikipedia page for the CSS language\"\n src=\"https://en.m.wikipedia.org/wiki/CSS\"></iframe>\n```\n\nExample:\n```text\niframe {\n height: 200px;\n margin-bottom: 24px;\n width: 100%;\n}\n```\n\nExample:\n```text\n<p>\n Newlines in <code>title</code> should be taken into account. This\n <span\n title=\"This is a\nmultiline title\">\n example span\n </span>\n has a title attribute with a newline.\n</p>\n<hr />\n<pre id=\"output\"></pre>\n```\n\nExample:\n```javascript\nconst span = document.querySelector(\"span\");\nconst output = document.querySelector(\"#output\");\noutput.textContent = span.title;\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.756Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":47,"estimatedTokens":224}}342{"id":"doc-input_type_date_html_attribute_value_html_mdn-811fd16e","source":"documentation","title":"<input type=\"date\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date","text":"Example:\n```text\n<label for=\"start\">Start date:</label>\n\n<input\n type=\"date\"\n id=\"start\"\n name=\"trip-start\"\n value=\"2018-07-22\"\n min=\"2018-01-01\"\n max=\"2018-12-31\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<input type=\"date\" value=\"2017-06-01\" />\n```\n\nExample:\n```javascript\nconst dateControl = document.querySelector('input[type=\"date\"]');\ndateControl.value = \"2017-06-01\";\nconsole.log(dateControl.value); // prints \"2017-06-01\"\nconsole.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)\n```\n\nExample:\n```text\n<form action=\"https://example.com\">\n <label>\n Enter your birthday:\n <input type=\"date\" name=\"bday\" />\n </label>\n\n <p><button>Submit</button></p>\n</form>\n```\n\nExample:\n```text\n<form>\n <label>\n Choose your preferred party date:\n <input type=\"date\" name=\"party\" min=\"2017-04-01\" max=\"2017-04-30\" />\n </label>\n</form>\n```\n\nExample:\n```text\n<form>\n <label>\n Choose your preferred party date (required, April 1st to 20th):\n <input\n type=\"date\"\n name=\"party\"\n min=\"2017-04-01\"\n max=\"2017-04-20\"\n required />\n <span class=\"validity\"></span>\n </label>\n\n <p>\n <button>Submit</button>\n </p>\n</form>\n```\n\nExample:\n```text\nlabel {\n display: flex;\n align-items: center;\n}\n\nspan::after {\n padding-left: 5px;\n}\n\ninput:invalid + span::after {\n content: \"โ\";\n}\n\ninput:valid + span::after {\n content: \"โ\";\n}\n```\n\nExample:\n```text\n<form>\n <div class=\"nativeDatePicker\">\n <label for=\"bday\">Enter your birthday:</label>\n <input type=\"date\" id=\"bday\" name=\"bday\" />\n <span class=\"validity\"></span>\n </div>\n</form>\n```\n\nExample:\n```text\ninput:invalid + span::after {\n content: \" โ\";\n}\n\ninput:valid + span::after {\n content: \" โ\";\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.757Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":126,"estimatedTokens":468}}343{"id":"doc-input_type_email_html_attribute_value_html_mdn-446033a6","source":"documentation","title":"<input type=\"email\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email","text":"Example:\n```text\n<label for=\"email\">Enter your example.com email:</label>\n\n<input type=\"email\" id=\"email\" pattern=\".+@example\\.com\" size=\"30\" required />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<input id=\"emailAddress\" type=\"email\" />\n```\n\nExample:\n```text\n<input id=\"emailAddress\" type=\"email\" multiple />\n```\n\nExample:\n```text\n<input type=\"email\" placeholder=\"sophie@example.com\" />\n```\n\nExample:\n```text\n<input type=\"email\" size=\"15\" />\n```\n\nExample:\n```text\n<input type=\"email\" size=\"32\" minlength=\"3\" maxlength=\"64\" />\n```\n\nExample:\n```text\n<input type=\"email\" value=\"default@example.com\" />\n```\n\nExample:\n```text\n<input type=\"email\" size=\"40\" list=\"defaultEmails\" />\n\n<datalist id=\"defaultEmails\">\n <option value=\"jbond007@mi6.defence.gov.uk\"></option>\n <option value=\"jbourne@unknown.net\"></option>\n <option value=\"nfury@shield.org\"></option>\n <option value=\"tony@starkindustries.com\"></option>\n <option value=\"hulk@grrrrrrrr.arg\"></option>\n</datalist>\n```\n\nExample:\n```javascript\n/^[\\w.!#$%&'*+/=?^`{|}~-]+@[a-z\\d](?:[a-z\\d-]{0,61}[a-z\\d])?(?:\\.[a-z\\d](?:[a-z\\d-]{0,61}[a-z\\d])?)*$/i;\n```\n\nExample:\n```text\nbody {\n font: 16px sans-serif;\n}\n\n.emailBox {\n padding-bottom: 20px;\n}\n\n.messageBox {\n padding-bottom: 20px;\n}\n\nlabel {\n line-height: 22px;\n}\n\nlabel::after {\n content: \":\";\n}\n```\n\nExample:\n```text\n<form>\n <div class=\"emailBox\">\n <label for=\"emailAddress\">Your email address</label><br />\n <input\n id=\"emailAddress\"\n type=\"email\"\n size=\"64\"\n maxlength=\"64\"\n required\n placeholder=\"username@beststartupever.com\"\n pattern=\".+@beststartupever\\.com\"\n title=\"Please provide only a Best Startup Ever corporate email address\" />\n </div>\n\n <div class=\"messageBox\">\n <label for=\"message\">Request</label><br />\n <textarea\n id=\"message\"\n cols=\"80\"\n rows=\"8\"\n required\n placeholder=\"My shoes are too tight, and I have forgotten how to dance.\"></textarea>\n </div>\n <input type=\"submit\" value=\"Send Request\" />\n</form>\n```\n\nExample:\n```text\n<label for=\"emailAddress\">Email</label><br />\n<input\n id=\"emailAddress\"\n type=\"email\"\n placeholder=\"user@example.gov\"\n list=\"defaultEmails\"\n size=\"64\"\n maxlength=\"256\"\n multiple />\n\n<datalist id=\"defaultEmails\">\n <option value=\"jbond007@mi6.defence.gov.uk\"></option>\n <option value=\"jbourne@unknown.net\"></option>\n <option value=\"nfury@shield.org\"></option>\n <option value=\"tony@starkindustries.com\"></option>\n <option value=\"hulk@grrrrrrrr.arg\"></option>\n</datalist>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.758Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":144,"estimatedTokens":662}}344{"id":"doc-input_type_datetime_local_html_attribute_value_h-3fd965ef","source":"documentation","title":"<input type=\"datetime-local\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local","text":"Example:\n```text\n<label for=\"meeting-time\">Choose a time for your appointment:</label>\n\n<input\n type=\"datetime-local\"\n id=\"meeting-time\"\n name=\"meeting-time\"\n value=\"2018-06-12T19:30\"\n min=\"2018-06-07T00:00\"\n max=\"2018-06-14T00:00\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<label for=\"party\">Enter a date and time for your party booking:</label>\n<input\n id=\"party\"\n type=\"datetime-local\"\n name=\"party-date\"\n value=\"2017-06-01T08:30\" />\n```\n\nExample:\n```javascript\nconst dateControl = document.querySelector('input[type=\"datetime-local\"]');\ndateControl.value = \"2017-06-01T08:30\";\n```\n\nExample:\n```text\n<input type=\"hidden\" id=\"timezone\" name=\"timezone\" value=\"-08:00\" />\n```\n\nExample:\n```text\n<select name=\"timezone\" id=\"timezone\">\n <option value=\"Pacific/Kwajalein\">Eniwetok, Kwajalein</option>\n <option value=\"Pacific/Midway\">Midway Island, Samoa</option>\n <option value=\"Pacific/Honolulu\">Hawaii</option>\n <option value=\"Pacific/Marquesas\">Taiohae</option>\n <!-- and so on -->\n</select>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"party\">\n Choose your preferred party date and time (required, June 1st 8.30am to\n June 30th 4.30pm):\n </label>\n <input\n id=\"party\"\n type=\"datetime-local\"\n name=\"party-date\"\n min=\"2017-06-01T08:30\"\n max=\"2017-06-30T16:30\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" value=\"Book party!\" />\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n}\n\nlabel {\n display: inline-block;\n width: 300px;\n}\n\ninput:invalid + span::after {\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```text\n<form>\n <label for=\"party\">Enter a date and time for your party booking:</label>\n <input id=\"party\" type=\"datetime-local\" name=\"party-date\" />\n</form>\n```\n\nExample:\n```text\n<form>\n <label for=\"party\">Enter a date and time for your party booking:</label>\n <input\n id=\"party\"\n type=\"datetime-local\"\n name=\"party-date\"\n min=\"2025-06-01T08:30\"\n max=\"2025-06-30T16:30\" />\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.759Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":129,"estimatedTokens":573}}345{"id":"doc-input_type_month_html_attribute_value_html_mdn-4820b7a0","source":"documentation","title":"<input type=\"month\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/month","text":"Example:\n```text\n<label for=\"start\">Start month:</label>\n\n<input type=\"month\" id=\"start\" name=\"start\" min=\"2018-03\" value=\"2018-05\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<label for=\"bday-month\">What month were you born in?</label>\n<input id=\"bday-month\" type=\"month\" name=\"bday-month\" value=\"2001-06\" />\n```\n\nExample:\n```javascript\n<label for=\"bday-month\">What month were you born in?</label>\n<input id=\"bday-month\" type=\"month\" name=\"bday-month\" />\n```\n\nExample:\n```javascript\nconst monthControl = document.querySelector('input[type=\"month\"]');\nmonthControl.value = \"2001-06\";\n```\n\nExample:\n```text\n<form>\n <label for=\"bday-month\">What month were you born in?</label>\n <input id=\"bday-month\" type=\"month\" name=\"bday-month\" />\n</form>\n```\n\nExample:\n```text\n<form>\n <label for=\"bday-month\">What month were you born in?</label>\n <input\n id=\"bday-month\"\n type=\"month\"\n name=\"bday-month\"\n min=\"1900-01\"\n max=\"2013-12\" />\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"month\">\n What month would you like to visit (June to Sept.)?\n </label>\n <input\n id=\"month\"\n type=\"month\"\n name=\"month\"\n min=\"2022-06\"\n max=\"2022-09\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" value=\"Submit form\" />\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput[type=\"number\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"month\">\n What month would you like to visit (June to Sept.)?\n </label>\n <input\n id=\"month\"\n type=\"month\"\n name=\"month\"\n min=\"2022-06\"\n max=\"2022-09\"\n required\n pattern=\"[0-9]{4}-[0-9]{2}\" />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" value=\"Submit form\" />\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div class=\"nativeDatePicker\">\n <label for=\"month-visit\">What month would you like to visit us?</label>\n <input type=\"month\" id=\"month-visit\" name=\"month-visit\" />\n <span class=\"validity\"></span>\n </div>\n <p class=\"fallbackLabel\">What month would you like to visit us?</p>\n <div class=\"fallbackDatePicker\">\n <div>\n <span>\n <label for=\"month\">Month:</label>\n <select id=\"month\" name=\"month\">\n <option selected>January</option>\n <option>February</option>\n <option>March</option>\n <option>April</option>\n <option>May</option>\n <option>June</option>\n <option>July</option>\n <option>August</option>\n <option>September</option>\n <option>October</option>\n <option>November</option>\n <option>December</option>\n </select>\n </span>\n <span>\n <label for=\"year\">Year:</label>\n <select id=\"year\" name=\"year\"></select>\n </span>\n </div>\n </div>\n</form>\n```\n\nExample:\n```javascript\n// Get UI elements\nconst nativePicker = document.querySelector(\".nativeDatePicker\");\nconst fallbackPicker = document.querySelector(\".fallbackDatePicker\");\nconst fallbackLabel = document.querySelector(\".fallbackLabel\");\n\nconst yearSelect = document.querySelector(\"#year\");\nconst monthSelect = document.querySelector(\"#month\");\n\n// Hide fallback initially\nfallbackPicker.style.display = \"none\";\nfallbackLabel.style.display = \"none\";\n\n// Test whether a new date input falls back to a text input or not\nconst test = document.createElement(\"input\");\n\ntry {\n test.type = \"month\";\n} catch (e) {\n console.log(e.description);\n}\n\n// If it does, run the code inside the if () {} block\nif (test.type === \"text\") {\n // Hide the native picker and show the fallback\n nativePicker.style.display = \"none\";\n fallbackPicker.style.display = \"block\";\n fallbackLabel.style.display = \"block\";\n\n // Populate the years dynamically\n // (the months are always the same, therefore hardcoded)\n populateYears();\n}\n\nfunction populateYears() {\n // Get the current year as a number\n const date = new Date();\n const year = date.getFullYear();\n\n // Make this year, and the 100 years before it available in the year <select>\n for (let i = 0; i <= 100; i++) {\n const option = document.createElement(\"option\");\n option.textContent = year - i;\n yearSelect.appendChild(option);\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.760Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":221,"estimatedTokens":1162}}346{"id":"doc-input_type_range_html_attribute_value_html_mdn-66861afb","source":"documentation","title":"<input type=\"range\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range","text":"Example:\n```text\n<p>Audio settings:</p>\n\n<div>\n <input type=\"range\" id=\"volume\" name=\"volume\" min=\"0\" max=\"11\" />\n <label for=\"volume\">Volume</label>\n</div>\n\n<div>\n <input\n type=\"range\"\n id=\"cowbell\"\n name=\"cowbell\"\n min=\"0\"\n max=\"100\"\n value=\"90\"\n step=\"10\" />\n <label for=\"cowbell\">Cowbell</label>\n</div>\n```\n\nExample:\n```text\np,\nlabel {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput {\n margin: 0.4rem;\n}\n```\n\nExample:\n```javascript\ndefaultValue =\n rangeElem.max < rangeElem.min\n ? rangeElem.min\n : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;\n```\n\nExample:\n```text\n<input type=\"range\" min=\"-10\" max=\"10\" />\n```\n\nExample:\n```text\n<input type=\"range\" min=\"5\" max=\"10\" step=\"0.5\" />\n```\n\nExample:\n```text\n<input id=\"pi_input\" type=\"range\" min=\"0\" max=\"3.14\" step=\"any\" />\n<p>Value: <output id=\"value\"></output></p>\n```\n\nExample:\n```javascript\nconst value = document.querySelector(\"#value\");\nconst input = document.querySelector(\"#pi_input\");\nvalue.textContent = input.value;\ninput.addEventListener(\"input\", (event) => {\n value.textContent = event.target.value;\n});\n```\n\nExample:\n```text\n<label for=\"temp\">Choose a comfortable temperature:</label><br />\n<input type=\"range\" id=\"temp\" name=\"temp\" list=\"markers\" />\n\n<datalist id=\"markers\">\n <option value=\"0\"></option>\n <option value=\"25\"></option>\n <option value=\"50\"></option>\n <option value=\"75\"></option>\n <option value=\"100\"></option>\n</datalist>\n```\n\nExample:\n```text\n<p>\n <label for=\"temp1\">Temperature for room 1:</label>\n <input type=\"range\" id=\"temp1\" name=\"temp1\" list=\"values\" />\n</p>\n<p>\n <label for=\"temp2\">Temperature for room 2:</label>\n <input type=\"range\" id=\"temp2\" name=\"temp2\" list=\"values\" />\n</p>\n\n<p>\n <label for=\"temp3\">Temperature for room 3:</label>\n <input type=\"range\" id=\"temp3\" name=\"temp3\" list=\"values\" />\n</p>\n\n<datalist id=\"values\">\n <option value=\"0\" label=\"0\"></option>\n <option value=\"25\" label=\"25\"></option>\n <option value=\"50\" label=\"50\"></option>\n <option value=\"75\" label=\"75\"></option>\n <option value=\"100\" label=\"100\"></option>\n</datalist>\n```\n\nExample:\n```text\n<label for=\"tempB\">Choose a comfortable temperature:</label><br />\n<input type=\"range\" id=\"tempB\" name=\"temp\" list=\"values\" />\n\n<datalist id=\"values\">\n <option value=\"0\" label=\"very cold!\"></option>\n <option value=\"25\" label=\"cool\"></option>\n <option value=\"50\" label=\"medium\"></option>\n <option value=\"75\" label=\"getting warm!\"></option>\n <option value=\"100\" label=\"hot!\"></option>\n</datalist>\n```\n\nExample:\n```text\ndatalist {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n writing-mode: vertical-lr;\n width: 200px;\n}\n\noption {\n padding: 0;\n}\n\ninput[type=\"range\"] {\n width: 200px;\n margin: 0;\n}\n```\n\nExample:\n```text\n<input type=\"range\" min=\"0\" max=\"10\" value=\"8\" />\n```\n\nExample:\n```text\ninput[type=\"range\"] {\n writing-mode: vertical-lr;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.761Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":156,"estimatedTokens":731}}347{"id":"doc-input_type_reset_html_attribute_value_html_mdn-3dbd377a","source":"documentation","title":"<input type=\"reset\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/reset","text":"Example:\n```text\n<form>\n <div class=\"controls\">\n <label for=\"id\">User ID:</label>\n <input type=\"text\" id=\"id\" name=\"id\" />\n\n <input type=\"reset\" value=\"Reset\" />\n <input type=\"submit\" value=\"Submit\" />\n </div>\n</form>\n```\n\nExample:\n```text\n.controls {\n padding-top: 1rem;\n display: grid;\n grid-template-rows: repeat(3, 1fr);\n grid-template-columns: 1fr 2fr;\n gap: 0.7rem;\n}\n\nlabel {\n font-size: 0.8rem;\n justify-self: end;\n}\n\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n width: 5rem;\n justify-self: end;\n}\n\ninput[type=\"reset\"] {\n grid-column: 2;\n grid-row: 2;\n}\n\ninput[type=\"submit\"] {\n grid-column: 2;\n grid-row: 3;\n}\n```\n\nExample:\n```text\n<input type=\"reset\" value=\"Reset the form\" />\n```\n\nExample:\n```text\n<input type=\"reset\" />\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"example\">Type in some sample text</label>\n <input id=\"example\" type=\"text\" />\n </div>\n <div>\n <input type=\"reset\" value=\"Reset the form\" />\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"example\">Type in some sample text</label>\n <input id=\"example\" type=\"text\" />\n </div>\n <div>\n <input type=\"reset\" value=\"Reset the form\" accesskey=\"r\" />\n </div>\n</form>\n```\n\nExample:\n```text\n<input type=\"reset\" value=\"Disabled\" disabled />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.762Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":87,"estimatedTokens":325}}348{"id":"doc-input_type_hidden_html_attribute_value_html_mdn-6ed2dc44","source":"documentation","title":"<input type=\"hidden\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/hidden","text":"Example:\n```text\n<form>\n <div>\n <label for=\"title\">Post title:</label>\n <input type=\"text\" id=\"title\" name=\"title\" value=\"My excellent blog post\" />\n </div>\n <div>\n <label for=\"content\">Post content:</label>\n <textarea id=\"content\" name=\"content\" cols=\"60\" rows=\"5\">\nThis is the content of my excellent blog post. I hope you enjoy it!\n </textarea>\n </div>\n <div>\n <button type=\"submit\">Update post</button>\n </div>\n <input type=\"hidden\" id=\"postId\" name=\"postId\" value=\"34657\" />\n</form>\n```\n\nExample:\n```text\nhtml {\n font-family: sans-serif;\n}\n\nform {\n width: 500px;\n}\n\ndiv {\n display: flex;\n margin-bottom: 10px;\n}\n\nlabel {\n flex: 2;\n line-height: 2;\n text-align: right;\n padding-right: 20px;\n}\n\ninput,\ntextarea {\n flex: 7;\n font-family: sans-serif;\n font-size: 1.1rem;\n padding: 5px;\n}\n\ntextarea {\n height: 60px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.762Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":56,"estimatedTokens":219}}349{"id":"doc-input_type_file_html_attribute_value_html_mdn-35348c25","source":"documentation","title":"<input type=\"file\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file","text":"Example:\n```text\n<label for=\"avatar\">Choose a profile picture:</label>\n\n<input type=\"file\" id=\"avatar\" name=\"avatar\" accept=\"image/png, image/jpeg\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<input\n type=\"file\"\n id=\"docpicker\"\n accept=\".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\" />\n```\n\nExample:\n```text\n<input type=\"file\" accept=\"image/*,.pdf\" />\n```\n\nExample:\n```text\n<form method=\"post\" enctype=\"multipart/form-data\">\n <div>\n <label for=\"file\">Choose file to upload</label>\n <input type=\"file\" id=\"file\" name=\"file\" multiple />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n}\n```\n\nExample:\n```text\n<form method=\"post\" enctype=\"multipart/form-data\">\n <div>\n <label for=\"profile_pic\">Choose file to upload</label>\n <input\n type=\"file\"\n id=\"profile_pic\"\n name=\"profile_pic\"\n accept=\".jpg, .jpeg, .png\" />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```javascript\nconst elem = document.createElement(\"input\");\nelem.type = \"file\";\nelem.addEventListener(\"cancel\", () => {\n console.log(\"Cancelled.\");\n});\nelem.addEventListener(\"change\", () => {\n if (elem.files.length === 1) {\n console.log(\"File selected: \", elem.files[0]);\n }\n});\nelem.click();\n```\n\nExample:\n```javascript\nconst input = document.querySelector(\"input[type=file]\");\ninput.value = \"foo\";\n```\n\nExample:\n```text\n<form method=\"post\" enctype=\"multipart/form-data\">\n <div>\n <label for=\"image_uploads\">Choose images to upload (PNG, JPG)</label>\n <input\n type=\"file\"\n id=\"image_uploads\"\n name=\"image_uploads\"\n accept=\".jpg, .jpeg, .png\"\n multiple />\n </div>\n <div class=\"preview\">\n <p>No files currently selected for upload</p>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\nhtml {\n font-family: sans-serif;\n}\n\nform {\n background: #cccccc;\n margin: 0 auto;\n padding: 20px;\n border: 1px solid black;\n}\n\nform ol {\n padding-left: 0;\n}\n\nform li,\ndiv > p {\n background: #eeeeee;\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n list-style-type: none;\n border: 1px solid black;\n}\n\nform img {\n height: 64px;\n order: 1;\n}\n\nform p {\n line-height: 32px;\n padding-left: 10px;\n}\n\nform label,\nform button {\n background-color: #7f9ccb;\n padding: 5px 10px;\n border-radius: 5px;\n border: 1px ridge black;\n font-size: 0.8rem;\n height: auto;\n}\n\nform label:hover,\nform button:hover {\n background-color: #2d5ba3;\n color: white;\n}\n\nform label:active,\nform button:active {\n background-color: #0d3f8f;\n color: white;\n}\n```\n\nExample:\n```javascript\nconst input = document.querySelector(\"input\");\nconst preview = document.querySelector(\".preview\");\n\ninput.style.opacity = 0;\n```\n\nExample:\n```javascript\ninput.addEventListener(\"change\", updateImageDisplay);\n```\n\nExample:\n```javascript\nfunction updateImageDisplay() {\n while (preview.firstChild) {\n preview.removeChild(preview.firstChild);\n }\n\n const curFiles = input.files;\n if (curFiles.length === 0) {\n const para = document.createElement(\"p\");\n para.textContent = \"No files currently selected for upload\";\n preview.appendChild(para);\n } else {\n const list = document.createElement(\"ol\");\n preview.appendChild(list);\n\n for (const file of curFiles) {\n const listItem = document.createElement(\"li\");\n const para = document.createElement(\"p\");\n if (validFileType(file)) {\n para.textContent = `File name ${file.name}, file size ${returnFileSize(\n file.size,\n )}.`;\n const image = document.createElement(\"img\");\n image.src = URL.createObjectURL(file);\n image.alt = image.title = file.name;\n\n listItem.appendChild(image);\n listItem.appendChild(para);\n } else {\n para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;\n listItem.appendChild(para);\n }\n\n list.appendChild(listItem);\n }\n }\n}\n```\n\nExample:\n```javascript\n// https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types\nconst fileTypes = [\n \"image/apng\",\n \"image/bmp\",\n \"image/gif\",\n \"image/jpeg\",\n \"image/pjpeg\",\n \"image/png\",\n \"image/svg+xml\",\n \"image/tiff\",\n \"image/webp\",\n \"image/x-icon\",\n];\n\nfunction validFileType(file) {\n return fileTypes.includes(file.type);\n}\n```\n\nExample:\n```javascript\nfunction returnFileSize(number) {\n if (number < 1e3) {\n return `${number} bytes`;\n } else if (number >= 1e3 && number < 1e6) {\n return `${(number / 1e3).toFixed(1)} KB`;\n }\n return `${(number / 1e6).toFixed(1)} MB`;\n}\n```\n\nExample:\n```javascript\nconst button = document.querySelector(\"form button\");\nbutton.addEventListener(\"click\", (e) => {\n e.preventDefault();\n const para = document.createElement(\"p\");\n para.append(\"Image uploaded!\");\n preview.replaceChildren(para);\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.763Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":272,"estimatedTokens":1270}}350{"id":"doc-input_type_submit_html_attribute_value_html_mdn-c94c7f8b","source":"documentation","title":"<input type=\"submit\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/submit","text":"Example:\n```text\n<input type=\"submit\" value=\"Send Request\" />\n```\n\nExample:\n```text\n<input type=\"submit\" />\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"example\">Let's submit some text</label>\n <input id=\"example\" type=\"text\" name=\"text\" />\n </div>\n <div>\n <input type=\"submit\" value=\"Send\" />\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"example\">Let's submit some text</label>\n <input id=\"example\" type=\"text\" name=\"text\" />\n </div>\n <div>\n <input type=\"submit\" value=\"Send\" accesskey=\"s\" />\n </div>\n</form>\n```\n\nExample:\n```text\n<input type=\"submit\" value=\"Send\" disabled />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.764Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":42,"estimatedTokens":162}}351{"id":"doc-input_type_number_html_attribute_value_html_mdn-d29b83ff","source":"documentation","title":"<input type=\"number\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number","text":"Example:\n```text\n<label for=\"tentacles\">Number of tentacles (10-100):</label>\n\n<input type=\"number\" id=\"tentacles\" name=\"tentacles\" min=\"10\" max=\"100\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<input id=\"number\" type=\"number\" value=\"42\" />\n```\n\nExample:\n```text\n<input type=\"text\" inputmode=\"numeric\" pattern=\"\\d*\" />\n```\n\nExample:\n```text\n<label for=\"ticketNum\">Number of tickets you would like to buy:</label>\n<input id=\"ticketNum\" type=\"number\" name=\"ticketNum\" value=\"0\" />\n```\n\nExample:\n```text\n<input type=\"number\" placeholder=\"Multiple of 10\" />\n```\n\nExample:\n```text\n<input type=\"number\" placeholder=\"multiple of 10\" step=\"10\" />\n```\n\nExample:\n```text\n<input type=\"number\" placeholder=\"multiple of 10\" step=\"10\" min=\"0\" max=\"100\" />\n```\n\nExample:\n```text\n<input type=\"number\" placeholder=\"1.0\" step=\"0.01\" min=\"0\" max=\"10\" />\n```\n\nExample:\n```text\n<input\n type=\"number\"\n placeholder=\"x10\"\n step=\"10\"\n min=\"0\"\n max=\"100\"\n id=\"number\" />\n```\n\nExample:\n```text\n#number {\n width: 3em;\n}\n```\n\nExample:\n```text\n<input id=\"ticketNum\" type=\"number\" name=\"ticketNum\" list=\"defaultNumbers\" />\n<span class=\"validity\"></span>\n\n<datalist id=\"defaultNumbers\">\n <option value=\"10045678\"></option>\n <option value=\"103421\"></option>\n <option value=\"11111111\"></option>\n <option value=\"12345678\"></option>\n <option value=\"12999922\"></option>\n</datalist>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"balloons\">Number of balloons to order (multiples of 10):</label>\n <input\n id=\"balloons\"\n type=\"number\"\n name=\"balloons\"\n step=\"10\"\n min=\"0\"\n max=\"100\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" />\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n}\n\ninput:invalid + span::after {\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```text\n<form>\n <div class=\"metersInputGroup\">\n <label for=\"meters\">Enter your height โ meters:</label>\n <input\n id=\"meters\"\n type=\"number\"\n name=\"meters\"\n step=\"0.01\"\n min=\"0\"\n placeholder=\"e.g. 1.78\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div class=\"feetInputGroup\">\n <span>Enter your height โ </span>\n <label for=\"feet\">feet:</label>\n <input id=\"feet\" type=\"number\" name=\"feet\" min=\"0\" step=\"1\" />\n <span class=\"validity\"></span>\n <label for=\"inches\">inches:</label>\n <input id=\"inches\" type=\"number\" name=\"inches\" min=\"0\" max=\"11\" step=\"1\" />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input\n type=\"button\"\n class=\"meters\"\n value=\"Enter height in feet and inches\" />\n </div>\n <div>\n <input type=\"submit\" value=\"Submit form\" />\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput[type=\"number\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```javascript\nconst metersInputGroup = document.querySelector(\".metersInputGroup\");\nconst feetInputGroup = document.querySelector(\".feetInputGroup\");\nconst metersInput = document.querySelector(\"#meters\");\nconst feetInput = document.querySelector(\"#feet\");\nconst inchesInput = document.querySelector(\"#inches\");\nconst switchBtn = document.querySelector('input[type=\"button\"]');\n\nfeetInputGroup.style.display = \"none\"; // Hide feet/inches inputs initially\n\nswitchBtn.addEventListener(\"click\", () => {\n if (switchBtn.getAttribute(\"class\") === \"meters\") {\n switchBtn.setAttribute(\"class\", \"feet\");\n switchBtn.value = \"Enter height in meters\";\n\n metersInputGroup.style.display = \"none\";\n feetInputGroup.style.display = \"block\";\n\n feetInput.setAttribute(\"required\", \"\");\n inchesInput.setAttribute(\"required\", \"\");\n metersInput.removeAttribute(\"required\");\n\n metersInput.value = \"\";\n } else {\n switchBtn.setAttribute(\"class\", \"meters\");\n switchBtn.value = \"Enter height in feet and inches\";\n\n metersInputGroup.style.display = \"block\";\n feetInputGroup.style.display = \"none\";\n\n feetInput.removeAttribute(\"required\");\n inchesInput.removeAttribute(\"required\");\n metersInput.setAttribute(\"required\", \"\");\n\n feetInput.value = \"\";\n inchesInput.value = \"\";\n }\n});\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.766Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":234,"estimatedTokens":1142}}352{"id":"doc-input_type_radio_html_attribute_value_html_mdn-c3ad9dbf","source":"documentation","title":"<input type=\"radio\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio","text":"Example:\n```text\n<fieldset>\n <legend>Select a maintenance drone:</legend>\n\n <div>\n <input type=\"radio\" id=\"huey\" name=\"drone\" value=\"huey\" checked />\n <label for=\"huey\">Huey</label>\n </div>\n\n <div>\n <input type=\"radio\" id=\"dewey\" name=\"drone\" value=\"dewey\" />\n <label for=\"dewey\">Dewey</label>\n </div>\n\n <div>\n <input type=\"radio\" id=\"louie\" name=\"drone\" value=\"louie\" />\n <label for=\"louie\">Louie</label>\n </div>\n</fieldset>\n```\n\nExample:\n```text\np,\nlabel {\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput {\n margin: 0.4rem;\n}\n```\n\nExample:\n```text\n<form>\n <fieldset>\n <legend>Please select your preferred contact method:</legend>\n <div>\n <input type=\"radio\" id=\"contactChoice1\" name=\"contact\" value=\"email\" />\n <label for=\"contactChoice1\">Email</label>\n\n <input type=\"radio\" id=\"contactChoice2\" name=\"contact\" value=\"phone\" />\n <label for=\"contactChoice2\">Phone</label>\n\n <input type=\"radio\" id=\"contactChoice3\" name=\"contact\" value=\"mail\" />\n <label for=\"contactChoice3\">Mail</label>\n </div>\n <div>\n <button type=\"submit\">Submit</button>\n </div>\n </fieldset>\n</form>\n```\n\nExample:\n```text\n<form>\n <fieldset>\n <legend>Please select your preferred contact method:</legend>\n <div>\n <input type=\"radio\" id=\"contactChoice1\" name=\"contact\" value=\"email\" />\n <label for=\"contactChoice1\">Email</label>\n <input type=\"radio\" id=\"contactChoice2\" name=\"contact\" value=\"phone\" />\n <label for=\"contactChoice2\">Phone</label>\n <input type=\"radio\" id=\"contactChoice3\" name=\"contact\" value=\"mail\" />\n <label for=\"contactChoice3\">Mail</label>\n </div>\n <div>\n <button type=\"submit\">Submit</button>\n </div>\n </fieldset>\n</form>\n<pre id=\"log\"></pre>\n```\n\nExample:\n```javascript\nconst form = document.querySelector(\"form\");\nconst log = document.querySelector(\"#log\");\n\nform.addEventListener(\"submit\", (event) => {\n const data = new FormData(form);\n let output = \"\";\n for (const entry of data) {\n output = `${output}${entry[0]}=${entry[1]}\\r`;\n }\n log.innerText = output;\n event.preventDefault();\n});\n```\n\nExample:\n```text\n<form>\n <fieldset>\n <legend>Please select your preferred contact method:</legend>\n <div>\n <input\n type=\"radio\"\n id=\"contactChoice1\"\n name=\"contact\"\n value=\"email\"\n checked />\n <label for=\"contactChoice1\">Email</label>\n\n <input type=\"radio\" id=\"contactChoice2\" name=\"contact\" value=\"phone\" />\n <label for=\"contactChoice2\">Phone</label>\n\n <input type=\"radio\" id=\"contactChoice3\" name=\"contact\" value=\"mail\" />\n <label for=\"contactChoice3\">Mail</label>\n </div>\n <div>\n <button type=\"submit\">Submit</button>\n </div>\n </fieldset>\n</form>\n```\n\nExample:\n```typescript\nhtml {\n font-family: sans-serif;\n}\n\ndiv:first-of-type {\n display: flex;\n align-items: flex-start;\n margin-bottom: 5px;\n}\n\nlabel {\n margin-right: 15px;\n line-height: 32px;\n}\n\ninput {\n appearance: none;\n\n border-radius: 50%;\n width: 16px;\n height: 16px;\n\n border: 2px solid #999999;\n transition: 0.2s all linear;\n margin-right: 5px;\n\n position: relative;\n top: 4px;\n}\n\ninput:checked {\n border: 6px solid black;\n}\n\nbutton,\nlegend {\n color: white;\n background-color: black;\n padding: 5px 10px;\n border-radius: 0;\n border: 0;\n font-size: 14px;\n}\n\nbutton:hover,\nbutton:focus {\n color: #999999;\n}\n\nbutton:active {\n background-color: white;\n color: black;\n outline: 1px solid black;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.767Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":181,"estimatedTokens":879}}353{"id":"doc-input_type_image_html_attribute_value_html_mdn-a8b03f6c","source":"documentation","title":"<input type=\"image\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/image","text":"Example:\n```text\n<p>Sign in to your account:</p>\n\n<div>\n <label for=\"userId\">User ID</label>\n <input type=\"text\" id=\"userId\" name=\"userId\" />\n</div>\n\n<input\n type=\"image\"\n id=\"image\"\n alt=\"Login\"\n src=\"/shared-assets/images/examples/login-button.png\" />\n```\n\nExample:\n```text\nlabel {\n font-size: 0.8rem;\n}\n\nlabel,\ninput[type=\"image\"] {\n margin-top: 1rem;\n}\n\ninput[type=\"image\"] {\n width: 80px;\n}\n```\n\nExample:\n```text\n<input\n id=\"image\"\n type=\"image\"\n width=\"100\"\n height=\"30\"\n alt=\"Login\"\n src=\"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png\" />\n```\n\nExample:\n```text\n<form>\n <p>Login to your account</p>\n <div>\n <label for=\"userId\">User ID</label>\n <input type=\"text\" id=\"userId\" name=\"userId\" />\n </div>\n <div>\n <label for=\"pwd\">Password</label>\n <input type=\"password\" id=\"pwd\" name=\"pwd\" />\n </div>\n <div>\n <input\n id=\"image\"\n type=\"image\"\n src=\"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png\"\n alt=\"Login\"\n width=\"100\" />\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n}\n\nlabel {\n display: inline-block;\n width: 70px;\n text-align: right;\n padding-right: 10px;\n}\n```\n\nExample:\n```text\n<form>\n <p>Login to your account</p>\n <div>\n <label for=\"userId\">User ID</label>\n <input type=\"text\" id=\"userId\" name=\"userId\" />\n </div>\n <div>\n <label for=\"pwd\">Password</label>\n <input type=\"password\" id=\"pwd\" name=\"pwd\" />\n </div>\n <div>\n <input\n id=\"image\"\n type=\"image\"\n src=\"https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png\"\n alt=\"Login\"\n width=\"200\"\n height=\"100\" />\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n}\n\nlabel {\n display: inline-block;\n width: 70px;\n text-align: right;\n padding-right: 10px;\n}\n\n#image {\n object-position: right top;\n object-fit: contain;\n background-color: #dddddd;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.768Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":125,"estimatedTokens":508}}354{"id":"doc-input_type_password_html_attribute_value_html_md-e65b7be1","source":"documentation","title":"<input type=\"password\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/password","text":"Example:\n```text\n<div>\n <label for=\"username\">Username:</label>\n <input type=\"text\" id=\"username\" name=\"username\" />\n</div>\n\n<div>\n <label for=\"pass\">Password (8 characters minimum):</label>\n <input type=\"password\" id=\"pass\" name=\"password\" minlength=\"8\" required />\n</div>\n\n<input type=\"submit\" value=\"Sign in\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n}\n\ninput[type=\"submit\"],\nlabel {\n margin-top: 1rem;\n}\n```\n\nExample:\n```text\n<label for=\"userPassword\">Password: </label>\n<input id=\"userPassword\" type=\"password\" />\n```\n\nExample:\n```text\n<label for=\"userPassword\">Password:</label>\n<input id=\"userPassword\" type=\"password\" autocomplete=\"current-password\" />\n```\n\nExample:\n```text\n<label for=\"userPassword\">Password: </label>\n<input id=\"userPassword\" type=\"password\" required />\n<input type=\"submit\" value=\"Submit\" />\n```\n\nExample:\n```text\n<label for=\"pin\">PIN: </label>\n<input id=\"pin\" type=\"password\" inputmode=\"numeric\" />\n```\n\nExample:\n```typescript\n<label for=\"pin\">PIN:</label>\n<input\n id=\"pin\"\n type=\"password\"\n inputmode=\"numeric\"\n minlength=\"4\"\n maxlength=\"8\"\n size=\"8\" />\n```\n\nExample:\n```text\n<label for=\"userPassword\">Password: </label>\n<input id=\"userPassword\" type=\"password\" size=\"12\" />\n<button id=\"selectAll\">Select All</button>\n```\n\nExample:\n```javascript\ndocument.getElementById(\"selectAll\").onclick = () => {\n document.getElementById(\"userPassword\").select();\n};\n```\n\nExample:\n```text\n<label for=\"hexId\">Hex ID: </label>\n<input\n id=\"hexId\"\n type=\"password\"\n pattern=\"[0-9a-fA-F]{4,8}\"\n title=\"Enter an ID consisting of 4-8 hexadecimal digits\"\n autocomplete=\"new-password\" />\n```\n\nExample:\n```text\n<label for=\"ssn\">SSN:</label>\n<input\n type=\"password\"\n id=\"ssn\"\n inputmode=\"numeric\"\n minlength=\"9\"\n maxlength=\"12\"\n pattern=\"(?!000)([0-6]\\d{2}|7([0-6]\\d|7[012]))([ -])?(?!00)\\d\\d\\3(?!0000)\\d{4}\"\n required\n autocomplete=\"off\" />\n<br />\n<label for=\"ssn\">Value:</label>\n<span id=\"current\"></span>\n```\n\nExample:\n```javascript\nconst ssn = document.getElementById(\"ssn\");\nconst current = document.getElementById(\"current\");\n\nssn.oninput = (event) => {\n current.textContent = ssn.value;\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.768Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":117,"estimatedTokens":539}}355{"id":"doc-meta_name_color_scheme_html_attribute_value_html-d14936d5","source":"documentation","title":"<meta name=\"color-scheme\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/color-scheme","text":"Example:\n```text\n<meta name=\"color-scheme\" content=\"dark light\" />\n```\n\nExample:\n```text\n<meta name=\"color-scheme\" content=\"light dark\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.769Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":39}}356{"id":"doc-input_type_tel_html_attribute_value_html_mdn-ce84e966","source":"documentation","title":"<input type=\"tel\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/tel","text":"Example:\n```text\n<label for=\"phone\">\n Enter your phone number:<br />\n <small>Format: 123-456-7890</small>\n</label>\n\n<input\n type=\"tel\"\n id=\"phone\"\n name=\"phone\"\n pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\"\n required />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<label for=\"telNo\">Phone number:</label>\n<input id=\"telNo\" name=\"telNo\" type=\"tel\" />\n```\n\nExample:\n```text\n<input id=\"telNo\" name=\"telNo\" type=\"tel\" placeholder=\"123-4567-8901\" />\n```\n\nExample:\n```text\n<input id=\"telNo\" name=\"telNo\" type=\"tel\" size=\"20\" />\n```\n\nExample:\n```text\n<input\n id=\"telNo\"\n name=\"telNo\"\n type=\"tel\"\n size=\"20\"\n minlength=\"9\"\n maxlength=\"14\" />\n```\n\nExample:\n```text\n<input id=\"telNo\" name=\"telNo\" type=\"tel\" value=\"333-4444-4444\" />\n```\n\nExample:\n```text\n<label for=\"telNo\">Phone number: </label>\n<input id=\"telNo\" name=\"telNo\" type=\"tel\" list=\"defaultTels\" />\n\n<datalist id=\"defaultTels\">\n <option value=\"111-1111-1111\"></option>\n <option value=\"122-2222-2222\"></option>\n <option value=\"333-3333-3333\"></option>\n <option value=\"344-4444-4444\"></option>\n</datalist>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"telNo\">Enter a telephone number (required): </label>\n <input id=\"telNo\" name=\"telNo\" type=\"tel\" required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput[type=\"number\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n color: darkred;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n color: #009000;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"telNo\">\n Enter a telephone number (in the form xxx-xxx-xxxx):\n </label>\n <input\n id=\"telNo\"\n name=\"telNo\"\n type=\"tel\"\n required\n pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\" />\n <span class=\"validity\"></span>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"country\">Choose your country:</label>\n <select id=\"country\" name=\"country\">\n <option>UK</option>\n <option selected>US</option>\n <option>Germany</option>\n </select>\n </div>\n <div>\n <p>Enter your telephone number:</p>\n <span class=\"areaDiv\">\n <input\n id=\"areaNo\"\n name=\"areaNo\"\n type=\"tel\"\n required\n placeholder=\"Area code\"\n pattern=\"[0-9]{3}\"\n aria-label=\"Area code\" />\n <span class=\"validity\"></span>\n </span>\n <span class=\"number1Div\">\n <input\n id=\"number1\"\n name=\"number1\"\n type=\"tel\"\n required\n placeholder=\"First part\"\n pattern=\"[0-9]{3}\"\n aria-label=\"First part of number\" />\n <span class=\"validity\"></span>\n </span>\n <span class=\"number2Div\">\n <input\n id=\"number2\"\n name=\"number2\"\n type=\"tel\"\n required\n placeholder=\"Second part\"\n pattern=\"[0-9]{4}\"\n aria-label=\"Second part of number\" />\n <span class=\"validity\"></span>\n </span>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```javascript\nconst selectElem = document.querySelector(\"select\");\nconst inputElems = document.querySelectorAll(\"input\");\n\nselectElem.onchange = () => {\n for (const e of inputElems) {\n e.value = \"\";\n }\n\n if (selectElem.value === \"US\") {\n inputElems[2].parentNode.style.display = \"inline\";\n\n inputElems[0].placeholder = \"Area code\";\n inputElems[0].pattern = \"[0-9]{3}\";\n\n inputElems[1].placeholder = \"First part\";\n inputElems[1].pattern = \"[0-9]{3}\";\n inputElems[1].setAttribute(\"aria-label\", \"First part of number\");\n\n inputElems[2].placeholder = \"Second part\";\n inputElems[2].pattern = \"[0-9]{4}\";\n inputElems[2].setAttribute(\"aria-label\", \"Second part of number\");\n } else if (selectElem.value === \"UK\") {\n inputElems[2].parentNode.style.display = \"none\";\n\n inputElems[0].placeholder = \"Area code\";\n inputElems[0].pattern = \"[0-9]{3,6}\";\n\n inputElems[1].placeholder = \"Local number\";\n inputElems[1].pattern = \"[0-9]{4,8}\";\n inputElems[1].setAttribute(\"aria-label\", \"Local number\");\n } else if (selectElem.value === \"Germany\") {\n inputElems[2].parentNode.style.display = \"inline\";\n\n inputElems[0].placeholder = \"Area code\";\n inputElems[0].pattern = \"[0-9]{3,5}\";\n\n inputElems[1].placeholder = \"First part\";\n inputElems[1].pattern = \"[0-9]{2,4}\";\n inputElems[1].setAttribute(\"aria-label\", \"First part of number\");\n\n inputElems[2].placeholder = \"Second part\";\n inputElems[2].pattern = \"[0-9]{4}\";\n inputElems[2].setAttribute(\"aria-label\", \"Second part of number\");\n }\n};\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.770Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":243,"estimatedTokens":1231}}357{"id":"doc-input_type_time_html_attribute_value_html_mdn-163b0875","source":"documentation","title":"<input type=\"time\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time","text":"Example:\n```text\n<label for=\"appointment\">Choose a time for your meeting:</label>\n\n<input\n type=\"time\"\n id=\"appointment\"\n name=\"appointment\"\n min=\"09:00\"\n max=\"18:00\"\n required />\n\n<small>Office hours are 9am to 6pm</small>\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<form>\n <label for=\"appointment-time\">Choose an appointment time: </label>\n <input id=\"appointment-time\" type=\"time\" name=\"appointment-time\" />\n</form>\n```\n\nExample:\n```text\n<form>\n <label for=\"appointment-time\">\n Choose an appointment time (opening hours 12:00 to 18:00):\n </label>\n <input\n id=\"appointment-time\"\n type=\"time\"\n name=\"appointment-time\"\n min=\"12:00\"\n max=\"18:00\"\n required />\n <span class=\"validity\"></span>\n</form>\n```\n\nExample:\n```text\ninput[type=\"time\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```text\n<label for=\"appointment-time\">Choose an appointment time: </label>\n<input\n id=\"appointment-time\"\n type=\"time\"\n name=\"appointment-time\"\n value=\"13:30\" />\n```\n\nExample:\n```javascript\nconst timeControl = document.querySelector('input[type=\"time\"]');\ntimeControl.value = \"15:30\";\n```\n\nExample:\n```text\n<form>\n <label for=\"startTime\">Start time: </label>\n <input type=\"time\" id=\"startTime\" />\n <p>\n Value of the <code>time</code> input:\n <code>\"<span id=\"value\">n/a</span>\"</code>.\n </p>\n</form>\n```\n\nExample:\n```javascript\nconst startTime = document.getElementById(\"startTime\");\nconst valueSpan = document.getElementById(\"value\");\n\nstartTime.addEventListener(\"input\", () => {\n valueSpan.innerText = startTime.value;\n});\n```\n\nExample:\n```text\n<form>\n <label for=\"appointment-time\">Choose an appointment time: </label>\n <input id=\"appointment-time\" type=\"time\" name=\"appointment-time\" step=\"2\" />\n</form>\n```\n\nExample:\n```text\n<form>\n <label for=\"appointment-time\">\n Choose an appointment time (opening hours 12:00 to 18:00):\n </label>\n <input\n id=\"appointment-time\"\n type=\"time\"\n name=\"appointment-time\"\n min=\"12:00\"\n max=\"18:00\" />\n <span class=\"validity\"></span>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput[type=\"number\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```javascript\nconst input = document.createElement(\"input\");\ninput.type = \"time\";\ninput.min = \"23:00\";\ninput.max = \"01:00\";\ninput.value = \"23:59\";\n\nif (input.validity.valid && input.type === \"time\") {\n // <input type=time> reversed range supported\n} else {\n // <input type=time> reversed range unsupported\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"appointment-time\">\n Choose an appointment time (opening hours 12:00 to 18:00):\n </label>\n <input\n id=\"appointment-time\"\n type=\"time\"\n name=\"appointment-time\"\n min=\"12:00\"\n max=\"18:00\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" value=\"Submit form\" />\n </div>\n</form>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.771Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":206,"estimatedTokens":862}}358{"id":"doc-script_type_speculationrules_html_attribute_valu-d12a6619","source":"documentation","title":"<script type=\"speculationrules\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/speculationrules","text":"Example:\n```text\n<script type=\"speculationrules\">\n // JSON object defining rules\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n \"urls\": [\"next.html\", \"next2.html\"],\n \"requires\": [\"anonymous-client-ip-when-cross-origin\"],\n \"referrer_policy\": \"no-referrer\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prerender\": [\n {\n \"where\": { \"href_matches\": \"/next\" },\n \"eagerness\": \"eager\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n \"urls\": [\"next.html\", \"next2.html\"],\n \"requires\": [\"anonymous-client-ip-when-cross-origin\"],\n \"referrer_policy\": \"no-referrer\"\n }\n ],\n \"prerender\": [\n {\n \"where\": { \"selector_matches\": \".product-link\" },\n \"eagerness\": \"eager\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n \"urls\": [\"next.html\", \"next2.html\"],\n \"requires\": [\"anonymous-client-ip-when-cross-origin\"],\n \"referrer_policy\": \"no-referrer\"\n }\n ]\n }\n</script>\n<script type=\"speculationrules\">\n {\n \"prerender\": [\n {\n \"where\": { \"selector_matches\": \".product-link\" },\n \"eagerness\": \"eager\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prerender\": [\n {\n \"urls\": [\"one.html\"]\n },\n {\n \"urls\": [\"two.html\"]\n }\n ]\n }\n</script>\n```\n\nExample:\n```javascript\nif (\n HTMLScriptElement.supports &&\n HTMLScriptElement.supports(\"speculationrules\")\n) {\n const specScript = document.createElement(\"script\");\n specScript.type = \"speculationrules\";\n const specRules = {\n prerender: [\n {\n urls: [\"/next.html\"],\n },\n ],\n };\n specScript.textContent = JSON.stringify(specRules);\n console.log(\"added speculation rules to: next.html\");\n document.body.append(specScript);\n}\n```\n\nExample:\n```json\n{ \"where\": { \"href_matches\": \"/next\" } }\n```\n\nExample:\n```json\n{ \"where\": { \"selector_matches\": \".important-link\" } }\n```\n\nExample:\n```json\n{ \"where\": { \"href_matches\": [\"/next\", \"/profile\"] } }\n```\n\nExample:\n```json\n{ \"where\": { \"selector_matches\": [\".important-link\", \"#unique-link\"] } }\n```\n\nExample:\n```json\n{ \"where\": { \"href_matches\": \"/user/*\" } }\n```\n\nExample:\n```json\n{ \"where\": { \"href_matches\": \"/*\\\\?*(^|&)category=*\" } }\n```\n\nExample:\n```json\n{ \"where\": { \"not\": { \"href_matches\": \"/logout\" } } }\n```\n\nExample:\n```text\n{ and: [A, B, { or: [C, { not: D }] }] }\n```\n\nExample:\n```text\nif (A && B && (C || !D)) {\n apply speculation rule\n}\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n \"where\": {\n \"and\": [\n { \"href_matches\": \"/*\" },\n { \"not\": { \"href_matches\": \"/logout\" } },\n { \"not\": { \"selector_matches\": \".no-prerender\" } }\n ]\n }\n }\n ]\n }\n</script>\n```\n\nExample:\n```json\n{\n \"urls\": [\"/home\", \"/about\"],\n \"relative_to\": \"document\"\n}\n```\n\nExample:\n```json\n{\n \"where\": {\n \"or\": [\n { \"href_matches\": \"/home\", \"relative_to\": \"document\" },\n { \"href_matches\": \"/about\" }\n ]\n }\n}\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n \"urls\": [\"/users\"]\n }\n ]\n }\n</script>\n<a href=\"/users?id=345\">User Bob</a>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n \"urls\": [\"/users\"],\n \"expects_no_vary_search\": \"params=(\\\"id\\\")\"\n }\n ]\n }\n</script>\n<a href=\"/users?id=345\">User Bob</a>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n { \"where\": { \"href_matches\": \"/users?id=*\" } },\n \"expects_no_vary_search\": \"params=(\\\"id\\\")\"\n }\n ]\n }\n</script>\n<a href=\"/users?id=012\">User Bill</a>\n<a href=\"/users?id=345\">User Bob</a>\n<a href=\"/users?id=678\">User Ben</a>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n {\n { \"where\": { \"href_matches\": \"/users?id=*\" } },\n \"expects_no_vary_search\": \"params=(\\\"id\\\" \\\"order\\\" \\\"lang\\\")\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prerender\": [\n {\n \"where\": { \"href_matches\": \"/*\" },\n \"eagerness\": \"conservative\"\n },\n {\n \"where\": { \"selector_matches\": \".product-link\" },\n \"eagerness\": \"eager\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"tag\": \"my-rules\",\n \"prerender\": [\n {\n \"where\": { \"href_matches\": \"/*\" },\n \"eagerness\": \"conservative\"\n }\n ]\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"prefetch\": [\n \"tag\": \"my-prefetch-rule\",\n \"urls\": [\"next.html\"]\n ],\n \"prerender\": [\n \"tag\": \"my-prerender-rule\",\n \"urls\": [\"next2.html\"]\n ],\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"speculationrules\">\n {\n \"tag\": \"my-rules\",\n \"prerender\": [\n {\n \"eagerness\": \"eager\",\n \"target_hint\": \"_blank\",\n \"urls\": [\"page2.html\"]\n }\n ]\n }\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.773Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":27,"totalLines":331,"estimatedTokens":1314}}359{"id":"doc-input_type_week_html_attribute_value_html_mdn-460e3ebf","source":"documentation","title":"<input type=\"week\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/week","text":"Example:\n```text\n<label for=\"camp-week\">Choose a week in May or June:</label>\n\n<input\n type=\"week\"\n name=\"week\"\n id=\"camp-week\"\n min=\"2018-W18\"\n max=\"2018-W26\"\n required />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<label for=\"week\">What week would you like to start?</label>\n<input id=\"week\" type=\"week\" name=\"week\" value=\"2017-W01\" />\n```\n\nExample:\n```javascript\nconst weekControl = document.querySelector('input[type=\"week\"]');\nweekControl.value = \"2017-W45\";\n```\n\nExample:\n```text\n<form>\n <label for=\"week\">What week would you like to start?</label>\n <input id=\"week\" type=\"week\" name=\"week\" />\n</form>\n```\n\nExample:\n```text\n<form>\n <label for=\"week\">What week would you like to start?</label>\n <input id=\"week\" type=\"week\" name=\"week\" min=\"2017-W01\" max=\"2017-W52\" />\n <span class=\"validity\"></span>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput[type=\"number\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"week\">What week would you like to start?</label>\n <input\n id=\"week\"\n type=\"week\"\n name=\"week\"\n min=\"2017-W01\"\n max=\"2017-W52\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" value=\"Submit form\" />\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div class=\"nativeWeekPicker\">\n <label for=\"week\">What week would you like to start?</label>\n <input\n id=\"week\"\n type=\"week\"\n name=\"week\"\n min=\"2017-W01\"\n max=\"2018-W52\"\n required />\n <span class=\"validity\"></span>\n </div>\n <p class=\"fallbackLabel\">What week would you like to start?</p>\n <div class=\"fallbackWeekPicker\">\n <div>\n <span>\n <label for=\"week\">Week:</label>\n <select id=\"fallbackWeek\" name=\"week\"></select>\n </span>\n <span>\n <label for=\"year\">Year:</label>\n <select id=\"year\" name=\"year\">\n <option value=\"2017\" selected>2017</option>\n <option value=\"2018\">2018</option>\n </select>\n </span>\n </div>\n </div>\n</form>\n```\n\nExample:\n```javascript\n// Get UI elements\nconst nativePicker = document.querySelector(\".nativeWeekPicker\");\nconst fallbackPicker = document.querySelector(\".fallbackWeekPicker\");\nconst fallbackLabel = document.querySelector(\".fallbackLabel\");\n\nconst yearSelect = document.querySelector(\"#year\");\nconst weekSelect = document.querySelector(\"#fallbackWeek\");\n\n// Hide fallback initially\nfallbackPicker.style.display = \"none\";\nfallbackLabel.style.display = \"none\";\n\n// Test whether a new date input falls back to a text input or not\nconst test = document.createElement(\"input\");\n\ntry {\n test.type = \"week\";\n} catch (e) {\n console.log(e.description);\n}\n\n// If it does, run the code inside the if () {} block\nif (test.type === \"text\") {\n // Hide the native picker and show the fallback\n nativePicker.style.display = \"none\";\n fallbackPicker.style.display = \"block\";\n fallbackLabel.style.display = \"block\";\n\n // populate the weeks dynamically\n populateWeeks();\n}\n\nfunction populateWeeks() {\n // Populate the week select with 52 weeks\n for (let i = 1; i <= 52; i++) {\n const option = document.createElement(\"option\");\n option.textContent = i < 10 ? `0${i}` : i;\n weekSelect.appendChild(option);\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.774Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":183,"estimatedTokens":908}}360{"id":"doc-input_type_text_html_attribute_value_html_mdn-04d12b47","source":"documentation","title":"<input type=\"text\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/text","text":"Example:\n```text\n<label for=\"name\">Name (4 to 8 characters):</label>\n\n<input\n type=\"text\"\n id=\"name\"\n name=\"name\"\n required\n minlength=\"4\"\n maxlength=\"8\"\n size=\"10\" />\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```javascript\nlet theText = myTextInput.value;\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input type=\"text\" id=\"uname\" name=\"name\" />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input\n type=\"text\"\n id=\"uname\"\n name=\"name\"\n placeholder=\"Lower case, all one word\" />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input\n type=\"text\"\n id=\"uname\"\n name=\"name\"\n placeholder=\"Lower case, all one word\"\n size=\"30\" />\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input type=\"text\" id=\"uname\" name=\"name\" required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input\n type=\"text\"\n id=\"uname\"\n name=\"name\"\n required\n size=\"10\"\n placeholder=\"Username\"\n minlength=\"4\"\n maxlength=\"8\" />\n <span class=\"validity\"></span>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\n<form>\n <div>\n <label for=\"uname\">Choose a username: </label>\n <input\n type=\"text\"\n id=\"uname\"\n name=\"name\"\n required\n size=\"45\"\n pattern=\"[a-z]{4,8}\" />\n <span class=\"validity\"></span>\n <p>Usernames must be lowercase and 4-8 characters in length.</p>\n </div>\n <div>\n <button>Submit</button>\n </div>\n</form>\n```\n\nExample:\n```text\ndiv {\n margin-bottom: 10px;\n position: relative;\n}\n\np {\n font-size: 80%;\n color: #999999;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"โ\";\n padding-left: 5px;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.774Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":193,"estimatedTokens":685}}361{"id":"doc-meta_name_referrer_html_attribute_value_html_mdn-5a6ff5ec","source":"documentation","title":"<meta name=\"referrer\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/referrer","text":"Example:\n```text\n<meta name=\"referrer\" content=\"origin\" />\n```\n\nExample:\n```text\n<meta name=\"referrer\" content=\"no-referrer\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.775Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":37}}362{"id":"doc-rel_me_html_attribute_value_html_mdn-598744a6","source":"documentation","title":"rel=\"me\" HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/me","text":"Example:\n```text\n<link rel=\"me\" href=\"example.com\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.776Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":18}}363{"id":"doc-input_type_url_html_attribute_value_html_mdn-3c911a6d","source":"documentation","title":"<input type=\"url\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/url","text":"Example:\n```text\n<form>\n <label for=\"url\">Enter an https:// URL:</label>\n <input\n type=\"url\"\n name=\"url\"\n id=\"url\"\n placeholder=\"https://example.com\"\n pattern=\"https://.*\"\n size=\"30\"\n required />\n</form>\n```\n\nExample:\n```text\nlabel {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n```\n\nExample:\n```text\n<input id=\"myURL\" name=\"myURL\" type=\"url\" />\n```\n\nExample:\n```text\n<input\n id=\"myURL\"\n name=\"myURL\"\n type=\"url\"\n placeholder=\"http://www.example.com\" />\n```\n\nExample:\n```text\n<input id=\"myURL\" name=\"myURL\" type=\"url\" size=\"30\" />\n```\n\nExample:\n```text\n<input\n id=\"myURL\"\n name=\"myURL\"\n type=\"url\"\n size=\"30\"\n minlength=\"10\"\n maxlength=\"80\" />\n```\n\nExample:\n```text\n<input id=\"myURL\" name=\"myURL\" type=\"url\" value=\"http://www.example.com\" />\n```\n\nExample:\n```text\n<input id=\"myURL\" name=\"myURL\" type=\"url\" list=\"defaultURLs\" />\n\n<datalist id=\"defaultURLs\">\n <option value=\"https://developer.mozilla.org/\"></option>\n <option value=\"http://www.google.com/\"></option>\n <option value=\"http://www.microsoft.com/\"></option>\n <option value=\"https://www.mozilla.org/\"></option>\n <option value=\"http://w3.org/\"></option>\n</datalist>\n```\n\nExample:\n```text\n<input id=\"myURL\" name=\"myURL\" type=\"url\" list=\"defaultURLs\" />\n\n<datalist id=\"defaultURLs\">\n <option value=\"https://developer.mozilla.org/\" label=\"MDN Web Docs\"></option>\n <option value=\"http://www.google.com/\" label=\"Google\"></option>\n <option value=\"http://www.microsoft.com/\" label=\"Microsoft\"></option>\n <option value=\"https://www.mozilla.org/\" label=\"Mozilla\"></option>\n <option value=\"http://w3.org/\" label=\"W3C\"></option>\n</datalist>\n```\n\nExample:\n```text\n<form>\n <label for=\"myURL\">\n Enter a url from this site:\n <input\n id=\"myURL\"\n name=\"myURL\"\n type=\"url\"\n required\n pattern=\".*\\.mozilla\\.org.*\"\n title=\"URL should include mozilla.org\" />\n <span class=\"validity\"></span>\n </label>\n <button>Submit</button>\n</form>\n```\n\nExample:\n```text\ninput:focus:invalid {\n outline: 2px solid red;\n}\n\ninput:focus:valid {\n outline: 2px solid green;\n}\n\ninput + span {\n padding: 0 0.3rem;\n}\n\ninput:invalid + span::after {\n content: \"โ\" / \"Content is not valid\";\n color: red;\n}\n\ninput:valid + span::after {\n content: \"โ\" / \"Content is valid\";\n color: green;\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.777Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":135,"estimatedTokens":592}}364{"id":"doc-meta_name_viewport_html_attribute_value_html_mdn-433a46a4","source":"documentation","title":"<meta name=\"viewport\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport","text":"Example:\n```text\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n```\n\nExample:\n```text\n<meta name=\"viewport\" content=\"width=500, initial-scale=1\" />\n```\n\nExample:\n```text\n<meta name=\"viewport\" content=\"width=device-width\" />\n```\n\nExample:\n```text\n<meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\" />\n```\n\nExample:\n```text\n<meta name=\"viewport\" content=\"interactive-widget=resizes-content\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.777Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":28,"estimatedTokens":119}}365{"id":"doc-script_type_importmap_html_attribute_value_html_-daa6194a","source":"documentation","title":"<script type=\"importmap\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap","text":"Example:\n```text\n<script type=\"importmap\">\n // JSON object defining import\n</script>\n```\n\nExample:\n```javascript\nimport { name as circleName } from \"https://example.com/shapes/circle.js\";\nimport { name as squareName, draw } from \"./modules/shapes/square.js\";\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"circle\": \"https://example.com/shapes/circle.js\",\n \"square\": \"./modules/shapes/square.js\"\n }\n }\n</script>\n```\n\nExample:\n```javascript\nimport { name as circleName } from \"circle\";\nimport { name as squareName, draw } from \"square\";\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"shapes/\": \"./modules/shapes/\",\n \"other-shapes/\": \"https://example.com/modules/shapes/\"\n }\n }\n</script>\n```\n\nExample:\n```javascript\nimport { name as circleName } from \"shapes/circle.js\";\n```\n\nExample:\n```json\n{\n \"imports\": {\n \"modules/shapes/\": \"./modules/src/shapes/\",\n \"modules/square\": \"./modules/src/other/shapes/square.js\",\n \"https://example.com/modules/square.js\": \"./modules/src/other/shapes/square.js\",\n \"../modules/shapes/\": \"/modules/shapes/\"\n }\n}\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"square\": \"./modules/shapes/square.js\"\n },\n \"scopes\": {\n \"/modules/custom-shapes/\": {\n \"square\": \"https://example.com/modules/shapes/square.js\"\n }\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"square\": \"./modules/shapes/square.js\"\n },\n \"integrity\": {\n \"./modules/shapes/square.js\": \"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC\"\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"/app/\": \"./original-app/\"\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"/app/helper\": \"./helper/index.mjs\"\n },\n \"scopes\": {\n \"/js\": {\n \"/app/\": \"./js-app/\"\n }\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"/app/\": \"./original-app/\",\n \"/app/helper\": \"./helper/index.mjs\"\n },\n \"scopes\": {\n \"/js\": {\n \"/app/\": \"./js-app/\"\n }\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"/app/helper.js\": \"./helper/index.mjs\",\n \"lodash\": \"/node_modules/lodash-es/lodash.js\"\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"lodash\": \"/node_modules/lodash-es/lodash.js\"\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"/app/helper\": \"./helper/index.mjs\",\n \"lodash\": \"/node_modules/lodash-es/lodash.js\"\n }\n }\n</script>\n```\n\nExample:\n```text\n<script type=\"importmap\">\n {\n \"imports\": {\n \"/app/helper\": \"./main/helper/index.mjs\"\n }\n }\n</script>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.778Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":16,"totalLines":181,"estimatedTokens":725}}366{"id":"doc-rel_alternate_stylesheet_html_attribute_value_ht-1e2213a2","source":"documentation","title":"rel=\"alternate stylesheet\" HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet","text":"Example:\n```text\n<link href=\"reset.css\" rel=\"stylesheet\" />\n\n<link href=\"default.css\" rel=\"stylesheet\" title=\"Default Style\" />\n<link href=\"fancy.css\" rel=\"alternate stylesheet\" title=\"Fancy\" />\n<link href=\"basic.css\" rel=\"alternate stylesheet\" title=\"Basic\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.778Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":10,"estimatedTokens":70}}367{"id":"doc-meta_name_theme_color_html_attribute_value_html_-b533a39d","source":"documentation","title":"<meta name=\"theme-color\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color","text":"Example:\n```text\n<meta name=\"theme-color\" content=\"cornflowerblue\" />\n```\n\nExample:\n```text\n<meta name=\"theme-color\" content=\"#4285f4\" />\n```\n\nExample:\n```text\n<meta\n name=\"theme-color\"\n content=\"cornflowerblue\"\n media=\"(prefers-color-scheme: light)\" />\n<meta\n name=\"theme-color\"\n content=\"dimgray\"\n media=\"(prefers-color-scheme: dark)\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.779Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":23,"estimatedTokens":91}}368{"id":"doc-meta_http_equiv_html_attribute_html_mdn-8f38392c","source":"documentation","title":"<meta http-equiv> HTML attribute - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/http-equiv","text":"Example:\n```text\n<meta http-equiv=\"Refresh\" content=\"300\" />\n```\n\nExample:\n```text\n<meta http-equiv=\"Content-Security-Policy\" content=\"default-src https:\" />\n```\n\nExample:\n```text\nContent-Security-Policy: default-src https:\n```\n\nExample:\n```text\n<meta http-equiv=\"refresh\" content=\"3;url=https://www.mozilla.org\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.779Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":84}}369{"id":"doc-meta_name_robots_html_attribute_value_html_mdn-fe5113d5","source":"documentation","title":"<meta name=\"robots\"> HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/robots","text":"Example:\n```text\n<meta name=\"robots\" content=\"noindex\" />\n```\n\nExample:\n```text\n<meta name=\"robots\" content=\"nofollow, noindex\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.781Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":37}}370{"id":"doc-rel_modulepreload_html_attribute_value_html_mdn-a767d5d4","source":"documentation","title":"rel=\"modulepreload\" HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/modulepreload","text":"Example:\n```text\nindex.html\nmain.js\nmodules/\n canvas.js\n square.js\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Basic JavaScript module example</title>\n <script type=\"module\" src=\"main.js\"></script>\n </head>\n <body></body>\n</html>\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Basic JavaScript module example</title>\n <link rel=\"modulepreload\" href=\"main.js\" />\n <link rel=\"modulepreload\" href=\"modules/canvas.js\" />\n <link rel=\"modulepreload\" href=\"modules/square.js\" />\n <script type=\"module\" src=\"main.js\"></script>\n </head>\n <body></body>\n</html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.781Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":39,"estimatedTokens":179}}371{"id":"doc-meta_name_text_scale_html_mdn-e8c4b655","source":"documentation","title":"<meta name=\"text-scale\"> - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/text-scale","text":"Example:\n```text\np {\n font-size: medium;\n}\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta name=\"text-scale\" content=\"scale\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </head>\n <body>\n <p class=\"text-scale\">\n This font size obeys the user's font preferences, whether those\n preferences are specified at the operating system level or the user agent\n level.\n </p>\n <p class=\"fixed\">\n This font size does NOT respect the user's font preferences, even with\n text-scale set.\n <span class=\"text-scale\">But this font size does!</span>\n </p>\n </body>\n</html>\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </head>\n <body>\n <p class=\"text-scale\">\n This font size does not obey the user's font preferences, whether those\n preferences are specified at the operating system level or the user agent\n level.\n </p>\n <p class=\"fixed\">\n This font size does NOT respect the user's font preferences.\n <span class=\"text-scale\">Neither does this!</span>\n </p>\n </body>\n</html>\n```\n\nExample:\n```text\n.text-scale {\n font-size: 1rem;\n}\n\n.fixed {\n font-size: 20px;\n}\n```\n\nExample:\n```text\n<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta name=\"text-scale\" content=\"scale\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </head>\n <body>\n <main>Main content</main>\n <aside>Aside content</aside>\n </body>\n</html>\n```\n\nExample:\n```text\nbody {\n margin: 0;\n}\n\nmain,\naside {\n background-color: silver;\n padding: 24px;\n font-size: 1.5rem;\n}\n```\n\nExample:\n```text\n@media (width > 35rem) {\n body {\n display: grid;\n gap: 24px;\n grid-template-columns: 1fr 18.75rem;\n }\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.782Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":103,"estimatedTokens":466}}372{"id":"doc-rel_preload_html_attribute_value_html_mdn-563da44f","source":"documentation","title":"rel=\"preload\" HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload","text":"Example:\n```text\n<link rel=\"stylesheet\" href=\"styles/main.css\" />\n```\n\nExample:\n```text\n<head>\n <meta charset=\"utf-8\" />\n <title>JS and CSS preload example</title>\n\n <link rel=\"preload\" href=\"style.css\" as=\"style\" />\n <link rel=\"preload\" href=\"main.js\" as=\"script\" />\n\n <link rel=\"stylesheet\" href=\"style.css\" />\n</head>\n\n<body>\n <h1>bouncing balls</h1>\n <canvas></canvas>\n\n <script src=\"main.js\" defer></script>\n</body>\n```\n\nExample:\n```text\n<head>\n <meta charset=\"utf-8\" />\n <title>Image preload example</title>\n\n <link rel=\"preload\" href=\"flower.avif\" as=\"image\" type=\"image/avif\" />\n</head>\n<body>\n <picture>\n <source src=\"flower.avif\" type=\"image/avif\" />\n <source src=\"flower.webp\" type=\"image/webp\" />\n <img src=\"flower.jpg\" />\n </picture>\n</body>\n```\n\nExample:\n```text\n<head>\n <meta charset=\"utf-8\" />\n <title>Web font example</title>\n\n <link\n rel=\"preload\"\n href=\"fonts/cicle_fina-webfont.woff2\"\n as=\"font\"\n type=\"font/woff2\"\n crossorigin />\n <link\n rel=\"preload\"\n href=\"fonts/zantroke-webfont.woff2\"\n as=\"font\"\n type=\"font/woff2\"\n crossorigin />\n\n <link href=\"style.css\" rel=\"stylesheet\" />\n</head>\n<body>\n โฆ\n</body>\n```\n\nExample:\n```text\n<head>\n <meta charset=\"utf-8\" />\n <title>Responsive preload example</title>\n\n <link\n rel=\"preload\"\n href=\"bg-image-narrow.png\"\n as=\"image\"\n media=\"(width <= 600px)\" />\n <link\n rel=\"preload\"\n href=\"bg-image-wide.png\"\n as=\"image\"\n media=\"(width > 600px)\" />\n\n <link rel=\"stylesheet\" href=\"main.css\" />\n</head>\n<body>\n <header>\n <h1>My site</h1>\n </header>\n\n <script>\n const mediaQueryList = window.matchMedia(\"(width <= 600px)\");\n const header = document.querySelector(\"header\");\n\n if (mediaQueryList.matches) {\n header.style.backgroundImage = 'url(\"bg-image-narrow.png\")';\n } else {\n header.style.backgroundImage = 'url(\"bg-image-wide.png\")';\n }\n </script>\n</body>\n```\n\nExample:\n```javascript\nconst preloadLink = document.createElement(\"link\");\npreloadLink.href = \"myscript.js\";\npreloadLink.rel = \"preload\";\npreloadLink.as = \"script\";\ndocument.head.appendChild(preloadLink);\n```\n\nExample:\n```javascript\nconst preloadedScript = document.createElement(\"script\");\npreloadedScript.src = \"myscript.js\";\ndocument.body.appendChild(preloadedScript);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.782Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":122,"estimatedTokens":582}}373{"id":"doc-rel_preconnect_html_attribute_value_html_mdn-12f78008","source":"documentation","title":"rel=\"preconnect\" HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect","text":"Example:\n```text\n<link rel=\"preconnect\" href=\"https://example.com\" />\n```\n\nExample:\n```text\nLink: <https://example.com>; rel=\"preconnect\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.783Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":39}}374{"id":"doc-rel_prefetch_html_attribute_value_html_mdn-0f32a4e5","source":"documentation","title":"rel=\"prefetch\" HTML attribute value - HTML | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/prefetch","text":"Example:\n```javascript\n<link rel=\"prefetch\" href=\"main.js\" />\n```\n\nExample:\n```text\n<link rel=\"prefetch\" href=\"/app/style.css\" />\n<link rel=\"prefetch\" href=\"/landing-page\" />\n```\n\nExample:\n```text\n<link rel=\"prefetch\" href=\"https://news.example/article\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.784Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":17,"estimatedTokens":69}}375{"id":"doc-applying_svg_effects_to_html_content_svg_mdn-6f28ee74","source":"documentation","title":"Applying SVG effects to HTML content - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/Applying_SVG_effects_to_HTML_content","text":"Example:\n```text\np {\n mask: url(\"#my-mask\");\n}\n```\n\nExample:\n```text\n<svg height=\"0\">\n <mask id=\"mask-1\">\n <linearGradient id=\"gradient-1\" y2=\"1\">\n <stop stop-color=\"white\" offset=\"0\" />\n <stop stop-opacity=\"0\" offset=\"1\" />\n </linearGradient>\n <circle cx=\"0.25\" cy=\"0.25\" r=\"0.25\" id=\"circle\" fill=\"white\" />\n <rect x=\"0.5\" y=\"0.2\" width=\"300\" height=\"100\" fill=\"url(#gradient-1)\" />\n </mask>\n</svg>\n```\n\nExample:\n```text\n.target {\n mask: url(\"#mask-1\");\n}\np {\n width: 300px;\n border: 1px solid black;\n display: inline-block;\n}\np.target {\n background: lime;\n}\n```\n\nExample:\n```text\n<p class=\"target\">\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\n</p>\n<p>\n Lorem ipsum dolor sit amet, consectetur adipisicing\n <em class=\"target\"\n >elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua.</em\n >\n Ut enim ad minim veniam.\n</p>\n```\n\nExample:\n```text\n<p class=\"target\">\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\n</p>\n<p>\n Lorem ipsum dolor sit amet, consectetur adipisicing\n <em class=\"target\"\n >elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua.</em\n >\n Ut enim ad minim veniam.\n</p>\n\n<button>Toggle radius</button>\n\n<svg height=\"0\">\n <clipPath id=\"clipping-path-1\" clipPathUnits=\"objectBoundingBox\">\n <circle cx=\"0.25\" cy=\"0.25\" r=\"0.25\" id=\"circle\" />\n <rect x=\"0.5\" y=\"0.2\" width=\"0.5\" height=\"0.8\" />\n </clipPath>\n</svg>\n```\n\nExample:\n```text\n.target {\n clip-path: url(\"#clipping-path-1\");\n}\np {\n width: 300px;\n border: 1px solid black;\n display: inline-block;\n}\np.target {\n background: lime;\n}\n```\n\nExample:\n```javascript\nconst circle = document.getElementById(\"circle\");\n\nfunction toggleRadius() {\n circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;\n}\n\ndocument.querySelector(\"button\").addEventListener(\"click\", toggleRadius);\n```\n\nExample:\n```text\n<p class=\"target\">\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\n</p>\n<pre class=\"target\">lorem</pre>\n<p>\n Lorem ipsum dolor sit amet, consectetur adipisicing\n <em class=\"target\"\n >elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua.</em\n >\n Ut enim ad minim veniam.\n</p>\n```\n\nExample:\n```text\np.target {\n background: lime;\n}\n```\n\nExample:\n```text\n<svg height=\"0\">\n <filter id=\"f1\">\n <feGaussianBlur stdDeviation=\"3\" />\n </filter>\n</svg>\n```\n\nExample:\n```text\n<svg height=\"0\">\n <filter id=\"f2\">\n <feColorMatrix\n values=\"0.3333 0.3333 0.3333 0 0\n 0.3333 0.3333 0.3333 0 0\n 0.3333 0.3333 0.3333 0 0\n 0 0 0 1 0\" />\n </filter>\n</svg>\n```\n\nExample:\n```text\n<svg height=\"0\">\n <filter id=\"f3\">\n <feConvolveMatrix\n color-interpolation-filters=\"sRGB\"\n order=\"3\"\n kernelMatrix=\"0 -1 0\n -1 4 -1\n 0 -1 0\"\n preserveAlpha=\"true\" />\n </filter>\n <filter id=\"f4\">\n <feSpecularLighting\n surfaceScale=\"5\"\n specularConstant=\"1\"\n specularExponent=\"10\"\n lighting-color=\"white\">\n <fePointLight x=\"-5000\" y=\"-10000\" z=\"20000\" />\n </feSpecularLighting>\n </filter>\n <filter id=\"f5\">\n <feColorMatrix\n values=\"1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 1 0 0 0\"\n color-interpolation-filters=\"sRGB\" />\n </filter>\n</svg>\n```\n\nExample:\n```text\np.target {\n filter: url(\"#f3\");\n}\np.target:hover {\n filter: url(\"#f5\");\n}\nem.target {\n filter: url(\"#f1\");\n}\nem.target:hover {\n filter: url(\"#f4\");\n}\npre.target {\n filter: url(\"#f2\");\n}\npre.target:hover {\n filter: url(\"#f3\");\n}\n```\n\nExample:\n```text\n<p class=\"blur\">Time to clean my glasses</p>\n<svg height=\"0\">\n <defs>\n <filter id=\"wherearemyglasses\" x=\"0\" y=\"0\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1\" />\n </filter>\n </defs>\n</svg>\n```\n\nExample:\n```text\n.blur {\n filter: url(\"#wherearemyglasses\");\n}\n```\n\nExample:\n```text\n<svg height=\"60\" width=\"200\">\n <text x=\"0\" y=\"15\" fill=\"blue\" transform=\"rotate(30 20,50)\">\n Example text\n </text>\n</svg>\n```\n\nExample:\n```text\n.target {\n clip-path: url(\"resources.svg#c1\");\n}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.786Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":239,"estimatedTokens":1105}}376{"id":"doc-svg_animation_with_smil_svg_mdn-20555b4e","source":"documentation","title":"SVG animation with SMIL - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_animation_with_SMIL","text":"Example:\n```text\n<svg width=\"300\" height=\"100\">\n <title>Attribute Animation with SMIL</title>\n <rect x=\"0\" y=\"0\" width=\"300\" height=\"100\" stroke=\"black\" stroke-width=\"1\" />\n <circle cx=\"0\" cy=\"50\" r=\"15\" fill=\"blue\" stroke=\"black\" stroke-width=\"1\">\n <animate\n attributeName=\"cx\"\n from=\"0\"\n to=\"500\"\n dur=\"5s\"\n repeatCount=\"indefinite\" />\n </circle>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"300\" height=\"100\">\n <title>SVG SMIL Animate with transform</title>\n <rect x=\"0\" y=\"0\" width=\"300\" height=\"100\" stroke=\"black\" stroke-width=\"1\" />\n <rect\n x=\"0\"\n y=\"50\"\n width=\"15\"\n height=\"34\"\n fill=\"blue\"\n stroke=\"black\"\n stroke-width=\"1\">\n <animateTransform\n attributeName=\"transform\"\n begin=\"0s\"\n dur=\"20s\"\n type=\"rotate\"\n from=\"0 60 60\"\n to=\"360 100 60\"\n repeatCount=\"indefinite\" />\n </rect>\n</svg>\n```\n\nExample:\n```text\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"100\">\n <title>SVG SMIL Animate with Path</title>\n <rect x=\"0\" y=\"0\" width=\"300\" height=\"100\" stroke=\"black\" stroke-width=\"1\" />\n <circle cx=\"0\" cy=\"50\" r=\"15\" fill=\"blue\" stroke=\"black\" stroke-width=\"1\">\n <animateMotion path=\"M 0 0 H 300 Z\" dur=\"3s\" repeatCount=\"indefinite\" />\n </circle>\n</svg>\n```\n\nExample:\n```text\n<svg width=\"300\" height=\"100\">\n <title>SVG SMIL Animate with Path</title>\n <rect x=\"0\" y=\"0\" width=\"300\" height=\"100\" stroke=\"black\" stroke-width=\"1\" />\n <rect\n x=\"0\"\n y=\"0\"\n width=\"20\"\n height=\"20\"\n fill=\"blue\"\n stroke=\"black\"\n stroke-width=\"1\">\n <animateMotion\n path=\"M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z\"\n dur=\"3s\"\n repeatCount=\"indefinite\"\n rotate=\"auto\" />\n </rect>\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.787Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":75,"estimatedTokens":446}}377{"id":"doc-content_type_svg_mdn-9a27222a","source":"documentation","title":"Content type - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/Content_type","text":"Example:\n```text\nangle ::= number (~\"deg\" | ~\"grad\" | ~\"rad\")?\n```\n\nExample:\n```text\nangle ::= number (\"deg\" | \"grad\" | \"rad\")?\n```\n\nExample:\n```text\nanything ::= Char*\n```\n\nExample:\n```text\nClock-val ::= Full-clock-val | Partial-clock-val\n | Timecount-val\nFull-clock-val ::= Hours \":\" Minutes \":\" Seconds (\".\" Fraction)?\nPartial-clock-val ::= Minutes \":\" Seconds (\".\" Fraction)?\nTimecount-val ::= Timecount (\".\" Fraction)? (Metric)?\nMetric ::= \"h\" | \"min\" | \"s\" | \"ms\"\nHours ::= DIGIT+; any positive number\nMinutes ::= 2DIGIT; range from 00 to 59\nSeconds ::= 2DIGIT; range from 00 to 59\nFraction ::= DIGIT+\nTimecount ::= DIGIT+\n2DIGIT ::= DIGIT DIGIT\nDIGIT ::= [0-9]\n```\n\nExample:\n```text\ninteger ::= [+-]? [0-9]+\n```\n\nExample:\n```text\nhttp://example.com/someDrawing.svg\n```\n\nExample:\n```text\nhttp://example.com/someDrawing.svg#Lamppost\n```\n\nExample:\n```text\n<linearGradient id=\"MyGradient\">...</linearGradient>\n```\n\nExample:\n```text\n<rect fill=\"url(#MyGradient)\" />\n```\n\nExample:\n```text\nlength ::= <number> (<absolute-length> | <relative-length>)?\n```\n\nExample:\n```text\nlist-of-Ts ::= T\n | T, list-of-Ts\n```\n\nExample:\n```text\nname ::= [^,()#x20#x9#xD#xA] /* any char except \",\", \"(\", \")\" or wsp */\n```\n\nExample:\n```text\nnumber ::= integer\n | [+-]? [0-9]* \".\" [0-9]+\n```\n\nExample:\n```text\nnumber ::= integer ([Ee] integer)?\n | [+-]? [0-9]* \".\" [0-9]+ ([Ee] integer)?\n```\n\nExample:\n```text\nnumber-optional-number ::= number\n | number, number\n```\n\nExample:\n```text\npaint ::= none | <color> | <url> [none | <color>]? | context-fill | context-stroke\n```\n\nExample:\n```text\npercentage ::= number \"%\"\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.787Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":102,"estimatedTokens":450}}378{"id":"doc-k1_svg_mdn-0c553ab4","source":"documentation","title":"k1 - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k1","text":"Example:\n```javascript\nresult = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4;\n```\n\nExample:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"composite1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"1\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n <filter id=\"composite2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feComposite\n in2=\"SourceGraphic\"\n operator=\"arithmetic\"\n k1=\"10\"\n k2=\"0\"\n k3=\"0\"\n k4=\"0\" />\n </filter>\n\n <image\n href=\"mdn.svg\"\n x=\"0\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite1)\" />\n <image\n href=\"mdn.svg\"\n x=\"220\"\n y=\"0\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#composite2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.788Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":54,"estimatedTokens":220}}379{"id":"doc-kernelmatrix_svg_mdn-9d460ac7","source":"documentation","title":"kernelMatrix - SVG | MDN","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/kernelMatrix","text":"Example:\n```text\nhtml,\nbody,\nsvg {\n height: 100%;\n}\n```\n\nExample:\n```text\n<svg viewBox=\"0 0 420 200\" xmlns=\"http://www.w3.org/2000/svg\">\n <filter id=\"convolveMatrix1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feConvolveMatrix kernelMatrix=\"1 1 0 0 0 0 0 0 -1\" />\n </filter>\n <filter id=\"convolveMatrix2\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feConvolveMatrix kernelMatrix=\"-1 0 0 0 0 0 0 0 1\" />\n </filter>\n\n <image\n href=\"mdn_logo_only_color.png\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#convolveMatrix1)\" />\n <image\n x=\"220\"\n href=\"mdn_logo_only_color.png\"\n width=\"200\"\n height=\"200\"\n filter=\"url(#convolveMatrix2)\" />\n</svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T10:42:06.789Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":34,"estimatedTokens":173}}380