├── LICENSE.md ├── README.md ├── index.html └── package.json /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Alexander Sandberg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML5 elements tester 2 | 3 | A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks. 4 | 5 | Since v1.1.0 now also including the option to *preview popular CSS resets and CSS frameworks*, as well as easily including *your own custom CSS* by pasting a direct link to it. 6 | 7 | If your favorite reset or framework is missing, please open an issue about it, and I'll add it to the list! 8 | 9 | ## Usage 10 | ### Copy & Paste 11 | Copy elements directly from `index.html` into your own documents. 12 | 13 | ### Download 14 | Download `index.html`, include whatever resource you need to test (e.g. your CSS), and open the file in your preferred browser. 15 | 16 | ## Supported elements 17 | Refer to [this list of HTML elements on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) for more details of each element. 18 | 19 | ### Sections 20 | ``, `
`, `
`, `
456 | 457 |
458 |
459 |

<embed>:

460 |
461 | 462 | 463 |
464 | 465 |
466 |
467 |

<object> + <param>:

468 |
469 | 470 | 471 | 472 | 473 |
474 | 475 |
491 | 492 |
493 |
494 |

<map> + <area>:

495 |
496 | 497 |

Each side of the image below is linked to different anchors on this page. Give it a try!

498 | 499 | 500 | 501 | 502 | Keanu Reeves looking fine 503 |
504 | 505 |
506 |
507 |

<math>:

508 |
509 | 510 |

The quadratic formula is:
511 | 512 | x 513 | = 514 | 515 | 516 | - b 517 | ± 518 | 519 | b 2 520 | - 521 | 4 a c 522 | 523 | 524 | 525 | 2 a 526 | 527 | 528 | 529 |

530 |
531 | 532 | 535 | 536 | 537 |
538 |
539 |

Tabular data

540 |

Elements: <table>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td>, <th>

541 |
542 | 543 |
544 |
545 |

<table> + <caption> + <colgroup> + <col>+ <tbody> + <thead> + <tfoot> + <tr> + <td> + <th>:

546 |
547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 |
This is the table caption
<thead>2nd colgroup2nd colgroup3rd colgroup
<tbody>This is a cell spanning two columnsLast column
<tfoot>Cell 2Cell 3Cell 4
579 |
580 | 581 | 584 |
585 | 586 |
587 |
588 |

Forms

589 |

Elements: <form>, <label>, <input>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>, <fieldset>, <legend>

590 |
591 | 592 |
593 |
594 |

<form> + <label> + <input> + <button> + <select> + <datalist> + <optgroup> + <option> + <textarea> + <fieldset> + <legend>:

595 |
596 | 597 |
598 |
599 | Welcome to the form 600 |

601 | 604 |

605 |

606 | 609 |

610 |

611 | 614 |

615 |

616 | 619 |

620 |

621 | 624 |

625 |

626 | 629 |

630 |

631 | 634 |

635 |

636 | 639 |

640 |

641 | 644 |

645 |

646 | 649 |

650 |

651 | 654 |

655 |

656 | 659 |

660 |

661 | 664 |

665 |

666 | 669 |

670 |

671 | 674 |

675 |

676 | 679 |

680 |

681 | 684 |

685 |

686 | 689 | 692 | 695 |

696 |

697 | 700 | 703 | 706 |

707 |

708 | 715 |

716 |

717 | 729 |

730 |

731 | 738 |

739 |

740 | 753 |

754 |

755 | 765 |

766 |

767 | 770 |

771 |

772 | 775 |

776 |

777 | 780 |

781 |

782 | 785 |

786 |

787 | 790 |

791 |

792 | 795 |

796 |

797 | 800 |

801 |

802 | 803 |

804 |
805 |
806 |
807 | 808 |
809 |
810 |

<output>:

811 |
812 | 813 |
814 |
815 | Testing the <output> element 816 | + 817 | = 818 | 819 |

Code is taken from this example by W3.

820 |
821 |
822 |
823 | 824 |
825 |
826 |

<progress> + <meter>:

827 |
828 | 829 |
830 |
831 | Testing <progress> and <meter> 832 |

833 | 836 |

837 |

838 | 841 |

842 |

843 | 846 |

847 |

848 | 851 |

852 |
853 |
854 |
855 | 856 | 859 |
860 | 861 |
862 |
863 |

Interactive elements

864 |

Elements: <details>, <summary>, <dialog>

865 |
866 | 867 |
868 |
869 |

<details> + <summary>:

870 |
871 | 872 |
873 | This can be expanded 874 |

And by doing so, more information is revealed.

875 |
876 |
877 | 878 |
879 |
880 |

<dialog>:

881 |
882 | 883 | 884 |

This text is inside a <dialog> box! It should be hidden by default, and shown to the user when given an open attribute.

885 |
886 |
887 | 888 | 891 |
892 | 893 |
894 |
895 |

Scripting

896 |

Elements: <script>, <noscript>, <template>, <canvas>

897 |
898 | 899 |
900 |
901 |

<script> + <noscript>:

902 |
903 | 904 |

Dynamic scripts and data blocks are included with the <script> element.

905 | 908 |

If scripting is disabled when loading the page, content inside <noscript> is used instead.

909 | 912 |
913 | 914 |
915 |
916 |

<template>:

917 |
918 | 919 |

Below this paragraph, there's a <template> element containing a HTML declaration, that can be used by scripts.

920 | 923 |
924 | 925 |
926 |
927 |

<canvas>:

928 |
929 | 930 |

A <script> is used to draw a rectangle in the <canvas> below.

931 | 932 | Alternative text explaining what's on display in this <canvas>. 933 | 934 | 940 |
941 | 942 | 945 |
946 | 947 | 948 | 953 | 954 | 957 | 958 | 1025 | 1026 | 1027 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html5-elements-tester", 3 | "version": "1.1.7", 4 | "description": "A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.", 5 | "main": "index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/alexandersandberg/html5-elements-tester.git" 12 | }, 13 | "keywords": [ 14 | "html", 15 | "html5", 16 | "elements", 17 | "testing-tool", 18 | "tester", 19 | "template", 20 | "kitchen-sink" 21 | ], 22 | "author": "Alexander Sandberg (https://alexandersandberg.com)", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/alexandersandberg/html5-elements-tester/issues" 26 | }, 27 | "homepage": "https://github.com/alexandersandberg/html5-elements-tester#readme" 28 | } 29 | --------------------------------------------------------------------------------