Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexandersandberg/html5-elements-tester
A page containing HTML elements that you can use for testing purposes
https://github.com/alexandersandberg/html5-elements-tester
elements html html5 kitchen-sink template tester testing-tool
Last synced: about 1 month ago
JSON representation
A page containing HTML elements that you can use for testing purposes
- Host: GitHub
- URL: https://github.com/alexandersandberg/html5-elements-tester
- Owner: alexandersandberg
- License: mit
- Created: 2019-06-27T12:13:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-02T03:47:00.000Z (over 4 years ago)
- Last Synced: 2025-01-11T13:44:03.406Z (about 1 month ago)
- Topics: elements, html, html5, kitchen-sink, template, tester, testing-tool
- Language: HTML
- Homepage: https://alexandersandberg.github.io/html5-elements-tester/
- Size: 106 KB
- Stars: 20
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# HTML5 elements tester
A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.
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.
If your favorite reset or framework is missing, please open an issue about it, and I'll add it to the list!
## Usage
### Copy & Paste
Copy elements directly from `index.html` into your own documents.
### Download
Download `index.html`, include whatever resource you need to test (e.g. your CSS), and open the file in your preferred browser.
## Supported elements
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.
### Sections
``, ``, ``, ``, ``, `
`, ``, ``, ``, ``, ``, ``, ``
### Grouping content
`
`, `
`, `
`, ``, ``, ``, ``, `- `, `
`, `- `, `
- `, ``, ``, ``, ``
### Text-level semantics
``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `
### Edits
``, ``
### Embedded content
``, ``, `![]()
`, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``
### Tabular data
``, ``, ``, ``, ``, ``, ``, ``, ``, ``
### Forms
``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``
### Interactive elements
``, ``, ``
### Scripting
``, `<noscript>`, `<template>`, `<canvas>`
## Supported resets and frameworks
### Resets
* [Eric Meyer's 2.0](https://meyerweb.com/eric/tools/css/reset/)
* [HTML5 Doctor](https://html5doctor.com/html-5-reset-stylesheet/)
* [minireset.css](https://github.com/jgthms/minireset.css)
* [normalize.css](https://github.com/necolas/normalize.css)
* [Reboot](https://getbootstrap.com/docs/4.0/content/reboot/)
* [Remedy](https://github.com/mozdevs/cssremedy)
* [sanitize.css](https://github.com/jonathantneal/sanitize.css/)
* [UndoHTML](https://tantek.com/log/2004/undohtml.css)
* [universalize.css](https://github.com/alexandersandberg/universalize.css)
### Frameworks
* [awsm.css](https://github.com/igoradamenko/awsm.css)
* [Bahunya](https://github.com/Kimeiga/bahunya)
* [Bootstrap](https://github.com/twbs/bootstrap)
* [Bulma](https://github.com/jgthms/bulma)
* [Foundation](https://github.com/zurb/foundation-sites)
* [Kacit](https://github.com/yegor256/tacit)
* [Marx](https://github.com/mblode/marx)
* [Materialize](https://github.com/Dogfalo/materialize)
* [no-class](https://github.com/davidpaulsson/no-class)
* [Pure](https://github.com/pure-css/pure/)
* [Sakura & Sakura Vader](https://github.com/oxalorg/sakura/tree/master/css)
* [Semantic UI](https://github.com/Semantic-Org/Semantic-UI)
* [Tachyons](https://github.com/tachyons-css/tachyons)
* [Tacit](https://github.com/yegor256/tacit)
* [Tailwind](https://github.com/tailwindcss/tailwindcss)
* [Tufte](https://github.com/edwardtufte/tufte-css)
* [Water.css (light) & Water.css (dark)](https://github.com/kognise/water.css)
* [Writ](https://github.com/programble/writ)
## A project by Alexander Sandberg
Thanks for checking out my project! ❤️
If you want to get in touch, or check out my other work, you can find me here:
- [Website](https://alexandersandberg.com) (alexandersandberg.com)
- [GitHub](https://github.com/alexandersandberg) (@alexandersandberg)
- [Twitter](https://twitter.com/alexandberg) (@alexandberg)
## License
Distributed under the MIT License © [Alexander Sandberg](https://github.com/alexandersandberg)
---
This project was inspired by [normalize.css's test page](https://github.com/necolas/normalize.css/blob/master/test.html) and [html5-kitchen-sink](https://github.com/dbox/html5-kitchen-sink), and organized according to [W3C's HTML 5.2, §4: The elements of HTML](https://www.w3.org/TR/2017/REC-html52-20171214/semantics.html#semantics).