HTML Elements (Theme Layout Demo)

HTML5 Test Page

This is a test page filled with com­mon HTML ele­ments to be used to pro­vide visual feed­back whilst build­ing CSS sys­tems and frame­works.




Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


A para­graph (from the Greek para­graphos, “to write beside” or “writ­ten beside”) is a self-​contained unit of a dis­course in writ­ing deal­ing with a par­tic­u­lar point or idea. A para­graph con­sists of one or more sen­tences. Though not required by the syn­tax of any lan­guage, para­graphs are usu­ally an expected part of for­mal writ­ing, used to orga­nize longer prose.


A block quo­ta­tion (also known as a long quo­ta­tion or extract) is a quo­ta­tion in a writ­ten doc­u­ment, that is set off from the main text as a para­graph, or block of text.

It is typ­i­cally dis­tin­guished visu­ally using inden­ta­tion and a dif­fer­ent type­face or smaller size quo­ta­tion. It may or may not include a cita­tion, usu­ally placed at the bot­tom.

Said no one, ever.


Definition list

Definition List Title
This is a def­i­n­i­tion list divi­sion.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Tabular data

Table Caption
Table Heading 1Table Heading 2Table Heading 3Table Heading 4Table Heading 5
Table Footer 1Table Footer 2Table Footer 3Table Footer 4Table Footer 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5


Keyboard input: Cmd

Inline code: <div>code</div>

Sample out­put: This is sample output from a computer program.

Pre-​formatted text

  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~

Inline elements

This is a text link.

Strong is used to indi­cate strong impor­tance.

This text has added empha­sis.

The b ele­ment is styl­is­ti­cally dif­fer­ent text from nor­mal text, with­out any spe­cial impor­tance.

The i element is text that is off­set from the nor­mal text.

The u ele­ment is text with an unar­tic­u­lated, though explic­itly ren­dered, non-​textual anno­ta­tion.

This text is deleted and This text is inserted.

This text has a strikethrough.


Subscript for things like H2O.

This small text is small for for fine print, etc.

Abbreviation: HTML

This text is a short inline quo­ta­tion.

This is a cita­tion.

The dfn ele­ment indi­cates a def­i­n­i­tion.

The mark ele­ment indi­cates a high­light.

The variable element, such as x = y.

The time ele­ment:

HTML Comments

There is com­ment here:

There is a com­ment span­ning mul­ti­ple tags and lines below here.

Embedded content


No <figure> element

Image alt text

Wrapped in a <figure> element, no <figcaption>

Image alt text

Wrapped in a <figure> element, with a <figcaption>

Image alt text
Here is a cap­tion for this image.

Form elements

Input fields


Select menus




Radio but­tons




HTML5 inputs


Action but­tons



↑ Go back to the beginning of this page.
Do NOT follow this link or you will be banned from the site! underlying-calculable