HTML Examples

This page contains HTML examples — examples of basic HTML elements that you can use for your own website.

Forms

• Basic form example (with no styles)
• Form with top-aligned labels
• Form with left-aligned labels
• Form with right-aligned labels
• Inline form
• Accessible compact form
• Bootstrap form using grid system
• Bootstrap form with validation styles & feedback icons

Form Elements

• button
• textarea
• select
• select with size attribute
• select with multiple items able to be selected
• datalist
• fieldset
• output
• progress
• meter
• input type="hidden"
• input type="text"
• input type="color"
• input type="number"
• input type="range"
• input type="date"
• input type="search"
• input type="tel"
• input type="url"
• input type="email"
• input type="password"
• input type="date"
• input type="month"
• input type="week"
• input type="time"
• input type="datetime-local"
• input type="checkbox"
• input type="radio"
• input type="file"
• input type="submit"
• input type="image"
• input type="reset"
• input type="button"

Image Examples

• Basic image example
• Linked image
• Image with border
• Responsive image

Table Examples

• Basic table
• Table with thead, tbody, and tfoot
• Table with border
• Table with alternating colors
• Table with border and alternating colors
• Table with colspan
• Table with rowspan
• Table with colgroup
• Table with colgroup and col

Text Examples

• b for bold text
• blockquote for quotes from another source
• br for line breaks
• cite for citations
• code for code
• dfn for defining instance of a term
• del for deleted text
• em for stress emphasis
• h1 - h6 for headings
• i for text in an alternate voice or mood
• ins for inserted Text
• kbd for keyboard Text
• p for paragraphs
• pre for preformatted Text
• small for small print, side comments, etc
• q for single-line quotes from another Source
• samp for sample output from a computer program
• var for a variable within the prose

Link Examples

• Basic link
• Email link
• Email link with subject line
• "Nofollow" link
• Open link in new window
• Open link in a named window
• Link an image
• Link with hover effect

List Examples

Unordered Lists

• Basic unordered list
• Nested unordered lists
• Unordered list with square bullets
• Unordered list with circle bullets
• Unordered list with image bullets

Ordered Lists

• Basic ordered list
• Nested ordered list
• Ordered list with lowercase latin characters
• Ordered list with uppercase latin characters
• Ordered list with lowercase roman numerals
• Ordered list with uppercase roman numerals
• Ordered list with lowercase Greek characters
• More List Types

Definition Lists

• Basic definition list
• Definition list with a dfn
• Nested definition list
• Definition list with multiple terms
• Definition list with multiple definitions