A collection of HTML elements on a single page, designed to give developers and designers a quick look at all the common HTML elements as a user will see them.
It is particularly useful for creating CSS stylesheets that cover all common elements. This is not a new idea; this particular repo is a chop-up of an existing content page:
Original Author: Jukka K. Korpela
Original project: Test display of HTML content
The purpose of this version was to update Jukka's HTML page to HTML5 standards, with a few caveats:
- The elements are not an exhaustive list. This content page doesn't include all elements in the HTML5 specification;
- Only non-experimental elements have been included. This is to ensure that content covered offers a relatively consistent experience to the end user.
- No CSS has been included, deliberately; Only your Broswer's user agent stylesheet and your styles will affect the elements.
To speed up navigation and keep the HTML elements as clean as possible, I've added some dynamic extras using JavaScript and jQuery:
- A table of contents of all the
<h2>
s is also included. - A list of the first instance of every HTML element referenced inside a
<code>
tag is included. Click a tag to go to it.- Some tags will include others, which may not be explicity mentioned, e.g. a
<thead>
inside a<table>
.
- Some tags will include others, which may not be explicity mentioned, e.g. a
- Each element also includes a link to the matching Mozilla Developer Network page for detailed information about that element.
If you don't want to see this stuff, simply comment out/delete the <script>
tag at the bottom of the html-content.htm
file
The demo page can be used in several ways:
- A standalone HTML file - just open
html-content.htm
in your browswer of choice. - Elements for insertion into another page/CMS - copy everything in the
<main>
tag and paste it wherever you want to test.
For example, I like to paste the <main>
contents into an unpublished test page on any website I build, so I can quickly preview
any CSS changes that might affect content once editors take over publishing content on the site.
- a
- abbr
- address
- area
- aside
- audio
- blockquote
- br
- button
- canvas
- caption
- cat
- cite
- code
- data
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- dt
- em
- fieldset
- figcaption
- figure
- form
- header
- hr
- i
- image
- img
- input
- ins
- kbd
- label
- legend
- li
- main
- map
- mark
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- p
- param
- pre
- q
- samp
- section
- select
- small
- source
- strong
- sub
- summary
- sup
- table
- td
- textarea
- tfoot
- th
- time
- tr
- u
- ul
- var
- video