[{"data":1,"prerenderedAt":17},["ShallowReactive",2],{"clay-page:\u002Fde\u002Fwriting\u002Fhtml":3},{"html":4,"toc":5,"description":13,"hero":14,"list":15,"socialImage":16},"\u003Ch1 id=\"html\">HTML\u003C\u002Fh1>\n\u003Cp>Markdown und die \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Fwriting\u002Fcomponents\" data-route=\"\u002Fde\u002Fwriting\u002Fcomponents\">Komponenten\u003C\u002Fa> decken das meiste ab, aber manchmal erledigt HTML es besser. Du kannst HTML direkt in deine Seiten schreiben:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>HTML\u003C\u002Fth>\n\u003Cth>Ergebnis\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode><kbd>Strg<\u002Fkbd> + <kbd>K<\u002Fkbd>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ckbd>Strg\u003C\u002Fkbd> + \u003Ckbd>K\u003C\u002Fkbd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>H<sub>2<\u002Fsub>O\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>H\u003Csub>2\u003C\u002Fsub>O\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>E = mc<sup>2<\u002Fsup>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>E = mc\u003Csup>2\u003C\u002Fsup>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><mark>markiert<\u002Fmark>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cmark>markiert\u003C\u002Fmark>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><abbr title=\"Statischer Seitengenerator\">SSG<\u002Fabbr>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cabbr title=\"Statischer Seitengenerator\">SSG\u003C\u002Fabbr>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>Für einklappbare Abschnitte nimm \u003Ca href=\"\u002Fclay-example-repo\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\" data-route=\"\u002Fde\u002Fwriting\u002Fcomponents\u002Fdetails\">Details\u003C\u002Fa> statt \u003Ccode><details>\u003C\u002Fcode>: Das ist kürzer und sieht aus wie der Rest der Seite.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"videos-und-einbettungen\">\u003Ca class=\"heading-anchor\" href=\"#videos-und-einbettungen\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#videos-und-einbettungen\">#\u003C\u002Fa>Videos und Einbettungen\u003C\u002Fh2>\n\u003Cp>Füge den Einbettungscode, den dir YouTube, Vimeo oder Figma geben, so ein, wie er ist:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">iframe\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002Faqz-KE-bpKQ\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"Big Buck Bunny\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\">  allow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"encrypted-media; picture-in-picture\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> allowfullscreen\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">iframe\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ciframe src=\"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002Faqz-KE-bpKQ\" title=\"Big Buck Bunny\" allow=\"encrypted-media; picture-in-picture\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\">\u003C\u002Fiframe>\u003Cp>Einbettungen füllen die Breite der Seite im Format eines Videos, auch auf dem Handy, und laden erst, wenn Leser zu ihnen scrollen. Diese Dienste lassen sich einbetten:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Dienst\u003C\u002Fth>\n\u003Cth>Adresse der Einbettung beginnt mit\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>YouTube\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F\u003C\u002Fcode>, \u003Ccode>https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Vimeo\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>https:\u002F\u002Fplayer.vimeo.com\u002Fvideo\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Loom\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>https:\u002F\u002Fwww.loom.com\u002Fembed\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Figma\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>https:\u002F\u002Fwww.figma.com\u002Fembed\u003C\u002Fcode>, \u003Ccode>https:\u002F\u002Fembed.figma.com\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CodePen, CodeSandbox, StackBlitz\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>https:\u002F\u002Fcodepen.io\u002F\u003C\u002Fcode>, \u003Ccode>https:\u002F\u002Fcodesandbox.io\u002F\u003C\u002Fcode>, \u003Ccode>https:\u002F\u002Fstackblitz.com\u002F\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Google Maps\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fembed\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Frames aller anderen Seiten werden entfernt: Sie könnten ein gefälschtes Anmeldeformular in deiner Dokumentation zeigen.\u003C\u002Fp>\n\u003Cp>Eigene Videos liegen wie Bilder neben der Seite und laufen mit \u003Ccode><video>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">video\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"img\u002Fdemo.mp4\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> poster\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"img\u002Fdemo.png\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> controls\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> playsinline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">video\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>\u003Ccode>youtube-nocookie.com\u003C\u002Fcode> spielt dieselben Videos, ohne dass YouTube Cookies setzt, bevor Leser auf Play drücken.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"was-clay-entfernt\">\u003Ca class=\"heading-anchor\" href=\"#was-clay-entfernt\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#was-clay-entfernt\">#\u003C\u002Fa>Was Clay entfernt\u003C\u002Fh2>\n\u003Cp>Dokumentation schreiben oft viele Menschen, auch von außerhalb. Damit eine Seite ihren Lesern nicht schaden kann, bereinigt Clay beim Build das HTML jeder Seite mit \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>DOMPurify\u003C\u002Fa>. Es entfernt:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode><script>\u003C\u002Fcode>-Elemente und Event-Handler wie \u003Ccode>onclick\u003C\u002Fcode> oder \u003Ccode>onerror\u003C\u002Fcode>,\u003C\u002Fli>\n\u003Cli>\u003Ccode>javascript:\u003C\u002Fcode>-Links,\u003C\u002Fli>\n\u003Cli>Formulare und ihre Felder (\u003Ccode><form>\u003C\u002Fcode>, \u003Ccode><input>\u003C\u002Fcode>, \u003Ccode><textarea>\u003C\u002Fcode>, \u003Ccode><select>\u003C\u002Fcode>), die sich für Phishing nutzen ließen,\u003C\u002Fli>\n\u003Cli>\u003Ccode><style>\u003C\u002Fcode>-Elemente und \u003Ccode>style\u003C\u002Fcode>-Attribute, mit denen sich Inhalte über die Seite legen ließen,\u003C\u002Fli>\n\u003Cli>Frames (\u003Ccode><iframe>\u003C\u002Fcode>) anderer Seiten als der \u003Ca href=\"#videos-und-einbettungen\" data-route=\"#videos-und-einbettungen\">Einbettungen\u003C\u002Fa> oben.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Alles andere, darunter Tabellen, Bilder, \u003Ccode><details>\u003C\u002Fcode> und Formatierungen im Text, bleibt, wie du es geschrieben hast.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#ae0000;--shiki-dark:#9CDCFE\"> onclick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">steal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">()\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">Text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">   <!-- wird zu <p>Text<\u002Fp> -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">alert\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#076240;--shiki-dark:#B5CEA8\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#808080\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">       <!-- entfernt -->\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Hinweis\u003C\u002Fp>\n\u003Cp>Hervorgehobener Code, Formeln und Komponenten behalten ihr Aussehen: Clay fügt ihre Styles selbst hinzu, nachdem dein HTML bereinigt ist.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10],{"id":7,"text":8,"level":9},"videos-und-einbettungen","Videos und Einbettungen",2,{"id":11,"text":12,"level":9},"was-clay-entfernt","Was Clay entfernt","HTML in Markdown nutzen, Videos und Einbettungen, und was Clay entfernt, um deine Seite sicher zu halten.",null,false,"\u002F_clay\u002Fsocial\u002Fde\u002Fwriting\u002Fhtml.png",1792666371486]