What is this page?
This is a webpage that uses every HTML5 element at least one time, based on the MDN elements reference list as of . Its purpose is to demonstrate what is possible with HTML alone. There is no additional CSS or JavaScript, just plain old HTML.Why do this?
I created this as a sort of a challenge for myself to come up with an example of every element on a single page.
So, what can HTML do?
It can do...
Text styling!
It can create basic text style effects commonly used in text editors.This can be done on entire words, or Text can be displayed as superscript or subscript
...or be shown as strong, small, or given additional emphasis.
Abbreviations can be shown when hovering the mouse over text.
It can display some
text as code
...or with no formatting at all
Text can be highlighted or
Insert line breaks within very long continous strings of text for improved readability (resize to see the clean line breaks)
http://this
Multiple Language Supprt
Write in multiple languages...漢 字
...even those that read right-to-left
مرحبا
In fact, force any text direction to right-to-left:
force any text direction to right-to-left
Quotations
Short quotes likeLuke, I am your father
or long ones like...
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....Star Wars, "A New Hope" (1977)
Headers!
Lots
of
different
header
sizes
even ridiculously small ones
Descriptions
- HTML
- A markup language used to structure content on the web.
- CSS
- A style sheet language used to describe the look of a document written in HTML.
- JavaScript
- A programming language used to create interactive behavior on web pages.
Tables
Tables that look weird without borders but still get the job done!
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| some | interesting | data |
| more | fascinating | stuff |
| with a footer | ||
Images
Images with captions
...or without them
Display different images based on screen sizes (resize browser window to see the difference)
Link different parts of an image to different places (click on each item in the workspace below)
Lists
Ordered lists...
- one
- two
- three
- four
...and unordered lists with nested bullets
- Milk
-
Cheese
- Blue cheese
- Feta
Audio and Video
Embed audio files
and video files!
Embed Things
Like pdfs
Math
Display equations that are easy to understand: x = y + 2
...and ones that are more difficult
Interactive (but ugly) dialog boxes
More graphics than you probably realized
Like meters
...and progress bars
...and SVG graphics
Special Characters
Like Emojis
😀...and symbols
← ↑ → ↓User Inputs
These elements don't do anything without JavaScript, but they are still HTML elements
User instructions
Press Ctrl + S to save the document.
Program outputs
$ myprogram --version
myprogram 1.2.3
Done.
Search bars
Forms with various controls