u2ui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.htaccess +7 -0
- package/LICENSE +21 -0
- package/README.md +36 -0
- package/attr/behavior/README.md +25 -0
- package/attr/behavior/behavior.js +261 -0
- package/attr/behavior/manifest.json +43 -0
- package/attr/behavior/tests/minimal.html +19 -0
- package/attr/behavior/tests/test.html +98 -0
- package/attr/confirm/README.md +36 -0
- package/attr/confirm/confirm.js +90 -0
- package/attr/confirm/manifest.json +43 -0
- package/attr/confirm/tests/minimal.html +23 -0
- package/attr/confirm/tests/test.html +79 -0
- package/attr/draghandle/README.md +41 -0
- package/attr/draghandle/draghandle.js +42 -0
- package/attr/draghandle/tests/minimal.html +44 -0
- package/attr/focusgroup/README.md +49 -0
- package/attr/focusgroup/focusgroup.js +100 -0
- package/attr/focusgroup/manifest.json +38 -0
- package/attr/focusgroup/tests/minimal.html +27 -0
- package/attr/focusgroup/tests/test.html +154 -0
- package/attr/href/README.md +38 -0
- package/attr/href/href.js +42 -0
- package/attr/href/manifest.json +43 -0
- package/attr/href/tests/minimal.html +17 -0
- package/attr/href/tests/test.html +70 -0
- package/attr/intersect/README.md +42 -0
- package/attr/intersect/intersect.js +99 -0
- package/attr/intersect/manifest.json +57 -0
- package/attr/intersect/tests/minimal.html +30 -0
- package/attr/intersect/tests/test.html +64 -0
- package/attr/navigable/README.md +31 -0
- package/attr/navigable/TargetObserver.js +91 -0
- package/attr/navigable/U2TargetObserver.js +75 -0
- package/attr/navigable/manifest.json +42 -0
- package/attr/navigable/navigable.js +87 -0
- package/attr/navigable/tests/U1TargetObserver.html +56 -0
- package/attr/navigable/tests/minimal.html +17 -0
- package/attr/navigable/tests/targetObserver.html +106 -0
- package/attr/navigable/tests/test.html +84 -0
- package/attr/parallax/README.md +48 -0
- package/attr/parallax/parallax.js +119 -0
- package/attr/parallax/tests/minimal.html +25 -0
- package/attr/parallax/tests/performance.html +102 -0
- package/attr/parallax/tests/test.html +108 -0
- package/attr/skin/README.md +59 -0
- package/attr/skin/skin.css +51 -0
- package/attr/skin/tests/minimal.html +34 -0
- package/attr/skin/tests/test.html +96 -0
- package/class/badge/README.md +25 -0
- package/class/badge/badge.css +35 -0
- package/class/badge/tests/minimal.html +17 -0
- package/class/badge/tests/test.html +112 -0
- package/class/card1/README.md +45 -0
- package/class/card1/card1.css +30 -0
- package/class/card1/tests/minimal.html +33 -0
- package/class/card1/tests/test.html +78 -0
- package/class/flex/README.md +62 -0
- package/class/flex/flex.css +25 -0
- package/class/flex/tests/minimal.html +31 -0
- package/class/flex/tests/test.html +58 -0
- package/class/grid/README.md +52 -0
- package/class/grid/grid.css +40 -0
- package/class/grid/tests/minimal.html +34 -0
- package/class/grid/tests/test.html +78 -0
- package/class/input/README.md +49 -0
- package/class/input/input.css +33 -0
- package/class/input/tests/minimal.html +39 -0
- package/class/input/tests/test.html +29 -0
- package/class/reset/README.md +47 -0
- package/class/reset/reset.css +8 -0
- package/class/reset/tests/minimal.html +23 -0
- package/class/table/README.md +57 -0
- package/class/table/table.css +126 -0
- package/class/table/tests/minimal.html +40 -0
- package/class/table/tests/test.html +226 -0
- package/class/unstyle/README.md +32 -0
- package/class/unstyle/tests/minimal.html +22 -0
- package/class/unstyle/tests/test.html +32 -0
- package/class/unstyle/unstyle.css +12 -0
- package/class/width/README.md +48 -0
- package/class/width/tests/minimal.html +27 -0
- package/class/width/tests/test.html +101 -0
- package/class/width/width.css +22 -0
- package/css/base/README.md +25 -0
- package/css/base/base.css +127 -0
- package/css/base/beta.css +50 -0
- package/css/base/full.css +5 -0
- package/css/base/nomotion.css +9 -0
- package/css/base/print.css +36 -0
- package/css/base/tests/nomotion.html +89 -0
- package/css/base/tests/test.html +539 -0
- package/css/classes/README.md +17 -0
- package/css/classes/classes.css +78 -0
- package/css/classes/tests/test.html +63 -0
- package/css/classless/README.md +26 -0
- package/css/classless/aria.css +64 -0
- package/css/classless/classless.css +124 -0
- package/css/classless/full.css +11 -0
- package/css/classless/more.css +340 -0
- package/css/classless/simple.css +103 -0
- package/css/classless/snippeds/a/icons.css +12 -0
- package/css/classless/snippeds/experiments/conventions.css +41 -0
- package/css/classless/snippeds/hr/gradient.css +3 -0
- package/css/classless/snippeds/hr/section_sign.css +16 -0
- package/css/classless/snippeds/hr/tests.html +50 -0
- package/css/classless/tests/aria.html +101 -0
- package/css/classless/tests/foreign/classless-almond.css.html +445 -0
- package/css/classless/tests/foreign/classless-classless.css.html +831 -0
- package/css/classless/tests/foreign/classless-mvp.html +415 -0
- package/css/classless/tests/foreign/classless.sakura.html +224 -0
- package/css/classless/tests/foreign/stylestage.dev.html +304 -0
- package/css/classless/tests/foreign/test-homogenizer.html +433 -0
- package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
- package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
- package/css/classless/tests/list-bullet.html +110 -0
- package/css/classless/tests/more.html +246 -0
- package/css/classless/tests/oklch.experiments.html +280 -0
- package/css/classless/tests/test.html +106 -0
- package/css/classless/tests/variables.html +109 -0
- package/css/classless/variables.css +99 -0
- package/css/norm/README.md +37 -0
- package/css/norm/beta.css +40 -0
- package/css/norm/norm.css +98 -0
- package/css/norm/oldies.css +60 -0
- package/css/norm/tests/test.html +434 -0
- package/css/norm/tests/test.js +103 -0
- package/el/accordion/README.md +59 -0
- package/el/accordion/accordion.css +7 -0
- package/el/accordion/accordion.js +258 -0
- package/el/accordion/manifest.json +57 -0
- package/el/accordion/tests/minimal.html +44 -0
- package/el/accordion/tests/test.html +168 -0
- package/el/alert/README.md +67 -0
- package/el/alert/alert copy.js +224 -0
- package/el/alert/alert.css +73 -0
- package/el/alert/alert.js +187 -0
- package/el/alert/manifest.json +77 -0
- package/el/alert/tests/minimal.html +36 -0
- package/el/alert/tests/test.html +105 -0
- package/el/buttongroup/README.md +36 -0
- package/el/buttongroup/buttongroup.css +30 -0
- package/el/buttongroup/buttongroup.js +56 -0
- package/el/buttongroup/tests/minimal.html +31 -0
- package/el/buttongroup/tests/test.html +83 -0
- package/el/bytes/README.md +41 -0
- package/el/bytes/bytes.css +6 -0
- package/el/bytes/bytes.js +97 -0
- package/el/bytes/manifest.json +95 -0
- package/el/bytes/tests/minimal.html +19 -0
- package/el/bytes/tests/test.html +117 -0
- package/el/carousel/README.md +52 -0
- package/el/carousel/carousel.css +46 -0
- package/el/carousel/carousel.js +371 -0
- package/el/carousel/manifest.json +58 -0
- package/el/carousel/tests/experiments.html +77 -0
- package/el/carousel/tests/minimal.html +31 -0
- package/el/carousel/tests/nested.html +54 -0
- package/el/carousel/tests/test.html +136 -0
- package/el/carousel-nav/README.md +40 -0
- package/el/carousel-nav/carousel-nav.js +74 -0
- package/el/carousel-nav/tests/minimal.html +32 -0
- package/el/carousel-nav/tests/test.html +59 -0
- package/el/code/README.md +68 -0
- package/el/code/code.css +46 -0
- package/el/code/code.js +289 -0
- package/el/code/manifest.json +66 -0
- package/el/code/tests/minimal.html +35 -0
- package/el/code/tests/test.html +162 -0
- package/el/copy/README.md +35 -0
- package/el/copy/copy.css +3 -0
- package/el/copy/copy.js +118 -0
- package/el/copy/manifest.json +49 -0
- package/el/copy/tests/minimal.html +21 -0
- package/el/copy/tests/test.html +75 -0
- package/el/counter/README.md +47 -0
- package/el/counter/counter.css +8 -0
- package/el/counter/counter.js +95 -0
- package/el/counter/manifest.json +59 -0
- package/el/counter/tests/minimal.html +27 -0
- package/el/counter/tests/test.html +106 -0
- package/el/ico/README.md +162 -0
- package/el/ico/font/Font Awesome.css +22 -0
- package/el/ico/font/LigatureSymbols.css +7 -0
- package/el/ico/font/Material Icons.css +6 -0
- package/el/ico/font/RemixFilled.css +8 -0
- package/el/ico/font/RemixOutlined.css +8 -0
- package/el/ico/font/old/anicons.css +31 -0
- package/el/ico/font/old/devicons.css +210 -0
- package/el/ico/font/old/material.all.css +36 -0
- package/el/ico/font/old/remix.css +15 -0
- package/el/ico/font/old/utf8.css +54 -0
- package/el/ico/ico.css +111 -0
- package/el/ico/ico.js +189 -0
- package/el/ico/manifest.json +86 -0
- package/el/ico/tests/combinations.html +86 -0
- package/el/ico/tests/emojis.html +213 -0
- package/el/ico/tests/fonts.html +110 -0
- package/el/ico/tests/ico-directory.html +254 -0
- package/el/ico/tests/minimal.html +46 -0
- package/el/ico/tests/test.html +210 -0
- package/el/ico/tests/util-multi.svg +6 -0
- package/el/ico/tests/util.css +2 -0
- package/el/ico/tests/util.js +110 -0
- package/el/input/README.md +39 -0
- package/el/input/input.css +35 -0
- package/el/input/input.js +331 -0
- package/el/input/tests/formParticipation.html +113 -0
- package/el/input/tests/minimal.html +33 -0
- package/el/input/tests/test.html +258 -0
- package/el/masonry/README.md +51 -0
- package/el/masonry/manifest.json +60 -0
- package/el/masonry/masonry.css +27 -0
- package/el/masonry/masonry.js +92 -0
- package/el/masonry/tests/minimal.html +39 -0
- package/el/masonry/tests/test.html +42 -0
- package/el/number/README.md +47 -0
- package/el/number/manifest.json +121 -0
- package/el/number/number.css +6 -0
- package/el/number/number.js +67 -0
- package/el/number/tests/minimal.html +25 -0
- package/el/number/tests/test.html +138 -0
- package/el/out/README.md +32 -0
- package/el/out/manifest.json +38 -0
- package/el/out/out.css +2 -0
- package/el/out/out.js +59 -0
- package/el/out/tests/minimal.html +25 -0
- package/el/out/tests/test.html +37 -0
- package/el/parallax-bg/README.md +36 -0
- package/el/parallax-bg/parallax-bg.css +13 -0
- package/el/parallax-bg/parallax-bg.js +186 -0
- package/el/parallax-bg/tests/bg.jpg +0 -0
- package/el/parallax-bg/tests/bg1.jpg +0 -0
- package/el/parallax-bg/tests/bg2.jpg +0 -0
- package/el/parallax-bg/tests/demo.html +88 -0
- package/el/parallax-bg/tests/minimal.html +30 -0
- package/el/parallax-bg/tests/test.html +64 -0
- package/el/parallax-bg/tests/visible.html +90 -0
- package/el/qrcode/README.md +38 -0
- package/el/qrcode/manifest.json +43 -0
- package/el/qrcode/package.json +22 -0
- package/el/qrcode/qrcode.css +13 -0
- package/el/qrcode/qrcode.js +46 -0
- package/el/qrcode/tests/minimal.html +26 -0
- package/el/qrcode/tests/test.html +31 -0
- package/el/rating/README.md +45 -0
- package/el/rating/manifest.json +65 -0
- package/el/rating/rating.css +11 -0
- package/el/rating/rating.js +139 -0
- package/el/rating/tests/minimal.html +26 -0
- package/el/rating/tests/tests.html +77 -0
- package/el/rte/README.md +37 -0
- package/el/rte/rte.css +9 -0
- package/el/rte/rte.js +56 -0
- package/el/rte/tests/minimal.html +25 -0
- package/el/rte/tests/test.html +37 -0
- package/el/skeleton/README.md +30 -0
- package/el/skeleton/manifest.json +51 -0
- package/el/skeleton/skeleton.css +61 -0
- package/el/skeleton/skeleton.js +72 -0
- package/el/skeleton/tests/minimal.html +22 -0
- package/el/skeleton/tests/test.html +22 -0
- package/el/splitbutton/README.md +39 -0
- package/el/splitbutton/splitbutton.css +48 -0
- package/el/splitbutton/splitbutton.js +26 -0
- package/el/splitbutton/tests/minimal.html +30 -0
- package/el/splitbutton/tests/test.html +68 -0
- package/el/splitpanel/README.md +39 -0
- package/el/splitpanel/manifest.json +49 -0
- package/el/splitpanel/splitpanel.css +17 -0
- package/el/splitpanel/splitpanel.js +116 -0
- package/el/splitpanel/tests/minimal.html +31 -0
- package/el/splitpanel/tests/tests.html +121 -0
- package/el/table/README.md +68 -0
- package/el/table/manifest.json +43 -0
- package/el/table/table.css +59 -0
- package/el/table/table.js +194 -0
- package/el/table/tests/minimal.html +38 -0
- package/el/table/tests/test.html +108 -0
- package/el/tabs/README.md +50 -0
- package/el/tabs/manifest.json +59 -0
- package/el/tabs/tabs.css +23 -0
- package/el/tabs/tabs.js +210 -0
- package/el/tabs/tests/minimal.html +35 -0
- package/el/tabs/tests/test.html +180 -0
- package/el/textfit/README.md +34 -0
- package/el/textfit/manifest.json +45 -0
- package/el/textfit/tests/minimal.html +25 -0
- package/el/textfit/tests/test.html +26 -0
- package/el/textfit/textfit.css +6 -0
- package/el/textfit/textfit.js +80 -0
- package/el/time/README.md +72 -0
- package/el/time/manifest.json +118 -0
- package/el/time/tests/minimal.html +19 -0
- package/el/time/tests/test.html +160 -0
- package/el/time/time copy.js +141 -0
- package/el/time/time.js +168 -0
- package/el/time/time.old.uhtml.js +129 -0
- package/el/tooltip/README.md +48 -0
- package/el/tooltip/manifest.json +69 -0
- package/el/tooltip/tests/minimal.html +25 -0
- package/el/tooltip/tests/test.html +178 -0
- package/el/tooltip/tooltip.css +97 -0
- package/el/tooltip/tooltip.js +82 -0
- package/el/tree1/README.md +111 -0
- package/el/tree1/manifest.json +78 -0
- package/el/tree1/tests/animated.html +134 -0
- package/el/tree1/tests/custom.html +51 -0
- package/el/tree1/tests/minimal.html +44 -0
- package/el/tree1/tests/test.html +260 -0
- package/el/tree1/tree1.css +26 -0
- package/el/tree1/tree1.js +265 -0
- package/el/typewriter/README.md +62 -0
- package/el/typewriter/manifest.json +66 -0
- package/el/typewriter/tests/minimal.html +25 -0
- package/el/typewriter/tests/test.html +78 -0
- package/el/typewriter/typewriter.css +6 -0
- package/el/typewriter/typewriter.js +166 -0
- package/el/typewriter/typewriter.mp3 +0 -0
- package/js/Placer/Placer.js +156 -0
- package/js/Placer/README.md +62 -0
- package/js/Placer/tests/minimal.html +34 -0
- package/js/Placer/tests/test.html +49 -0
- package/js/PointerObserver/PointerObserver.js +130 -0
- package/js/PointerObserver/README.md +34 -0
- package/js/PointerObserver/tests/minimal.html +29 -0
- package/js/PointerObserver/tests/test.html +35 -0
- package/js/SelectorObserver/README.md +47 -0
- package/js/SelectorObserver/SelectorObserver.js +201 -0
- package/js/SelectorObserver/tests/minimal.html +21 -0
- package/js/SelectorObserver/tests/test.html +57 -0
- package/js/SelectorObserver/tests/tests.html +161 -0
- package/js/contextmenu/README.md +93 -0
- package/js/contextmenu/contextmenu.js +336 -0
- package/js/contextmenu/tests/minimal.html +44 -0
- package/js/contextmenu/tests/test.html +131 -0
- package/js/dialog/README.md +49 -0
- package/js/dialog/dialog.js +261 -0
- package/js/dialog/notification.mp3 +0 -0
- package/js/dialog/tests/minimal.html +29 -0
- package/js/dialog/tests/notification.mp3 +0 -0
- package/js/dialog/tests/test.html +135 -0
- package/js/rte/README.md +44 -0
- package/js/rte/old/NodeCleaner.js +315 -0
- package/js/rte/old/Rte/Rte.mjs +316 -0
- package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
- package/js/rte/old/Rte/Rte.ui.mjs +154 -0
- package/js/rte/old/Rte/crossbrowser.mjs +323 -0
- package/js/rte/old/Rte/font/tinymce.svg +98 -0
- package/js/rte/old/Rte/font/tinymce.woff +0 -0
- package/js/rte/old/Rte/helpers.mjs +159 -0
- package/js/rte/old/Rte/htmlparser.mjs +178 -0
- package/js/rte/old/Rte/index.mjs +5 -0
- package/js/rte/old/Rte/main.css +189 -0
- package/js/rte/old/old.rte.js +132 -0
- package/js/rte/old/range-selection.old.js +394 -0
- package/js/rte/rte.js +7 -0
- package/js/rte/src/behavior.js +228 -0
- package/js/rte/src/events.js +73 -0
- package/js/rte/src/fixes.js +251 -0
- package/js/rte/src/range.js +472 -0
- package/js/rte/src/rte.js +72 -0
- package/js/rte/src/ui/items/ai.js +167 -0
- package/js/rte/src/ui/items/code.js +93 -0
- package/js/rte/src/ui/items/undo.js +183 -0
- package/js/rte/src/ui.items.js +571 -0
- package/js/rte/src/ui.js +269 -0
- package/js/rte/src/util/htmlparser.js +178 -0
- package/js/rte/src/util/indentHtml.js +48 -0
- package/js/rte/tests/ai.html +81 -0
- package/js/rte/tests/behavior.html +88 -0
- package/js/rte/tests/events.html +69 -0
- package/js/rte/tests/fixes.html +95 -0
- package/js/rte/tests/minimal.html +34 -0
- package/js/rte/tests/notes.md +6 -0
- package/js/rte/tests/range.html +167 -0
- package/js/rte/tests/selection-explorer.html +222 -0
- package/js/rte/tests/test.html +92 -0
- package/js/shortcut/README.md +33 -0
- package/js/shortcut/shortcut.js +89 -0
- package/js/shortcut/tests/minimal.html +23 -0
- package/js/shortcut/tests/test.html +68 -0
- package/package.json +12 -0
- package/u2/README.md +4 -0
- package/u2/auto.js +161 -0
- package/u2/auto.ui.js +85 -0
- package/u2/experiments/Waiter/test.html +132 -0
- package/u2/experiments/getElementByIdPromise/test.html +76 -0
- package/u2/experiments/patchInputValue.html +124 -0
- package/u2/experiments/radiobutton/test.html +75 -0
- package/u2/experiments/tests/test.html +223 -0
- package/u2/experiments/u1-responsive/responsive.js +62 -0
- package/u2/experiments/u1-responsive/test.html +65 -0
- package/u2/experiments/u2Element.js +139 -0
- package/u2/experiments/u2Element.test.html +47 -0
- package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
- package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
- package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
- package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
- package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
- package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
- package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
- package/u2/old-stuff/css/parser/mod.js +182 -0
- package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
- package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
- package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
- package/u2/old-stuff/css/parser/style.html +52 -0
- package/u2/old-stuff/css/parser/test.html +38 -0
- package/u2/old-stuff/el/ai-texter/README.md +23 -0
- package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
- package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
- package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
- package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
- package/u2/old-stuff/init.js +38 -0
- package/u2/old-stuff/markHashLinks.js +51 -0
- package/u2/old-stuff/onElement/mod.js +73 -0
- package/u2/old-stuff/test-helpers/mod.js +36 -0
- package/u2/old-stuff/test-helpers/test.html +4 -0
- package/u2/old-stuff/tests/init.js.html +51 -0
- package/u2/old-stuff/viewport.js +64 -0
- package/u2/projects.json +468 -0
- package/u2/tests/boilerplate.html +46 -0
- package/u2/tests/kacheln.html +245 -0
- package/u2/tests/showcase.html +270 -0
- package/u2/tests/showcase2.html +157 -0
- package/u2/tests/test-init.js +35 -0
- package/u2/tests/test.html +355 -0
- package/u2/tools/baseElement.js +95 -0
- package/u2/tools/baseElement.test.html +119 -0
- package/u2/tools/ce-inspector.js +308 -0
- package/u2/tools/ce-inspector.test.html +66 -0
- package/u2/tools/ce-manfest-from-element.js +207 -0
- package/u2/tools/dev-iframe.js +213 -0
- package/u2/tools/dev-iframe.test.html +75 -0
- package/u2/tools/eventsExplorer.js +101 -0
- package/u2/tools/logo/u1.svg +9 -0
- package/u2/tools/logo/u1ui.svg +6 -0
- package/u2/tools/update.repos.json.js +234 -0
- package/u2/u2.js +14 -0
- package/u2/utils.js +59 -0
|
@@ -0,0 +1,956 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Level.css TEST</title>
|
|
6
|
+
<script src="../test.js" type=module async></script>
|
|
7
|
+
|
|
8
|
+
<link rel="stylesheet" href="../../../css/norm/norm.css">
|
|
9
|
+
<link rel="stylesheet" href="../../../norm.css/beta.css">
|
|
10
|
+
<link rel="stylesheet" href="../../../css/base/base.css">
|
|
11
|
+
<link rel="stylesheet" href="../../../base.css/beta.css">
|
|
12
|
+
<link rel="stylesheet" href="../../../base.css/print.css" disabled>
|
|
13
|
+
<link rel="stylesheet" href="../../../base.css/nomotion.css" disabled>
|
|
14
|
+
<link rel="stylesheet" href="../../../css/classless/variables.css">
|
|
15
|
+
<link rel="stylesheet" href="../../../css/classless/classless.css">
|
|
16
|
+
<link rel="stylesheet" href="../../../css/classless/more.css">
|
|
17
|
+
<link rel="stylesheet" href="../../../css/classless/aria.css">
|
|
18
|
+
<link rel="stylesheet" href="../../../css/classless/simple.css">
|
|
19
|
+
|
|
20
|
+
<link rel="stylesheet" href="../../../classless.css/themes/elegant.css">
|
|
21
|
+
<link rel="stylesheet" href="../../../classless.css/themes/brutalist.css" disabled>
|
|
22
|
+
<link rel="stylesheet" href="../../../classless.css/themes/lascaux.css" disabled>
|
|
23
|
+
|
|
24
|
+
</head>
|
|
25
|
+
<body id=body>
|
|
26
|
+
|
|
27
|
+
<!-- based on https://github.com/alexandersandberg/html5-elements-tester -->
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
<header>
|
|
33
|
+
<h1>Level-x CSS Framework explorer</h1>
|
|
34
|
+
<p>A test page for CSS frameworks showing examples and coverage info (what HTML elements are styled).</p>
|
|
35
|
+
<p>Forked from <a href="https://github.com/alexandersandberg/html5-elements-tester">HTML5 elements tester</a>. </p>
|
|
36
|
+
</header>
|
|
37
|
+
|
|
38
|
+
<main id="main">
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<nav id="nav">
|
|
43
|
+
<h2>Navigation</h2>
|
|
44
|
+
<ul>
|
|
45
|
+
<li><a href="#sections">Sections</a></li>
|
|
46
|
+
<li><a href="#grouping-content">Grouping content</a></li>
|
|
47
|
+
<li><a href="#text-level-semantics">Text-level semantics</a></li>
|
|
48
|
+
<li><a href="#edits">Edits</a></li>
|
|
49
|
+
<li><a href="#embedded-content">Embedded content</a></li>
|
|
50
|
+
<li><a href="#tabular-data">Tabular data</a></li>
|
|
51
|
+
<li><a href="#forms">Forms</a></li>
|
|
52
|
+
<li><a href="#interactive-elements">Interactive elements</a></li>
|
|
53
|
+
<li><a href="#scripting">Scripting</a></li>
|
|
54
|
+
<li><a href="#coverage-table">Coverage info</a></li>
|
|
55
|
+
</ul>
|
|
56
|
+
</nav>
|
|
57
|
+
<section id="sections">
|
|
58
|
+
<header>
|
|
59
|
+
<h2>Sections</h2>
|
|
60
|
+
<p>Elements: <code><body></code>, <code><article></code>, <code><section></code>, <code><nav></code>, <code><aside></code>, <code><h1>โ<h6></code>, <code><header></code>, <code><footer></code></p>
|
|
61
|
+
</header>
|
|
62
|
+
|
|
63
|
+
<article>
|
|
64
|
+
<header>
|
|
65
|
+
<h3><code><h1>โ<h6></code>:</h3>
|
|
66
|
+
</header>
|
|
67
|
+
|
|
68
|
+
<!--
|
|
69
|
+
Note that, in this context, this use of <h*>s is not of appropriate
|
|
70
|
+
(accessible) rank, but used for testing purposes.
|
|
71
|
+
-->
|
|
72
|
+
<h1><code><h1></code> A unique title, specific for the page</h1>
|
|
73
|
+
<h2><code><h2></code> Heading levels should reflect structure, not style</h2>
|
|
74
|
+
<p>It can also be useful to test how body text below a heading appears on the page, for example to check the margin. This text is wrapped in <p> and is a direct sibling to the above <h2>.</p>
|
|
75
|
+
<h3><code><h3></code> If you need a visually smaller title, use CSS</h3>
|
|
76
|
+
<p>To create a semantically correct HTML structure that's accessible for everyone, make sure you're nesting the headings correctly. Never use more than one <h1> per page, and don't skip heading levels.</p>
|
|
77
|
+
<h4><code><h4></code> Headings below level 4 are not used as much</h4>
|
|
78
|
+
<h5><code><h5></code> But that doesn't mean you should forget about them</h5>
|
|
79
|
+
<h6><code><h6></code> And last, but not least, the heading with the lowest rank</h6>
|
|
80
|
+
</article>
|
|
81
|
+
|
|
82
|
+
<article id="article">
|
|
83
|
+
<header id="header">
|
|
84
|
+
<h3><code><body> + <article> + <section> + <nav> + <aside> + <header> + <footer></code>:</h3>
|
|
85
|
+
</header>
|
|
86
|
+
|
|
87
|
+
<p>All these tags are already in use on the page. The list below contains links to each use case. See the source code of this file for more details.</p>
|
|
88
|
+
<ul>
|
|
89
|
+
<li><a href="#body"><code><body></code></a></li>
|
|
90
|
+
<li><a href="#article"><code><article></code></a></li>
|
|
91
|
+
<li><a href="#sections"><code><section></code></a></li>
|
|
92
|
+
<li><a href="#nav"><code><nav></code></a></li>
|
|
93
|
+
<li><a href="#aside"><code><aside></code></a></li>
|
|
94
|
+
<li><a href="#header"><code><header></code></a></li>
|
|
95
|
+
<li><a href="#footer"><code><footer></code></a></li>
|
|
96
|
+
</ul>
|
|
97
|
+
</article>
|
|
98
|
+
|
|
99
|
+
<footer id="footer">
|
|
100
|
+
<a href="#body">Back to top ๐</a>
|
|
101
|
+
</footer>
|
|
102
|
+
</section>
|
|
103
|
+
|
|
104
|
+
<section id="grouping-content">
|
|
105
|
+
<header>
|
|
106
|
+
<h2>Grouping content</h2>
|
|
107
|
+
<p>Elements: <code><p></code>, <code><address></code>, <code><hr></code>, <code><pre></code>, <code><blockquote></code>, <code><ol></code>, <code><ul></code>, <code><li></code>, <code><dl></code>, <code><dt></code>, <code><dd></code>, <code><figure></code>, <code><figcaption></code>, <code><main></code>, <code><div></code></p>
|
|
108
|
+
</header>
|
|
109
|
+
|
|
110
|
+
<article>
|
|
111
|
+
<header>
|
|
112
|
+
<h3><code><p></code>:</h3>
|
|
113
|
+
</header>
|
|
114
|
+
|
|
115
|
+
<p>Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. [1]</p>
|
|
116
|
+
</article>
|
|
117
|
+
|
|
118
|
+
<article>
|
|
119
|
+
<header>
|
|
120
|
+
<h3><code><address></code>:</h3>
|
|
121
|
+
</header>
|
|
122
|
+
|
|
123
|
+
<address>
|
|
124
|
+
Name: Alexander Sandberg<br>
|
|
125
|
+
Street adress: 1 Rover street<br>
|
|
126
|
+
State: N/A<br>
|
|
127
|
+
Planet: Mars<br>
|
|
128
|
+
Digital home: <a href="https://alexandersandberg.com">alexandersandberg.com</a><br>
|
|
129
|
+
</address>
|
|
130
|
+
</article>
|
|
131
|
+
|
|
132
|
+
<article>
|
|
133
|
+
<header>
|
|
134
|
+
<h3><code><hr></code>:</h3>
|
|
135
|
+
</header>
|
|
136
|
+
|
|
137
|
+
<hr>
|
|
138
|
+
</article>
|
|
139
|
+
|
|
140
|
+
<article>
|
|
141
|
+
<header>
|
|
142
|
+
<h3><code><pre></code>:</h3>
|
|
143
|
+
</header>
|
|
144
|
+
|
|
145
|
+
<pre>Preformatted text
|
|
146
|
+
will be presented
|
|
147
|
+
exactly as written
|
|
148
|
+
in the HTML file.
|
|
149
|
+
</pre>
|
|
150
|
+
</article>
|
|
151
|
+
|
|
152
|
+
<article>
|
|
153
|
+
<header>
|
|
154
|
+
<h3><code><blockquote></code>:</h3>
|
|
155
|
+
</header>
|
|
156
|
+
|
|
157
|
+
<blockquote>
|
|
158
|
+
<p>The text inside this blockquote is wrapped in <code><p></code> tags. Sometimes the quote is really long, and possibly have to occupy multiple lines, but that shouldn't be a problem.</p>
|
|
159
|
+
</blockquote>
|
|
160
|
+
</article>
|
|
161
|
+
|
|
162
|
+
<article>
|
|
163
|
+
<header>
|
|
164
|
+
<h3><code><ol> + <ul> + <li></code>:</h3>
|
|
165
|
+
</header>
|
|
166
|
+
|
|
167
|
+
<ol>
|
|
168
|
+
<li>List item 1</li>
|
|
169
|
+
<li>List item 2
|
|
170
|
+
<ol>
|
|
171
|
+
<li>List item 1</li>
|
|
172
|
+
</ol>
|
|
173
|
+
</li>
|
|
174
|
+
<li>List item 3
|
|
175
|
+
<ul>
|
|
176
|
+
<li>List item 1</li>
|
|
177
|
+
<li>List item 2
|
|
178
|
+
<ul>
|
|
179
|
+
<li>List item 1
|
|
180
|
+
<ol>
|
|
181
|
+
<li>List item 1</li>
|
|
182
|
+
<li>List item 2</li>
|
|
183
|
+
</ol>
|
|
184
|
+
</li>
|
|
185
|
+
<li>List item 2</li>
|
|
186
|
+
</ul>
|
|
187
|
+
</li>
|
|
188
|
+
<li>List item 3</li>
|
|
189
|
+
</ul>
|
|
190
|
+
</li>
|
|
191
|
+
<li>List item 4</li>
|
|
192
|
+
</ol>
|
|
193
|
+
<ul>
|
|
194
|
+
<li>List item 1
|
|
195
|
+
<ul>
|
|
196
|
+
<li>List item 1
|
|
197
|
+
<ul>
|
|
198
|
+
<li>List item 1</li>
|
|
199
|
+
</ul>
|
|
200
|
+
</li>
|
|
201
|
+
<li>List item 2</li>
|
|
202
|
+
</ul>
|
|
203
|
+
</li>
|
|
204
|
+
<li>List item 2</li>
|
|
205
|
+
<li>List item 3
|
|
206
|
+
<ol>
|
|
207
|
+
<li>List item 1</li>
|
|
208
|
+
<li>List item 2</li>
|
|
209
|
+
</ol>
|
|
210
|
+
</li>
|
|
211
|
+
</ul>
|
|
212
|
+
</article>
|
|
213
|
+
|
|
214
|
+
<article>
|
|
215
|
+
<header>
|
|
216
|
+
<h3><code><dl> + <dt> + <dd></code>:</h3>
|
|
217
|
+
</header>
|
|
218
|
+
|
|
219
|
+
<dl>
|
|
220
|
+
<dt>This is a term</dt>
|
|
221
|
+
<dd>And this is the accompanying description, explaining the above term.</dd>
|
|
222
|
+
<dd>You can also have multiple descriptions (<code><dt></code>), like this one, for each term (<code><dt></code>).</dd>
|
|
223
|
+
<dd>And why not nest lists inside this description?
|
|
224
|
+
<dl>
|
|
225
|
+
<dt>Another term</dt>
|
|
226
|
+
<dd>With some description.</dd>
|
|
227
|
+
</dl>
|
|
228
|
+
<ul>
|
|
229
|
+
<li>List item 1</li>
|
|
230
|
+
</ul>
|
|
231
|
+
<ol>
|
|
232
|
+
<li>List item 1</li>
|
|
233
|
+
<li>List item 2</li>
|
|
234
|
+
</ol>
|
|
235
|
+
</dd>
|
|
236
|
+
</dl>
|
|
237
|
+
</article>
|
|
238
|
+
|
|
239
|
+
<article>
|
|
240
|
+
<header>
|
|
241
|
+
<h3><code><figure> + <figcaption></code>:</h3>
|
|
242
|
+
</header>
|
|
243
|
+
|
|
244
|
+
<p>Used with an <code><img></code>:</p>
|
|
245
|
+
<figure>
|
|
246
|
+
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' width='600' height='300'%3E%3Crect width='600' height='300' fill='%2300a3d7'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='%23000000'%3Eimg%3C/text%3E%3C/svg%3E" alt="Dummy image, just says img on a blue background">
|
|
247
|
+
<figcaption>Dummy img generated by <a href="https://codepen.io/andreasnylin/full/PgGxQv">SVG Placeholder Image Generator</a></figcaption>
|
|
248
|
+
</figure>
|
|
249
|
+
|
|
250
|
+
<p>Used with a <code><blockquote></code>:</p>
|
|
251
|
+
<figure>
|
|
252
|
+
<blockquote>
|
|
253
|
+
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
|
|
254
|
+
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
|
|
255
|
+
</blockquote>
|
|
256
|
+
|
|
257
|
+
<figcaption>
|
|
258
|
+
<cite><a href="#!">Said no one, ever.</a></cite>
|
|
259
|
+
</figcaption>
|
|
260
|
+
</figure>
|
|
261
|
+
</article>
|
|
262
|
+
|
|
263
|
+
<article>
|
|
264
|
+
<header>
|
|
265
|
+
<h3><code><main></code>:</h3>
|
|
266
|
+
</header>
|
|
267
|
+
|
|
268
|
+
<p>See the <a href="#main">main content</a> of this page for a use case of <code><main></code>.</p>
|
|
269
|
+
</article>
|
|
270
|
+
|
|
271
|
+
<article>
|
|
272
|
+
<header>
|
|
273
|
+
<h3><code><div></code>:</h3>
|
|
274
|
+
</header>
|
|
275
|
+
|
|
276
|
+
<div>
|
|
277
|
+
<p>This paragraph of text is contained inside a <code><div></code>. The element really has no special meaning, other than grouping content together, and should be used as a last resort when no other element is suitable.</p>
|
|
278
|
+
</div>
|
|
279
|
+
</article>
|
|
280
|
+
|
|
281
|
+
<footer>
|
|
282
|
+
<a href="#body">Back to top ๐</a>
|
|
283
|
+
</footer>
|
|
284
|
+
</section>
|
|
285
|
+
|
|
286
|
+
<section id="text-level-semantics">
|
|
287
|
+
<header>
|
|
288
|
+
<h2>Text-level semantics</h2>
|
|
289
|
+
<p>Elements: <code><a></code>, <code><em></code>, <code><strong></code>, <code><small></code>, <code><s></code>, <code><cite></code>, <code><q></code>, <code><dfn></code>, <code><abbr></code>, <code><ruby></code>, <code><rb></code>, <code><rt></code>, <code><rtc></code>, <code><rp></code>, <code><data></code>, <code><time></code>, <code><code></code>, <code><var></code>, <code><samp></code>, <code><kbd></code>, <code><sub></code>, <code><sup></code>, <code><i></code>, <code><b></code>, <code><u></code>, <code><mark></code>, <code><bdi></code>, <code><bdo></code>, <code><span></code>, <code><br></code>, <code><wbr></code></p>
|
|
290
|
+
</header>
|
|
291
|
+
|
|
292
|
+
<article id="a">
|
|
293
|
+
<header>
|
|
294
|
+
<h3><code><a></code>:</h3>
|
|
295
|
+
</header>
|
|
296
|
+
|
|
297
|
+
<p>Here is <a href="#a">a link</a> inside a paragraph of text. Below you can find a list of links with different <code>href</code> attributes.</p>
|
|
298
|
+
<ul>
|
|
299
|
+
<li><a href="https://github.com/alexandersandberg/html5-elements-tester">Link to an external website</a></li>
|
|
300
|
+
<li><a href="#a">Anchor link to this element</a></li>
|
|
301
|
+
<li><a href="">Link with an empty <code>href</code> attribute</a></li>
|
|
302
|
+
<li><a>Link missing an <code>href</code> attribute</a></li>
|
|
303
|
+
</ul>
|
|
304
|
+
</article>
|
|
305
|
+
|
|
306
|
+
<article>
|
|
307
|
+
<header>
|
|
308
|
+
<h3><code><em> + <i> + <strong> + <b></code>:</h3>
|
|
309
|
+
</header>
|
|
310
|
+
|
|
311
|
+
<p>The <code><em></code> element represents <em>stress emphasis</em> of its contents. Meanwhile, <code><i></code> is since HTML5 used for text in an alternative voice or mood, or otherwise offset from the <i>normal prose</i>, as you may define it.</p>
|
|
312
|
+
<p>If you want to <b>draw attention</b> to some text, feel free to use <code><b></code>. However, if you want to mark the importance of something, <strong>you should use <code><strong></code></strong>.</p>
|
|
313
|
+
</article>
|
|
314
|
+
|
|
315
|
+
<article>
|
|
316
|
+
<header>
|
|
317
|
+
<h3><code><small> + <u> + <mark> + <s></code>:</h3>
|
|
318
|
+
</header>
|
|
319
|
+
|
|
320
|
+
<p><small>When you want your text to represent small print, use <code><small></code>.</small></p>
|
|
321
|
+
<p>In most cases, there's a better element than <code><u></code> to use, but it can be useful for labelling <u>msispelt</u> text. Avoid using it, however, where the text could be confused for a hyperlink.</p>
|
|
322
|
+
<p>You can <mark>highlight text</mark> for reference purposes with <code><mark></code>, or if the contents is <s>no longer accurate or relevant</s>, wrap it with <code><s></code>.</p>
|
|
323
|
+
</article>
|
|
324
|
+
|
|
325
|
+
<article>
|
|
326
|
+
<header>
|
|
327
|
+
<h3><code><abbr> + <dfn></code>:</h3>
|
|
328
|
+
</header>
|
|
329
|
+
|
|
330
|
+
<p>By wrapping an abbreviation like <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> in both <code><dfn></code> and <code><abbr></code>, we define the term. This can later be used only using <code><abbr></code>, since we already defined <abbr title="Cascading Style Sheets">CSS</abbr> once before.</p>
|
|
331
|
+
</article>
|
|
332
|
+
|
|
333
|
+
<article>
|
|
334
|
+
<header>
|
|
335
|
+
<h3><code><q> + <cite> + <data> + <time></code>:</h3>
|
|
336
|
+
</header>
|
|
337
|
+
|
|
338
|
+
<p>When citing creative work, include the reference with a <code><cite></code> element. <cite>www.w3.org</cite> explains that <q>A citation is not a quote (for which the <code><q></code> element is appropriate)</q> instead, like used here.</p>
|
|
339
|
+
<p lang=de>A Quote in germain <q>A germain quote</q> </p>
|
|
340
|
+
<p lang=fr>A Quote in french <q>A french quote</q> </p>
|
|
341
|
+
<p>If you want to link content with a <data value="123">machine-readable</data> translation, use <code><data></code> with a <code>value</code> attribute. However, if this data is a time- or date-related, like the date <time datetime="2019-07-04">July 4</time>, you have to use <code><time></code> together with the <code>datatime</code> attribute.</p>
|
|
342
|
+
</article>
|
|
343
|
+
|
|
344
|
+
<article>
|
|
345
|
+
<header>
|
|
346
|
+
<h3><code><code> + <var> + <samp> + <kbd> + <sub> + <sup></code>:</h3>
|
|
347
|
+
</header>
|
|
348
|
+
|
|
349
|
+
<p>When sharing code-snippets, make sure to use the <code><code></code> element. This can be done both <code>display: inline;</code>, as well as block-level:</p>
|
|
350
|
+
<pre><code>* {
|
|
351
|
+
color: rebeccapurple;
|
|
352
|
+
background: aliceblue;
|
|
353
|
+
}</code></pre>
|
|
354
|
+
<p>Variables should be surrounded by <code><var></code>, or <var>x</var> amount of people might be confused.</p>
|
|
355
|
+
<p>Sample or quotes output are represented with <code><samp></code>: <samp>Your expression '1 + 1' equals 2</samp>.</p>
|
|
356
|
+
<p>To represent user input, like the shortcut <kbd><kbd>Cmd</kbd> + <kbd>R</kbd></kbd> on macOS, use <code><kbd></code>.</p>
|
|
357
|
+
<p>If you want to <sub>subscript</sub> or <sup>superscript</sup> text, use <code><sub></code> or <code><sup></code>.</p>
|
|
358
|
+
</article>
|
|
359
|
+
|
|
360
|
+
<article>
|
|
361
|
+
<header>
|
|
362
|
+
<h3><code><bdi> + <bdo> + <ruby> + <rb> + <rt> + <rtc> + <rp></code>:</h3>
|
|
363
|
+
</header>
|
|
364
|
+
|
|
365
|
+
<p>Consider using <code><bdi></code> when working with bidirectional content, like the names <bdi>Alexander</bdi> and <bdi>ุนููโ</bdi>.</p>
|
|
366
|
+
<p>If you need to override the bidirectional algorithm for some content and its children, use <code><bdo></code>:</p>
|
|
367
|
+
<p><bdo dir="rtl">Don't forget to specify the <code>dir</code> attribute!</bdo></p>
|
|
368
|
+
<p><bdo dir="ltr">I said, don't forget to specify the <code>dir</code> attribute!</bdo></p>
|
|
369
|
+
<p>Some use of <code><ruby></code> and its related elements:</p>
|
|
370
|
+
<ruby>
|
|
371
|
+
ๆผข <rp>(</rp>
|
|
372
|
+
<rt>Kan</rt>
|
|
373
|
+
<rp>)</rp>
|
|
374
|
+
ๅญ <rp>(</rp>
|
|
375
|
+
<rt>ji</rt>
|
|
376
|
+
<rp>)</rp>
|
|
377
|
+
</ruby>
|
|
378
|
+
<br>
|
|
379
|
+
<ruby>
|
|
380
|
+
<rb>ๆง<rb>้<rb>ๅฑฑ<rt>jiรน
|
|
381
|
+
<rt>jฤซn
|
|
382
|
+
<rt>shฤn<rtc>San Francisco
|
|
383
|
+
</ruby>
|
|
384
|
+
<p>More information about the explanation and usage of these can be <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#the-ruby-element" target="_blank">read here on www.w3.org</a>.</p>
|
|
385
|
+
</article>
|
|
386
|
+
|
|
387
|
+
<article>
|
|
388
|
+
<header>
|
|
389
|
+
<h3><code><span> + <br> + <wbr></code>:</h3>
|
|
390
|
+
</header>
|
|
391
|
+
|
|
392
|
+
<p>A <code><span></code> can be used to mark up inline text for various uses, <span style="font-weight: bolder;">here to make the text bolder</span>.</p>
|
|
393
|
+
<p>If you have really long text you might want to insert a<br>blank line with the <code><br></code> element. You can also insert word breaking opportunities using <code><wbr></code>, to help the browser break long words like Pneumonoultramicro<wbr>scopicsilico<wbr>volcanoconiosis.
|
|
394
|
+
</p>
|
|
395
|
+
</article>
|
|
396
|
+
|
|
397
|
+
<footer>
|
|
398
|
+
<a href="#body">Back to top ๐</a>
|
|
399
|
+
</footer>
|
|
400
|
+
</section>
|
|
401
|
+
|
|
402
|
+
<section id="edits">
|
|
403
|
+
<header>
|
|
404
|
+
<h2>Edits</h2>
|
|
405
|
+
<p>Elements: <code><ins></code>, <code><del></code></p>
|
|
406
|
+
</header>
|
|
407
|
+
|
|
408
|
+
<article>
|
|
409
|
+
<header>
|
|
410
|
+
<h3><code><ins> + <del></code>:</h3>
|
|
411
|
+
</header>
|
|
412
|
+
|
|
413
|
+
<p>If you make a <del>really huge</del> mistake, you can always go back and fix it later. <ins>And don't forget to learn from your mistake.</ins></p>
|
|
414
|
+
<ins>
|
|
415
|
+
<p>Both <code><ins></code> and <code><del></code> can be block-level, like this.</p>
|
|
416
|
+
</ins>
|
|
417
|
+
<del>
|
|
418
|
+
<p>Here's a block-level paragraph removal.</p>
|
|
419
|
+
</del>
|
|
420
|
+
</article>
|
|
421
|
+
|
|
422
|
+
<footer>
|
|
423
|
+
<a href="#body">Back to top ๐</a>
|
|
424
|
+
</footer>
|
|
425
|
+
</section>
|
|
426
|
+
|
|
427
|
+
<section id="embedded-content">
|
|
428
|
+
<header>
|
|
429
|
+
<h2>Embedded content</h2>
|
|
430
|
+
<p>Elements: <code><picture></code>, <code><source></code>, <code><img></code>, <code><iframe></code>, <code><embed></code>, <code><object></code>, <code><param></code>, <code><video></code>, <code><audio></code>, <code><track></code>, <code><map></code>, <code><area></code>, <code><math></code>, <code><svg></code></p>
|
|
431
|
+
</header>
|
|
432
|
+
|
|
433
|
+
<article>
|
|
434
|
+
<header>
|
|
435
|
+
<h3><code><img> + <svg></code>:</h3>
|
|
436
|
+
</header>
|
|
437
|
+
|
|
438
|
+
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' width='600' height='300'%3E%3Crect width='600' height='300' fill='%2300a3d7'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='%23000000'%3Eimg%3C/text%3E%3C/svg%3E" alt="dummy image, says img on a blue background">
|
|
439
|
+
<svg height="250" width="510">
|
|
440
|
+
<polygon points="220,10 300,210 200,245 123,234" style="fill:tomato;stroke:rebeccapurple;stroke-width:5" />
|
|
441
|
+
This is a fallback message. If you see this, your browser does not support inline SVG.
|
|
442
|
+
</svg>
|
|
443
|
+
</article>
|
|
444
|
+
|
|
445
|
+
<article>
|
|
446
|
+
<header>
|
|
447
|
+
<h3><code><picture> + <source></code>:</h3>
|
|
448
|
+
</header>
|
|
449
|
+
|
|
450
|
+
<p>A different image will be shown depending on viewport size.</p>
|
|
451
|
+
<picture>
|
|
452
|
+
<source srcset="https://dummyimage.com/800x400/000/fff" media="(min-width: 1200px)">
|
|
453
|
+
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' width='400' height='300'%3E%3Crect width='400' height='300' fill='%2300a3d7'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='%23000000'%3Eimg small%3C/text%3E%3C/svg%3E" alt="Blue square dummy image">
|
|
454
|
+
</picture>
|
|
455
|
+
</article>
|
|
456
|
+
|
|
457
|
+
<article>
|
|
458
|
+
<header>
|
|
459
|
+
<h3><code><iframe></code>:</h3>
|
|
460
|
+
</header>
|
|
461
|
+
|
|
462
|
+
<iframe src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=New%20york+(HTML5%20Elements%20Tester)&ie=UTF8&t=k&z=14&iwloc=B&output=embed"></iframe>
|
|
463
|
+
</article>
|
|
464
|
+
|
|
465
|
+
<article>
|
|
466
|
+
<header>
|
|
467
|
+
<h3><code><embed></code>:</h3>
|
|
468
|
+
</header>
|
|
469
|
+
|
|
470
|
+
<embed src="" type="video/webm">
|
|
471
|
+
</article>
|
|
472
|
+
|
|
473
|
+
<article>
|
|
474
|
+
<header>
|
|
475
|
+
<h3><code><object> + <param></code>:</h3>
|
|
476
|
+
</header>
|
|
477
|
+
|
|
478
|
+
<object data="" type="application/pdf">
|
|
479
|
+
<param name="parameter" value="example">
|
|
480
|
+
</object>
|
|
481
|
+
</article>
|
|
482
|
+
|
|
483
|
+
<article>
|
|
484
|
+
<header>
|
|
485
|
+
<h3><code><video> + <audio> + <track></code>:</h3>
|
|
486
|
+
</header>
|
|
487
|
+
|
|
488
|
+
<audio controls="">audio</audio>
|
|
489
|
+
<video controls="">video</video>
|
|
490
|
+
</article>
|
|
491
|
+
|
|
492
|
+
<article>
|
|
493
|
+
<header>
|
|
494
|
+
<h3><code><map> + <area></code>:</h3>
|
|
495
|
+
</header>
|
|
496
|
+
|
|
497
|
+
<p>Each side of the image below is linked to different anchors on this page. Give it a try!</p>
|
|
498
|
+
<map name="image-map" id="image-map">
|
|
499
|
+
<area shape="circle" coords="75,75,75" href="#image-map">
|
|
500
|
+
<area shape="circle" coords="275,75,75" href="#body">
|
|
501
|
+
</map>
|
|
502
|
+
</article>
|
|
503
|
+
|
|
504
|
+
<article>
|
|
505
|
+
<header>
|
|
506
|
+
<h3><code><math></code>:</h3>
|
|
507
|
+
</header>
|
|
508
|
+
|
|
509
|
+
<p>The quadratic formula is:<br>
|
|
510
|
+
<math>
|
|
511
|
+
<mi>x</mi>
|
|
512
|
+
<mo>=</mo>
|
|
513
|
+
<mfrac>
|
|
514
|
+
<mrow>
|
|
515
|
+
<mo form="prefix">-</mo>
|
|
516
|
+
<mi>b</mi>
|
|
517
|
+
<mo>ยฑ</mo>
|
|
518
|
+
<msqrt>
|
|
519
|
+
<msup>
|
|
520
|
+
<mi>b</mi>
|
|
521
|
+
<mn>2</mn>
|
|
522
|
+
</msup>
|
|
523
|
+
<mo>-</mo>
|
|
524
|
+
<mn>4</mn>
|
|
525
|
+
<mo>โข</mo>
|
|
526
|
+
<mi>a</mi>
|
|
527
|
+
<mo>โข</mo>
|
|
528
|
+
<mi>c</mi>
|
|
529
|
+
</msqrt>
|
|
530
|
+
</mrow>
|
|
531
|
+
<mrow>
|
|
532
|
+
<mn>2</mn>
|
|
533
|
+
<mo>โข</mo>
|
|
534
|
+
<mi>a</mi>
|
|
535
|
+
</mrow>
|
|
536
|
+
</mfrac>
|
|
537
|
+
</math>
|
|
538
|
+
</p>
|
|
539
|
+
</article>
|
|
540
|
+
|
|
541
|
+
<footer>
|
|
542
|
+
<a href="#body">Back to top ๐</a>
|
|
543
|
+
</footer>
|
|
544
|
+
</section>
|
|
545
|
+
|
|
546
|
+
<section id="tabular-data">
|
|
547
|
+
<header>
|
|
548
|
+
<h2>Tabular data</h2>
|
|
549
|
+
<p>Elements: <code><table></code>, <code><caption></code>, <code><colgroup></code>, <code><col></code>, <code><tbody></code>, <code><thead></code>, <code><tfoot></code>, <code><tr></code>, <code><td></code>, <code><th></code></p>
|
|
550
|
+
</header>
|
|
551
|
+
|
|
552
|
+
<article>
|
|
553
|
+
<header>
|
|
554
|
+
<h3><code><table> + <caption> + <colgroup> + <col>+ <tbody> + <thead> + <tfoot> + <tr> + <td> + <th></code>:</h3>
|
|
555
|
+
</header>
|
|
556
|
+
|
|
557
|
+
<table>
|
|
558
|
+
<caption>This is the table caption</caption>
|
|
559
|
+
<colgroup>
|
|
560
|
+
<col>
|
|
561
|
+
<col span="2">
|
|
562
|
+
<col span="1">
|
|
563
|
+
</colgroup>
|
|
564
|
+
<thead>
|
|
565
|
+
<tr>
|
|
566
|
+
<th><code><thead></code></th>
|
|
567
|
+
<th>2nd colgroup</th>
|
|
568
|
+
<th>2nd colgroup</th>
|
|
569
|
+
<th>3rd colgroup</th>
|
|
570
|
+
</tr>
|
|
571
|
+
</thead>
|
|
572
|
+
<tbody>
|
|
573
|
+
<tr>
|
|
574
|
+
<th scope="row"><code><tbody></code></th>
|
|
575
|
+
<td colspan="2">This is a cell spanning two columns</td>
|
|
576
|
+
<td>Last column</td>
|
|
577
|
+
</tr>
|
|
578
|
+
</tbody>
|
|
579
|
+
<tfoot>
|
|
580
|
+
<tr>
|
|
581
|
+
<th scope="row"><code><tfoot></code></th>
|
|
582
|
+
<td>Cell 2</td>
|
|
583
|
+
<td>Cell 3</td>
|
|
584
|
+
<td>Cell 4</td>
|
|
585
|
+
</tr>
|
|
586
|
+
</tfoot>
|
|
587
|
+
</table>
|
|
588
|
+
</article>
|
|
589
|
+
|
|
590
|
+
<footer>
|
|
591
|
+
<a href="#body">Back to top ๐</a>
|
|
592
|
+
</footer>
|
|
593
|
+
</section>
|
|
594
|
+
|
|
595
|
+
<section id="forms">
|
|
596
|
+
<header>
|
|
597
|
+
<h2>Forms</h2>
|
|
598
|
+
<p>Elements: <code><form></code>, <code><label></code>, <code><input></code>, <code><button></code>, <code><select></code>, <code><datalist></code>, <code><optgroup></code>, <code><option></code>, <code><textarea></code>, <code><output></code>, <code><progress></code>, <code><meter></code>, <code><fieldset></code>, <code><legend></code></p>
|
|
599
|
+
</header>
|
|
600
|
+
|
|
601
|
+
<article>
|
|
602
|
+
<header>
|
|
603
|
+
<h3><code><form> + <label> + <input> + <button> + <select> + <datalist> + <optgroup> + <option> + <textarea> + <fieldset> + <legend></code>:</h3>
|
|
604
|
+
</header>
|
|
605
|
+
|
|
606
|
+
<form action="#forms">
|
|
607
|
+
<fieldset>
|
|
608
|
+
<legend>Welcome to the form</legend>
|
|
609
|
+
<p>
|
|
610
|
+
<label for="input-hidden">
|
|
611
|
+
Hidden: <input type=hidden id="input-hidden">
|
|
612
|
+
</label>
|
|
613
|
+
</p>
|
|
614
|
+
<p>
|
|
615
|
+
<label for="input-text">
|
|
616
|
+
Text: <input type=text id="input-text">
|
|
617
|
+
</label>
|
|
618
|
+
</p>
|
|
619
|
+
<p>
|
|
620
|
+
<label for="input-text-readonly">
|
|
621
|
+
Text (readonly): <input type=text id="input-text-readonly" value="You can't change this" readonly>
|
|
622
|
+
</label>
|
|
623
|
+
</p>
|
|
624
|
+
<p>
|
|
625
|
+
<label for="input-text-disabled">
|
|
626
|
+
Text (disabled): <input type=text id="input-text-disabled" value="This is not available" disabled>
|
|
627
|
+
</label>
|
|
628
|
+
</p>
|
|
629
|
+
<p>
|
|
630
|
+
<label for="input-search">
|
|
631
|
+
Search: <input type=search id="input-search" placeholder="search">
|
|
632
|
+
</label>
|
|
633
|
+
</p>
|
|
634
|
+
<p>
|
|
635
|
+
<label for="input-tel">
|
|
636
|
+
Telephone: <input type=tel id="input-tel">
|
|
637
|
+
</label>
|
|
638
|
+
</p>
|
|
639
|
+
<p>
|
|
640
|
+
<label for="input-url">
|
|
641
|
+
URL: <input type=url id="input-url">
|
|
642
|
+
</label>
|
|
643
|
+
</p>
|
|
644
|
+
<p>
|
|
645
|
+
<label for="input-email">
|
|
646
|
+
Email: <input type=email id="input-email">
|
|
647
|
+
</label>
|
|
648
|
+
</p>
|
|
649
|
+
<p>
|
|
650
|
+
<label for="input-password">
|
|
651
|
+
Password: <input type=password id="input-password">
|
|
652
|
+
</label>
|
|
653
|
+
</p>
|
|
654
|
+
<p>
|
|
655
|
+
<label for="input-date">
|
|
656
|
+
Date: <input type="date" id="input-date">
|
|
657
|
+
</label>
|
|
658
|
+
</p>
|
|
659
|
+
<p>
|
|
660
|
+
<label for="input-month">
|
|
661
|
+
Month: <input type="month" id="input-month">
|
|
662
|
+
</label>
|
|
663
|
+
</p>
|
|
664
|
+
<p>
|
|
665
|
+
<label for="input-week">
|
|
666
|
+
Week: <input type="week" id="input-week">
|
|
667
|
+
</label>
|
|
668
|
+
</p>
|
|
669
|
+
<p>
|
|
670
|
+
<label for="input-time">
|
|
671
|
+
Time: <input type="time" id="input-time">
|
|
672
|
+
</label>
|
|
673
|
+
</p>
|
|
674
|
+
<p>
|
|
675
|
+
<label for="input-datetime-local">
|
|
676
|
+
Datetime-local: <input type="datetime-local" id="input-datetime-local">
|
|
677
|
+
</label>
|
|
678
|
+
</p>
|
|
679
|
+
<p>
|
|
680
|
+
<label for="input-number">
|
|
681
|
+
Number: <input type="number" id="input-number">
|
|
682
|
+
</label>
|
|
683
|
+
</p>
|
|
684
|
+
<p>
|
|
685
|
+
<label for="input-range">
|
|
686
|
+
Range: <input type="range" id="input-range">
|
|
687
|
+
</label>
|
|
688
|
+
</p>
|
|
689
|
+
<p>
|
|
690
|
+
<label for="input-color">
|
|
691
|
+
Color: <input type="color" id="input-color">
|
|
692
|
+
</label>
|
|
693
|
+
</p>
|
|
694
|
+
<p>
|
|
695
|
+
<label for="input-checkbox-1">
|
|
696
|
+
Checkbox 1: <input type="checkbox" id="input-checkbox-1" name="checkbox">
|
|
697
|
+
</label>
|
|
698
|
+
<label for="input-checkbox-2">
|
|
699
|
+
Checkbox 2: <input type="checkbox" id="input-checkbox-2" name="checkbox">
|
|
700
|
+
</label>
|
|
701
|
+
<label for="input-checkbox-3">
|
|
702
|
+
Checkbox 3 (disabled): <input type="checkbox" id="input-checkbox-3" name="checkbox" disabled>
|
|
703
|
+
</label>
|
|
704
|
+
</p>
|
|
705
|
+
<p>
|
|
706
|
+
<label for="input-radio-1">
|
|
707
|
+
Radio 1: <input type="radio" id="input-radio-1" name="radio">
|
|
708
|
+
</label>
|
|
709
|
+
<label for="input-radio-2">
|
|
710
|
+
Radio 2: <input type="radio" id="input-radio-2" name="radio">
|
|
711
|
+
</label>
|
|
712
|
+
<label for="input-radio-3">
|
|
713
|
+
Radio 3 (disabled): <input type="radio" id="input-radio-3" name="radio" disabled>
|
|
714
|
+
</label>
|
|
715
|
+
</p>
|
|
716
|
+
<p>
|
|
717
|
+
<label for="select">
|
|
718
|
+
Select: <select name="select" id="select">
|
|
719
|
+
<option value="1">Option 1</option>
|
|
720
|
+
<option value="2">Option 2</option>
|
|
721
|
+
<option value="3">Option 3</option>
|
|
722
|
+
</select>
|
|
723
|
+
</label>
|
|
724
|
+
</p>
|
|
725
|
+
<p>
|
|
726
|
+
<label for="select-size">
|
|
727
|
+
Select (size): <select name="select-size" id="select-size" size=5>
|
|
728
|
+
<option value="1">Option 1</option>
|
|
729
|
+
<option value="2">Option 2</option>
|
|
730
|
+
<option value="3">Option 3</option>
|
|
731
|
+
<option value="4">Option 4</option>
|
|
732
|
+
<option value="5">Option 5</option>
|
|
733
|
+
<option value="6">Option 6</option>
|
|
734
|
+
<option value="7">Option 7</option>
|
|
735
|
+
<option value="8">Option 8</option>
|
|
736
|
+
</select>
|
|
737
|
+
</label>
|
|
738
|
+
</p>
|
|
739
|
+
<p>
|
|
740
|
+
<label for="select-multiple">
|
|
741
|
+
Select (multiple): <select name="select-multiple" id="select-multiple" multiple>
|
|
742
|
+
<option value="1">Option 1</option>
|
|
743
|
+
<option value="2">Option 2</option>
|
|
744
|
+
<option value="3">Option 3</option>
|
|
745
|
+
</select>
|
|
746
|
+
</label>
|
|
747
|
+
</p>
|
|
748
|
+
<p>
|
|
749
|
+
<label for="select-optgroup">
|
|
750
|
+
Select with optgroup: <select name="select-optgroup" id="select-optgroup">
|
|
751
|
+
<optgroup label="Group 1">
|
|
752
|
+
<option value="1">Option 1</option>
|
|
753
|
+
<option value="2">Option 2</option>
|
|
754
|
+
</optgroup>
|
|
755
|
+
<optgroup label="Group 2">
|
|
756
|
+
<option value="3">Option 3</option>
|
|
757
|
+
<option value="4">Option 4</option>
|
|
758
|
+
<option value="5">Option 5</option>
|
|
759
|
+
</optgroup>
|
|
760
|
+
</select>
|
|
761
|
+
</label>
|
|
762
|
+
</p>
|
|
763
|
+
<p>
|
|
764
|
+
<label for="datalist">
|
|
765
|
+
Datalist:
|
|
766
|
+
<input name="datalist" list="datalist">
|
|
767
|
+
<datalist id="datalist">
|
|
768
|
+
<option value="Option 1">
|
|
769
|
+
<option value="Option 2">
|
|
770
|
+
<option value="Option 3">
|
|
771
|
+
<option value="Option 4">
|
|
772
|
+
</datalist>
|
|
773
|
+
</label>
|
|
774
|
+
</p>
|
|
775
|
+
<p>
|
|
776
|
+
<label for="textarea">
|
|
777
|
+
Textarea: <textarea name="textarea" id="textarea"></textarea>
|
|
778
|
+
</label>
|
|
779
|
+
</p>
|
|
780
|
+
<p>
|
|
781
|
+
<label for="input-file">
|
|
782
|
+
File (single): <input type="file" id="input-file">
|
|
783
|
+
</label>
|
|
784
|
+
</p>
|
|
785
|
+
<p>
|
|
786
|
+
<label for="input-file-multiple">
|
|
787
|
+
File (multiple): <input type="file" id="input-file-multiple" multiple>
|
|
788
|
+
</label>
|
|
789
|
+
</p>
|
|
790
|
+
<p>
|
|
791
|
+
<button type="button">I'm a Button</button>
|
|
792
|
+
</p>
|
|
793
|
+
<p>
|
|
794
|
+
<button type="button" disabled>I'm a disabled Button</button>
|
|
795
|
+
</p>
|
|
796
|
+
</fieldset>
|
|
797
|
+
</form>
|
|
798
|
+
</article>
|
|
799
|
+
|
|
800
|
+
<article>
|
|
801
|
+
<header>
|
|
802
|
+
<h3><code><output></code>:</h3>
|
|
803
|
+
</header>
|
|
804
|
+
|
|
805
|
+
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
|
|
806
|
+
<fieldset>
|
|
807
|
+
<legend>Testing the <code><output></code> element</legend>
|
|
808
|
+
<input name=a type=number step=any> +
|
|
809
|
+
<input name=b type=number step=any> =
|
|
810
|
+
<output name=o for="a b"></output>
|
|
811
|
+
<p>Code is taken from <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#example-5b22c23a" target="_blank">this example by W3</a>.</p>
|
|
812
|
+
</fieldset>
|
|
813
|
+
</form>
|
|
814
|
+
</article>
|
|
815
|
+
|
|
816
|
+
<article>
|
|
817
|
+
<header>
|
|
818
|
+
<h3><code><progress> + <meter></code>:</h3>
|
|
819
|
+
</header>
|
|
820
|
+
|
|
821
|
+
<form action="#forms">
|
|
822
|
+
<fieldset>
|
|
823
|
+
<legend>Testing <code><progress></code> and <code><meter></code></legend>
|
|
824
|
+
<p>
|
|
825
|
+
<label for="progress">
|
|
826
|
+
Progress: <progress id="progress" max="100" value="64">64%</progress>
|
|
827
|
+
</label>
|
|
828
|
+
</p>
|
|
829
|
+
<p>
|
|
830
|
+
<label for="meter-2">
|
|
831
|
+
Meter (ok): <meter id="meter-2" max="100" low="30" high="80" optimum="50" value="50">50/100</meter>
|
|
832
|
+
</label>
|
|
833
|
+
</p>
|
|
834
|
+
<p>
|
|
835
|
+
<label for="meter-1">
|
|
836
|
+
Meter (warning): <meter id="meter-1" max="100" low="30" high="80" optimum="50" value="20">20/100</meter>
|
|
837
|
+
</label>
|
|
838
|
+
</p>
|
|
839
|
+
<p>
|
|
840
|
+
<label for="meter-3">
|
|
841
|
+
Meter (critical): <meter id="meter-3" max="100" low="60" high="70" value="90">80/100</meter>
|
|
842
|
+
</label>
|
|
843
|
+
</p>
|
|
844
|
+
</fieldset>
|
|
845
|
+
</form>
|
|
846
|
+
</article>
|
|
847
|
+
|
|
848
|
+
<footer>
|
|
849
|
+
<a href="#body">Back to top ๐</a>
|
|
850
|
+
</footer>
|
|
851
|
+
</section>
|
|
852
|
+
|
|
853
|
+
<section id="interactive-elements">
|
|
854
|
+
<header>
|
|
855
|
+
<h2>Interactive elements</h2>
|
|
856
|
+
<p>Elements: <code><details></code>, <code><summary></code>, <code><dialog></code></p>
|
|
857
|
+
</header>
|
|
858
|
+
|
|
859
|
+
<article>
|
|
860
|
+
<header>
|
|
861
|
+
<h3><code><details> + <summary></code>:</h3>
|
|
862
|
+
</header>
|
|
863
|
+
|
|
864
|
+
<details>
|
|
865
|
+
<summary>This can be expanded</summary>
|
|
866
|
+
<p>And by doing so, more information is revealed.</p>
|
|
867
|
+
</details>
|
|
868
|
+
</article>
|
|
869
|
+
|
|
870
|
+
<article>
|
|
871
|
+
<header>
|
|
872
|
+
<h3><code><dialog></code>:</h3>
|
|
873
|
+
</header>
|
|
874
|
+
|
|
875
|
+
<dialog>
|
|
876
|
+
<p>This text is inside a <code><dialog></code> box! It should be hidden by default, and shown to the user when given an <code>open</code> attribute.</p>
|
|
877
|
+
</dialog>
|
|
878
|
+
</article>
|
|
879
|
+
|
|
880
|
+
<footer>
|
|
881
|
+
<a href="#body">Back to top ๐</a>
|
|
882
|
+
</footer>
|
|
883
|
+
</section>
|
|
884
|
+
|
|
885
|
+
<section id="scripting">
|
|
886
|
+
<header>
|
|
887
|
+
<h2>Scripting</h2>
|
|
888
|
+
<p>Elements: <code><script></code>, <code><noscript></code>, <code><template></code>, <code><canvas></code></p>
|
|
889
|
+
</header>
|
|
890
|
+
|
|
891
|
+
<article>
|
|
892
|
+
<header>
|
|
893
|
+
<h3><code><script> + <noscript></code>:</h3>
|
|
894
|
+
</header>
|
|
895
|
+
|
|
896
|
+
<p>Dynamic scripts and data blocks are included with the <code><script></code> element.</p>
|
|
897
|
+
<script>
|
|
898
|
+
document.write('<p>This paragraph was generated with JavaScript!</p>');
|
|
899
|
+
</script>
|
|
900
|
+
<p>If scripting is disabled when loading the page, content inside <code><noscript></code> is used instead.</p>
|
|
901
|
+
<noscript>
|
|
902
|
+
<p>I see you disabled JavaScript!</p>
|
|
903
|
+
</noscript>
|
|
904
|
+
</article>
|
|
905
|
+
|
|
906
|
+
<article>
|
|
907
|
+
<header>
|
|
908
|
+
<h3><code><template></code>:</h3>
|
|
909
|
+
</header>
|
|
910
|
+
|
|
911
|
+
<p>Below this paragraph, there's a <code><template></code> element containing a HTML declaration, that can be used by scripts.</p>
|
|
912
|
+
<template>
|
|
913
|
+
<p>Hi! I'm a paragraph inside the <code><template></code> element.</p>
|
|
914
|
+
</template>
|
|
915
|
+
</article>
|
|
916
|
+
|
|
917
|
+
<article>
|
|
918
|
+
<header>
|
|
919
|
+
<h3><code><canvas></code>:</h3>
|
|
920
|
+
</header>
|
|
921
|
+
|
|
922
|
+
<p>A <code><script></code> is used to draw a rectangle in the <code><canvas></code> below.</p>
|
|
923
|
+
<canvas id="canvas">
|
|
924
|
+
Alternative text explaining what's on display in this <canvas>.
|
|
925
|
+
</canvas>
|
|
926
|
+
<script>
|
|
927
|
+
var canvas = document.getElementById('canvas');
|
|
928
|
+
var ctx = canvas.getContext('2d');
|
|
929
|
+
ctx.fillStyle = 'tomato';
|
|
930
|
+
ctx.fillRect(10, 10, 100, 100);
|
|
931
|
+
</script>
|
|
932
|
+
</article>
|
|
933
|
+
|
|
934
|
+
<footer>
|
|
935
|
+
<a href="#body">Back to top ๐</a>
|
|
936
|
+
</footer>
|
|
937
|
+
</section>
|
|
938
|
+
|
|
939
|
+
<section id="coverage-table">
|
|
940
|
+
<h2>Coverage table</h2>
|
|
941
|
+
<table id="elements-table">
|
|
942
|
+
|
|
943
|
+
</table>
|
|
944
|
+
|
|
945
|
+
</section>
|
|
946
|
+
</main>
|
|
947
|
+
|
|
948
|
+
<aside id="aside">
|
|
949
|
+
<h2>About this project</h2>
|
|
950
|
+
<p>A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.</p>
|
|
951
|
+
<p>This section is inside an <code><aside></code> element.</p>
|
|
952
|
+
</aside>
|
|
953
|
+
|
|
954
|
+
<footer>
|
|
955
|
+
<p><a href="https://github.com/alexandersandberg/html5-elements-tester">HTML5 elements tester</a> by <a href="https://alexandersandberg.com">Alexander Sandberg</a> ยท <a href="#body">Back to top ๐</a></p>
|
|
956
|
+
</footer>
|