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 frameworks.

Text

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

A para­graph (from the Greek para­graphos, “to write beside” or “writ­ten beside”) is a self-con­tained 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.

Blockquotes

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 bottom.

Said no one, ever.

Lists

Definition list

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

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 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
Table Footer

Code

Keyboard input: Cmd

Inline code: <div>code</div>

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

Pre-formatted text

P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  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 importance.

This text has added emphasis.

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

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-tex­tual annotation.

This text is deleted and This text is inserted. This is a link with inserted text.

This text has a strikethrough.

Superscript®.

Subscript for things like H2O.

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

Abbreviation: HTML

This text is a short inline quotation.

This is a citation.

The dfn ele­ment indi­cates a definition.

The mark ele­ment indi­cates a highlight.

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

Images

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

[Top]

Select menus

[Top]

Checkboxes

[Top]

Radio but­tons

[Top]

Textareas

[Top]

HTML5 inputs

[Top]

Action but­tons

[Top]

 

↑ Go back to the beginning of this page.
Mercury Photo Bureau underlying-calculable