HTML element test page (h1)

Welcome, you've found my testing page. A page with all HTML elements I could drop in (even if not used on site), that is used for testing my CSS to ensure it's works everywhere I can get it to.

heading 2 (h2)

heading 3 (h3)

heading 4 (h4)

heading 5 (h5)

heading 6 (h6)

Paragraphs

A simple little paragraph.

Followed by another with a link home

Lists

ul

List item 1
List item 2
List item 3

ol

List item 1
List item 2
List item 3

dl

Term: Description 1; Descripton 2

Code

<p>Example of code inside a pre.<p>

Code alone.

And heres some code inside a tag, namely a paragraph.

Tables

Each of these are wrapped by an element with .tblcon class.

Concern/VM	Services1
Production Web Server	Nginx
Production Web Server	Nginx

Concern/VM	Services2
Production Web Server	Nginx	Nginx	Nginx
Production Web Server	Nginx	Nginx
Production Web Server	Nginx	Nginx	Nginx	Nginx	Nginx

Concern/VM	Services3
Production Web Server	Nginx
Production Web Server	Nginx

Table with all elements

Here's a captioned table
Name	Earned	Profit
Mr. Epic	£15000	£1000
Sludge	£35000	£19000
Smart fella	£69420	£50000
	£119420	£70000

Blockquotes

A section that is quoted from another source

Using q tag for inline (short) quotations, as you see. Nifty.

Form

Behold, the mega-form! If you want details check mozilla's form section

datalist, fieldset, input, legend, meter, output, select, textarea

input todo: datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

Button

Anchor!

Grid System

Not using one (curently at least) as it's un-needed. Perhaps if I make my own reset/base CSS file I'll add one for you guys.

Utilities

Notecards

Alerts

Modals

Example utils I may want

Bootstrap utilities

Headers

Menus

Maybe I'll do dropdowns soonish

Searchbars

Inline elements

Unplanned/Dumped for now

Address

testing

Article

testing

Aside

There's also the class .page-nav

Images

Webp. If it doesn't load your browser doesn't support it, but the picture below will work.

Picture

Figure

hr

misc

Here's some examples of inline elements I currently don't use (or didn't up to now).

The list consists of abbr for abbr abbreviations, bdi for bidirectional text, bdo (rtl) for changing text direction
Oh there was a br (line break), not a new paragraph tag.

If something has been removed, ~~because it's wrong~~ for any reason, the del and ins elements are here!

todo

cite, data, dfn, em, i, kbd, mark, s, samp, small, strong, sub, sup, time, u, var, wbr

rp, rt, ruby

Multimedia

area, audio, img(done elsehwere), map, track, video

Embedded content

embed, iframe, object, picture, portal, source

Svg

canvas

This allows for scripting, animations, games, fancier graphics, etc.

Interactive elements

details

Gangnam style

OP OP OP OP, OPPA GANGNAM STYLE

dialog

Non-suggested way

It's recommended to use JS to toggle dialogs, but to still use dialog (without the open attribute) over a div for semantic reasoning.

Web components

slot, template

I've never used these, so I'm not sure 100% about their application, omitting for now.

Up to date

If you're looking for a complete (and up-to-date) list of HTML elements, look over at the mdn web docs.

I'm recommending this, as it's where I yoinked all the elements from on Dec 9th 2022, and it's maintained regularly (unlike this page).

#TODO:

Trivia

As of today 09/12/22 thiss is the largest webpage on my site, with the HTML taking up ~13KB