cbracco / html5-test-page Goto Github PK

A page filled with common HTML elements to be used for testing purposes. Useful when building CSS systems for projects big and small.

Home Page: https://cbracco.github.io/html5-test-page

License: MIT License

HTML 100.00%

html5-test-page's Introduction

HTML5 Test Page

This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.

I have not been able to find a dead-simple, standalone test page out there, so I made one. The HTML elements are loosely categorized as either text, embedded content, or form elements.

Versioning

HTML5 Test Page will be maintained using the Semantic Versioning guidelines. From here on out, releases will be numbered using the following format:

major.minor.patch

Breaking backwards compatibility increments major, while resetting minor and patch.
New code that does not break backwards compatibility increments minor, while resetting patch.
Bug fixes and other small changes increment patch.

Credits

Made by @cbracco. This project is based on the test file included in @necolas’s normalize.css project.

html5-test-page's People

Contributors

Stargazers

Watchers

Forkers

theflowglenn stargater ralgh joaosaragossa tools-protoarte gelogenic liuzhongjun haroenv martskin tosilence observerslee thealeksey johnpolacek modulexcite klapouchy motherhackerz puzzleboks yerffejytnac drawcard turante jandre3000 axelloi msspl-prashenjeetroy yratof roachhd zuznow yea55 gnowland ashrafabulsoud fredyang josdea ionas carmaz79 jeviteng ondreas webia1 pmm069 tonymosley brianpeiris katikato bennypowers alalbuquerque songfarm-david jacsteen smmcweb aurelioderosa kundankr0020 shibbuissac eddygee adam-si michaelpop shimunic charul97 bikerwhocodes uday4all angujo mirai-audio malachi358 aritode gusg21 hycind andra-voinea hadenbullseye haveal ajhsu remicmacs chethanprasadn synsh finncyr code-buddah mmaier2 nickstees swapnil-bhamat ycjsme aircokol dan-ding roytest001 sambaldwin jsakas rajarju notyetspecified bwcgn weltpixel spspt sseabra inoas peterhassett fierymonk tristanwilson111 andriitishchenko hatsantos vijaybabu2006 aosng007 gmirsky prodperfect danalexilewis sobechad podtserkovskiy h-avatar subratgoogle

html5-test-page's Issues

Missing picture element

The picture element is missing in the list.

Standard, but not universally supported elements

Some elements are in the living standard (i.e. are not experimental - like menu - or deprecated - like big) but are not universally supported. One notable example is the dialog element (mdn) which is supported by Chrome and Edge, but must be enabled in Fire Fox and has no support in Safari browsers. Should these elements be included here? Maybe with a comment noting compatibility?

should also cover nested lists and list items with paragraphs

Request

should also cover nested lists and list items with paragraphs

Rationale

in particular in docuuments we pretty often have this case

HTML Emojis

Using Emojis in HTML?

How to add Emojis?

Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

UTF-8 covers almost all of the characters and symbols in the world.

The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the tag:

<meta charset="UTF-8">

Used this to test needed dark mode settings

Thanks for this!!!

Just passing this on. I used this to test what's the minimal set of CSS settings need to handle all html elements in dark mode.

At least on this page this is what was needed

You can test here and toggle your preference in your devtools (in Chrome Devtools->Settings->Preferences->Rendering->Emulate CSS media feature prefers-color-scheme.

google.com has an security policy error within an iframe. Suggest using http://www.wikipedia.com instead

The header you could add code to set the default scale:

<meta name="viewport" content="width=device-width,initial-scale=1" />